HTML/CSS Box ausrichten
- Ersteller Tanario
- Erstellt am
es klappt einfach nicht ;(
ich habe eine große box, direkt darüber möchte ich 6 kleinere boxen haben.
ich habe eine große box, direkt darüber möchte ich 6 kleinere boxen haben.
PHP:
<style type="text/css">
#naviagtion_1 {
position: absolute;
margin-left: 380px;
width: 128px;
height: 31px;
background-color:#999
}
#content {
position: absolute;
left: 50%;
top: 50%;
width: 792px; /* Breite des Elements */
height: 562px; /* Höhe des Elements */
margin-left: -396px; /* Breite des Elements geteilt durch zwei! */
margin-top: -281px; /* Höhe des Elements geteilt durch zwei! */
background-color: #CCCCCC;
}hmm, hast du dir mal die Funktionsweise von "position:" durchgelesen?
und theHacker schrieb etwas von "relative" Positionierung
und theHacker schrieb etwas von "relative" Positionierung
So ich denke jetzt habe ich es verstanden vielen vielen Dank !
Jetzt kommt aber das nächste Problem wie schaffe ich die weiteren kleinen boxen mittig über den Content Bereich zuplatzieren ?
vielen vielen Dank !Jetzt kommt aber das nächste Problem wie schaffe ich die weiteren kleinen boxen mittig über den Content Bereich zuplatzieren ?
PHP:
<style type="text/css">
#naviagtion_1 {
float:left;
margin:0 auto;
position: relative;
width: 128px;
height: 31px;
background-color:#999;
}
#naviagtion_2 {
margin:0 auto;
position: relative;
width: 128px;
height: 31px;
background-color:#999;
}
#content {
margin:0 auto;
position:relative;
width: 792px;
height: 562px;
background-color: #CCCCCC;
}
</style>So ich komme weiter DANK deiner Hilfe !!!
Vielen Dank dafür jetzt bitte nur noch einen heisen Tipp
Wie bekomme ich die #Naviagtion_1 bis Navigation_6 zentriert ?
DANK deiner Hilfe !!!Vielen Dank dafür jetzt bitte nur noch einen heisen Tipp
Wie bekomme ich die #Naviagtion_1 bis Navigation_6 zentriert ?
PHP:
<style type="text/css">
#naviagtion_1 {
float:left;
margin:0 auto;
width: 132px;
height: 31px;
background-color:#999;
}
#naviagtion_2 {
float:left;
width: 132px;
height: 31px;
background-color:#999;
}
#naviagtion_3 {
float:left;
width: 132px;
height: 31px;
background-color:#999;
}
#naviagtion_4 {
float:left;
width: 132px;
height: 31px;
background-color:#999;
}
#naviagtion_5 {
float:left;
width: 132px;
height: 31px;
background-color:#999;
}
#naviagtion_6 {
margin:0 auto;
float:left;
width: 132px;
height: 31px;
background-color:#999;
}
#content {
clear:left;
margin:0 auto;
position:relative;
width: 792px;
height: 562px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<div id="naviagtion_1">Navi1</div>
<div id="naviagtion_2">Navi2</div>
<div id="naviagtion_3">Navi3</div>
<div id="naviagtion_4">Navi4</div>
<div id="naviagtion_5">Navi5</div>
<div id="naviagtion_6">Navi6</div>
<div id="content">Content</div>genauso wie im Fall vorher ^^
