Erklärung: Background Image nicht sichtbar, clear hilft ?

Kiiwii

Hallo Leute,

meine frage ist etwas seltsam weil ich die Lösung im Grunde schon selbst rausgefunden habe. Aber eine wirkliche Erklärung kann ich mir dazu selber nicht geben

Ich habe ein Container-Div worin sich wieder mehrere Divs tummeln. Dem Container-Div habe ich ein Background Image gegeben (980 Pixel Breit, 1PX hoch).

Alle Divs im Container Div, die wiederum Container bilden haben float left.

Ich hatte das Problem, dass sich das Hintergrundbild im Container-Div nicht wiederholte, bzw. gar nicht erschien. Die Lösung ist folgende:

Ich musste ein Div erstellen welches eine Klasse bekam die folgende CSS-Eigenschaften bekam:

.clearer
{
margin:0;
clear:left;
line-height:0;
height:0;
}

Dieses Div hab ich dann vor das schließende Div des Container-Divs gesetzt. Erst jetzt wiederholte sich das Hintergrundbild. Es liegt am clear:left;

Hier ein Auszug aus dem Quelltext:

Code

<body>


<div id="container">


<div id="ban"> 


<div id="logo">[img]xxx.jpg[/img]</div> 

</div>


<div class="clearer"></div>


</div>


</body>

Alles anzeigen

Könnt ihr mir erklären warum das claer:left; einen Einfluss auf die Darstellung des Hintergrundbildes hat? Wozu das clear:left; gut ist weiß ich. Ein Zusammenhang kann ich trotzdem nicht herstellen.

lg, Kiiwii

Dodo

wenn ein Element NUR Kindelemente mit einem float haben und diese werden nicht gecleart, ist die höhe des divs gleich 0 und die Kindelemente schauen raus.

Keine Ahnung wieso, ist aber leider so^^
Also immer brav clearen

sejuma

Code

clear: left;

hätte auch gereicht.
Die Theorie des Floatens und Clearens findest du hier erklärt: http://css-technik.de/css-examples/219_9/

Kiiwii

Wow geht das fix hier

Also bedeutet das, dass mein Container-Div für die Browser Höher 0 hatte, obwohl er ja von den Divs die drin sind verlängert wurde?

Das bedeutet wiederum, dass das Hintergrundbild angezeigt worden wäre, wenn ich eine fixe Höhe vergeben hätte?

lg, Kiiwii

edit_ Danke für den Link sejuma

Dodo

nein hätte es nicht.
da zu jedem float ein clear fest dazugehört, da es sonst schlichtweg falsch ist

lies den link von sejuma

sejuma

So isses.
Merke deshalb folgenden Spruch: "Wer floatet, muss auch clearen"
Wenn der Background nicht "mitwächst" liegt es meist an einem fehlenden Clear-Befehl.
In diesem Beispiel kommt das auch entscheidend auf's clearen an.

sejuma

Dodo
Es ist m.E. nicht unbedingt falsch, wenn man nicht cleared. jedenfalls ist es von der Validität her nicht zwingend erforderlich.
Nur sind die Ergebnisse u.U. anders.
Wenn du z.B. keinen Hintergrund hast, dann musst du auch nicht zwingend clearen.
Allerdings bedeutet clearen auch, dass das nächste Element nach dem Clear dann wieder "normal" und ohne Rücksicht auf den vorhergehenden Float wieder angeordnet wird.

Kiiwii

Danke Leuts!

Erklärung: Background Image nicht sichtbar, clear hilft ?

Tags

Benutzer online in diesem Thema