Probleme mit divs

html.de-Forum HTML, XHTML & CSS
1

Ich hab hier ein paar kleinere Problemchen mit einer Seite, die auf divs basiert.

Ist es nicht möglich, einem div per css die Höhe 100% zuzuweisen? Ich habe ein zentriertes div als Container, damit die Seite mittig dargestellt wird. Darin sind die weiteren divs eingefügt, allerdings mit position:absolute. Das Problem ist, daß sich die Hintergrundfarbe des Containers nicht über die gesamte Höhe der Seite. Ich bin davon ausgegangen, wenn ich die absoluten divs in den Container einbette, daß der Container auch die Höhe mit übernimmt.

Der Quellcode:

[CODE]

<div id="container" align="center">


    <div id="top">

    </div>



    <div id="inhalt">


        <div id="text1">

        </div>

    
    </div>

    
    
    <div id="navi2">

    </div>
    


    <div id="left">


    </div>



    <div id="right">

    </div>


</div>
[/CODE]Das CSS: [CODE] body{background-color:#004f2f}

#container1{position:relative;
background-color:#black;
background-image:url(‚images/back.jpg‘);
}

#container{position:relative;
width:1020px; height:100%;
background-color:#545454;
background-image:url(‚images/container.jpg‘);
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
}

#inhalt{position:absolute;
left:110px; top:250px;
width:800px; height:1000;
background-color:black;
background-image:url(‚images/main.jpg‘);
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
}

#top{position:absolute;
top:0px; left:110px;
width:800px; height:250px;
background-color:red;
background-image:url(‚images/top.jpg‘);
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
border: none;
overflow:hidden;
}

#left{position:absolute;
top:0px; left:10px;
width:100px; height:250px;
background-color:white;
background-image:url(‚images/left.jpg‘);
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
border: none;
overflow:hidden;}

#right{position:absolute;
top:0px; left:910px;
width:100px; height:250px;
background-color:white;
background-image:url(‚images/right.jpg‘);
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
border: none;
overflow:hidden;}

#navi2{position:absolute;
top:280px; left:120px;
width:150px; height:150px;
background-color:white;
background-image:url(‚images/right.jpg‘);
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
border: none;
overflow:hidden;}

#text1{position:absolute;
top:10px; left:170px;
width:620px; height:500px;
background-color:white;
background-image:url(‚images/right.jpg‘);
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
border: none;
overflow:hidden;}

p{color:#b1b1b1; font-family:Arial; font-size:12px}

a{color:#ffffff; font-family:Arial; font-size:12px, font-weight:bold; text-decoration:underline}
a:hover{color:#ac0004; font-family:Arial; font-size:12px, font-weight:bold; text-decoration:none}

[/CODE]

2

Du machst dir den Aufbau viel komplizierter als er ist.

Zentriere horizontal wie hier beschrieben: Horizontale Zentrierung mit CSS

In diesen zentrierten Container ordne die restlichen Teile ausschließlich per float und margin an.
Damit sich dann die Hintergrundfarbe nach unten fortsetzt, cleare vor dem Schließen des zentrierten Containers.

Verzichte auf alle relativen und absoluten Positionierungen. Die heißen so, weil sie für alle, die sich nicht genau damit auskennen absolut unnötig sind.

100% Höhe kannst du zuweisen. Allerdings musst du dann auch dazu sagen, worauf sich diese 100% beziehen sollen. Soll es die Fenstergröße sein, dann gib auch noch html und body jeweils 100% Höhe.
Beachte jedoch, dass paddings, margins und borders die Gesamthöhe nach dem CSS-Boxmodell vergrößern und du dann ggf. bei über 100% landest.

align:center-Angaben sind veraltet und sollten deshalb nicht mehr verwendet werden.

3

Danke für die schnelle Antwort.

Was soll ich denn unter clearen verstehen? (Sorry für die dumme Frage)

4

Mit „float“ kannst du Elemente nebeneinander anordnen. Sie werden sozusagen „umflossen“.
Um diesen Effekt wieder zu beenden bedarf es eines Elements mit der Eigenschaft „clear“. Dazu verwendet man i.d.R. einen inhaltsleeren Div oder weist diese eigenschaft dem element zu, durch welches der float-Effekt beendet werden soll.
clear: Umfließen von Elementen beenden: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Float: Die Theorie

5

Wunderbar geeignet ist auch der „Clearfix“, der ohne zusätzliches Markup auskommt und lediglich die Zuweisung einer CSS-Klasse beim umgebenden Rahmenelement benötigt.

Suche nach „css clearfix“. Ich nutze derzeit diesen: