Zur Navigation

XHTML+CSS(<div>-container nebeneinander + zentriert)

1 NeoMiC (Gast)

schönen guten abend,

ich hab hier ein problem was mich schon seit einer woche beschäftigt:

ich möchte 2 div container nebeneinander platzieren und alles zentrieren

so schauts in der html file aus:

<div ID="top">
<img ALT="" SRC="images\background\top.jpg" ID="background_top">
<img ALT="" SRC="images\background\middle.jpg" ID="background_middle">
<img ALT="" SRC="images\background\bottom.jpg" ID="background_bottom">
</div>
<div ID="bottom" ALIGN="center">
<div ID="navigation">
<img ALT="" SRC="images\navigation\top.jpg" ID="navigation_top">
<img ALT="" SRC="images\navigation\middle.jpg" ID="navigation_middle">
<img ALT="" SRC="images\navigation\bottom.jpg" ID="navigation_bottom">
</div>
<div ID="mainframe">
<img ALT="" SRC="images\mainframe\top.jpg" ID="mainframe_top">
<img ALT="" SRC="images\mainframe\middle.jpg" ID="mainframe_middle">
<img ALT="" SRC="images\mainframe\bottom.jpg" ID="mainframe_bottom">
</div>
</div>

und so in der css datei...

body
{
line-height:19px;
}
#top
{
position:static;
z-index:1;
}
#bottom
{
width:772
z-index:2;
}
#navigation
{
float:left;
width:200
text-align:left;
z-index:2;
}
#mainframe
{
float:right;
width:558;
text-align:left;
z-index:auto;
}
#background_top
{
position:static;
top:0px;
height:121px;
width:772px;
z-index:auto;
}
#background_middle
{
position:relative;
top:-4px;
height:480px;
width:772px;
z-index:auto;
}
#background_bottom
{
position:relative;
top:-13px;
height:10px;
width:772px;
z-index:auto;
}
#navigation_top
{
position:static;
top:0px;
height:13px;
width:200px;
z-index:auto;
}
#navigation_middle
{
position:relative;
top:-4px;
height:300px;
width:200px;
z-index:auto;
}
#navigation_bottom
{
position:relative;
top:-10px;
height:13px;
width:200px;
z-index:auto;
}
#mainframe_top
{
position:static;
top:0px;
height:13px;
width:400px;
z-index:auto;
}
#mainframe_middle
{
position:relative;
top:-4px;
height:300px;
width:400px;
z-index:auto;
}
#mainframe_bottom
{
position:relative;
top:-10px;
height:13px;
width:400px;
z-index:auto;
}

Sry für dieses FLOODING...

hoffe mir kann jemand helfen...
danke im vorraus!

27.10.2005 19:53

2 Jörg

Hallo NeoMiC,

zentrieren kannst du alles, indem du alle divs in ein äußeres div packst, und für dieses eine feste Breite und den Außenabstand (margin) auf den Wert auto festlegst. Für den unverständigen Internet Explorer 5 (und je nach Doctype auch 6) muss als Workaround ein text-align:center für den body gesetzt werden, welches mit einem text-align:left im äußeren div wieder aufgehoben wird. Beispiel:


<div id="aussen">
<div ID="top">
<img ALT="" SRC="images\background\top.jpg" ID="background_top">

<!-- etc. -->

<img ALT="" SRC="images\mainframe\bottom.jpg" ID="mainframe_bottom">
</div>
</div>
</div>


body {
line-height:19px;
text-align:center;
}

#aussen {
width:800px;
margin:auto;
text-align:left;
}

Die Breitenangabe für #aussen muss dabei so hoch gewählt werden, dass die beiden unteren divs auch nebeneinander passen

mfG Jörg

27.10.2005 22:40 | geändert: 27.10.2005 22:42

3 NeoMiC (Gast)

huhu....

yeeaah es klappt^^

thx@ Jörg

28.10.2005 14:09

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]