Hintergrundbild wird nicht angetzeigt

[yoda]

Hallo,

habe folgendes Problem bei folgender Struktur

<div id="content">
        <div id="links">
          <div class="box">
            <h3 class="menue_title">
                Rezepte
              </h3>
            <ul class="menue">
              <li> K&auml;sesahnetorte</li>
              <li> Carrot Cakes</li>
              <li> Donauwelle</li>
            </ul>

</div>
        </div>
        <div id="inhalt">
        <!--Inhaltsseite wird geladen -->
        <?php include('rezepte.php'); ?>
        </div>
      </div>
       <div id="footer"></div>

Hier der relevante CSS Teil

div#header {
 background: url(../images/head.jpg) no-repeat;
 height: 312px;
}

#content {
 background: url(../images/stripe.jpg) repeat-y;
 padding:20px 30px 0 30px ;

}
div#links {
 float: left;
 width:175px;
}

/*Der Inhalt*/
div#inhalt {
 margin-left: 170px;

}
div#footer {
 clear: left;
 background: url(../images/footer.jpg) repeat-x;
 height: 21px;
}

Problem: Wenn im DIV inhalt etwas steht wird der content Hintergrund angezeigt und "aufgespannt", wenn jedoch im im DIV inhalt nichts steht und nur im DIV box etwas steht wird kein Hintergrund von DIV content angezeigt! Warum?

[Antipitch]

Hi yoda,

zunächst:

div#header

ist in deinem HTML code nicht vorhanden (spielt aber hier wohl keine Rolle)

Dann:

Problem: Wenn im DIV inhalt etwas steht wird der content Hintergrund angezeigt und "aufgespannt", wenn jedoch im im DIV inhalt nichts steht und nur im DIV box etwas steht wird kein Hintergrund von DIV content angezeigt! Warum?

Wie weit wird es denn mit Textinhalt aufgespannt? Doch nur so weit,wie der Text es erfordert, oder? "Warum" sollten wir uns also doch eher fragen, wenn es aufgespannt würde, denn es hat keinerlei Breiten- oder Höhenangabe.

Ändern z.B. so:
#inhalt {
min-height: höhedeineshintergrundes px;
height: auto !important;
height:  höhedeineshintergrundes px;
}

Gruß
Antipitch

[yoda]

Hallo Antipitch

danke für deine schnelle Antwort!
Du meintest sicherlich das DIV content in deinem Beispiel? Klappt auch so wie Du es angegeben hast.
important wird dann also nur von den neuen Browserns interpretiert,oder?
Ich bin halt davon ausgegangen, dass die Größe eines DIVs (in diesem Fall DIV mit id=content) abhängig ist vom Inhalt? Hier ist der Inhalt die beiden divs, die floaten. Interessant ist auch, dass wenn gar nichts im div mit id=inhalt steht, dass dann das Menue richtig den content "aufspannt", also der hintergrund sichtbar wird. Steht im div mit id=inhalt jedoch nur eine Zeile so wird nur die eine Zeile mit dem Hintergrund von div "content" hinterlegt. Meine Schlussfogerung:
Bei fliessenden Elementen hat das zu umfliessende Element eine niedrigere Priorität als das Element welches fliesst. Nur wenn im Element welches fliesst nichts steht hat das richtet sich die Größe des Elternelementes nach dem zu umfliessenden Element!
Was denkst Du?

[Antipitch]

Hi yoda,

danke für deine schnelle Antwort!

prego!

Du meintest sicherlich das DIV content in deinem Beispiel? Klappt auch so wie Du es angegeben hast.

Für welches immer du eine Sichtbarkeit des Hintergrundes sicherstellen willst. D.h. #inhalt wird nicht aufgespannt, weil du #content eine Höhe gibst (siehe unten)

important wird dann also nur von den neuen Browserns interpretiert,oder?

Das ist richtig, ebenso aber das height: auto. Feste height dann für IE6. Der FF würde den Inhalt aus Box herauslaufen lassen, sobald der Inhlat die px Angabe überschreitet.

Ich bin halt davon ausgegangen, dass die Größe eines DIVs (in diesem Fall DIV mit id=content) abhängig ist vom Inhalt?

Richtig, solange im CSS nichts anderes angegeben ist.

Hier ist der Inhalt die beiden divs, die floaten. Interessant ist auch, dass wenn gar nichts im div mit id=inhalt steht, dass dann das Menue richtig den content "aufspannt", also der hintergrund sichtbar wird. Steht im div mit id=inhalt jedoch nur eine Zeile so wird nur die eine Zeile mit dem Hintergrund von div "content" hinterlegt.

Teste das mal (z.B. mit untzerschiedlichen Hintergrundfarben für alle drei <div>. Das Aufspannen ohne Inhalt für #inhalt machen nur die IE's (auch der IE7 legt hier die alte (falsche) Verhaltensweise an den Tag. Denn:

Meine Schlussfogerung:
Bei fliessenden Elementen hat das zu umfliessende Element eine niedrigere Priorität als das Element welches fliesst. Nur wenn im Element welches fliesst nichts steht hat das richtet sich die Größe des Elternelementes nach dem zu umfliessenden Element!

ist nicht ganz richtig: float nimmt ein Element aus dem Elementfluss des Dokuments und es stellt für die Ränder, Höhen, Breiten etc eines nicht-floatenden Elements keine "Grenze" mehr da, also auch keinen Inhalt, der ein Elternelement aufspannen sollte. Deshalb ist das Verhalten des FF bei #inhalt ohne Inhalt richtig. Mit "Prioritäten" hat das weniger zu tun. Das Verhalten ändert sich z.B. in dem Moment, wo das nächste Element selbst auch einen float hat, dann stoßen sie quasi aneinander. Außerdem wirst du wahrscheinlich für unterschiedliche Browser verschiedene Verhaltensweisen bei unterschiedlichen Doctype Deklarationen beobachten. D.h. die sollte auch beim Testen immer vorhanden sein. Für einigermaßen konformes XHTML z.B.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Gruß
Antipitch

[Der Martin]

Hallo,

important wird dann also nur von den neuen Browserns interpretiert,oder?

kommt drauf an, wie du "neu" definierst. Der IE5 kennt's jedenfalls auch schon.

Ich bin halt davon ausgegangen, dass die Größe eines DIVs (in diesem Fall DIV mit id=content) abhängig ist vom Inhalt?

Das ist auch richtig (zumindest für die Höhe), solange seine Größe nicht explizit über CSS festgelegt ist. Aber warum schließt du diese Feststellung mit einem Fragezeichen ab?

Hier ist der Inhalt die beiden divs, die floaten.

Genau hier liegt dein Irrtum.
Dadurch, dass die Elemente floaten, zählen sie eben *nicht mehr* zum Inhalt. Die floatenden Elemente bilden sozusagen eine eigene Hierarchie unter sich.
Aber ich gebe zu, floating ist ein relativ kompliziertes Konzept, das viele Fallstricke bereithält. Ich fall da auch noch so manches Mal auf die Nase.

So long,
 Martin

[Gunnar Bittersmann]

Hello out there!

Problem: Wenn im DIV inhalt etwas steht wird der content Hintergrund angezeigt und "aufgespannt", wenn jedoch im im DIV inhalt nichts steht und nur im DIV box etwas steht wird kein Hintergrund von DIV content angezeigt! Warum?

Mit 'div#links {float: left}' nimmst du dieses Element aus dem Fluss; es hat also keinen Einfluss auf die Höhe von DIV content. [http://forum.de.selfhtml.org/archiv/2007/7/t156556/#m1018391]

See ya up the road,
Gunnar