Hintergrund bei verschachtelten Divs

Wenn ein Div-Container im Seitenlayout keinen „direkten“ Inhalt, sondern nur weitere Div-Cotainer beinhaltet, wird von den meisten Browsern der Hintergrund des äußeren Containers nicht fortgeführt.
Anscheinend werden die inneren Container im Gegensatz zu Text, Absätzen oder Zeilenumbrüchen nicht als „vollwertige“ Inhalte vom Browser anerkannt.
Setzt man nun vor dem schließenden Tag des äußeren Div-Containers ein

<br style="clear:both;" />
<p style="clear:both;"></p>

wird der Hintergrund korrekt angezeigt. Wenn die zusätzliche Höhe stört, kann man im style-Element, oder einer entsprechenden CSS-Klasse auch eine Höhe von 0px angeben.
Es sollten auf jeden Fall sowohl ein Absatz, als auch ein Zeilenumbruch angegeben werden, da einige Browser nicht auf den Umbruch, andere hingegen nicht auf den Absatz zu reagieren scheinen.


Ähnliche Artikel

Kommentare

  1. Mathias schrieb am 28.02.06:1

    Ich dache, die divs brauchen immer sowas wie eine Höhen- oder Breitenangabe… Steht das zufälligerweise in deinem schlauen und neu gewonnenen Buch?

  2. Julia schrieb am 28.02.06:2

    So schnell ist die Post leider nicht—das Buch wird wohl in den nächsten Tagen eintreffen.
    Divs brauchen nicht zwingend Höhe und Breite. Es sind ganz einfache Block-Elemente, die mitwachsen, wenn man sie nicht in Höhe/Breite einschränkt.

  3. Mathias schrieb am 28.02.06:3

    ...was nicht immer zu funktionieren scheint. Sobald ein Element “gefloatet” wird, welches sich innerhalb eines divs befindet, hat dieses div die Höhe eben dieses “gefloateten” Objekts weniger, komisch nicht? Ich weiss nicht, ob das generell gilt, das ist einfach so meine Erfahrung.

  4. Julia schrieb am 28.02.06:4

    Diese Art von Darstellungsproblemen tauchen leider immer wieder in einigen Browsern auf, können aber meist durch das Anfügen von einfachen Elementen (siehe oben) behoben werden.
    Das Problem bei Webseiten ist sind nun mal leider die diversen Browser, die je nach Belieben (so scheint es) ihr eigenes Süppchen kochen.
    Ich hoffe, dass sich nach und nach immer mehr Browser nach den W3C­Standards richten und versuchen werden, zumindest CSS2 korrekt darzustellen.

    Allerdings sehe ich der Weiterentwicklung in diesem Bereich mit gemischten Gefühlen entgegen. Was ist, wenn dann plötzlich die neuere Version eines Browsers, für den wir extra einen Hack/Browserweiche einbauen mussten, auf einmal alles korrekt darstellt, aber das Stylesheet des alten Browsers geliefert bekommt?
    Dann kriege ich wahrscheinlich noch Albträume, in denen mich Horden von Stylesheets jagen ;)

  5. Mathias schrieb am 28.02.06:5

    So schön. Du schreibst „Albträume“ noch mit b.

    [... ] Ich hoffe, dass sich nach und nach immer mehr Browser nach den W3C­Standards richten [...]

    Das wäre das Ende aller Webdesigner, aber viel bequemer…

  6. Julia schrieb am 1.03.06:6

    „Albträume“ werden bei mir immer „Albträume“ bleiben, man träumt ja schließlich nicht von irgendwelchen Landschaften…

    Das wäre das Ende aller Webdesigner, aber viel bequemer…

    Der „Webdesigner“ an sich wird wohl über kurz oder lang ohnehin aussterben. Die Nachfrage tendiert immer mehr zu dynamischen Seiten. Webdesigner, die nicht zumindest Grundkenntnisse in PHP, Java und Co haben, werden immer weniger gesucht.

  7. Mathias schrieb am 2.03.06:7

    Wenn du in Alpträumen von Landschaften träumen würdest, träumst du dann in Albträumen von Elfen? ;-)

    Hmm… A propos (so von wegen vom Thema abkommen)

    Hast du auch eine Lösung parat wenn Float-Elemente innerhalb von DIVS ohne „Inhalt“ rumgeistern, das äussere DIV aber seine Höhe irgendwie gänzlich verloren hat? Das ist sowas von ärgerlich… Überhaupt scheint die Float-Funktion ein bisschen zu „holpern“.

  8. Julia schrieb am 2.03.06:8

    Genau, aber nur von Dunkelelfen, die nicht „Drizzt do’Urden“ heißen ;)

    Zu deiner Frage kann ich leider ohne Quelltext und das dazugehörige CSS nicht viel sagen. Wenn du magst, kannst du mir die Sachen ja schicken – dann schau ich mal, ob ich was finde.

  9. Mathias schrieb am 2.03.06:9

    Ok werd ich…

    Merci

  10. sebi schrieb am 27.08.06:10

    Vielen Dank für den hilfreichen Tip!


Dein Kommentar:

Sämtliche Html-Tags werden gelöscht, der Kommentar kann mit Textile formatiert werden.
Vor dem Absenden müsst ihr euch einmal die Vorschau ansehen.