Div nimmt nicht Hintergrundfarbe an Oo

Asterixus · 14 Juni 2008

Hallo,

ich habe ein Problem was meiner Meinung nach sowohl HTML als auch CSS angeht:
Document sans nom

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.container {
    background-color:#00CC00;
    margin: 0px auto;
    width: 750px;
}

.content {
    float:left;
    width:500px;
}
.menue {
    background-color:#FF0000;
    float:left;
    width:250px;
}
-->
</style>
</head>

<body>
<div class="container">
  <div class="menue">
    <p>Menü</p>
    <p>&nbsp;</p>
    <p>Link </p>
    <p>Link </p>
    <p>Link </p>
    <p>Link</p>
  </div>
  <div class="content">
    <h1>Inhalt</h1>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
  </div>
</div>
</body>
</html>

Ich weiß, dass ich noch nicht den Margin vom p auf 0px gesetzt habe, aber das ist nicht meine Frage. Meine Frage ist, wie ich es machen kann (sowohl von Seiten von HTML als auch von CSS), dass der div 'container' die gewünschte grüne Farbe, wie im IE annimmt im FF und Opera und Safari.

lG,
Asterixus

csstester · 14 Juni 2008

hä hä, haste doch schon gemacht.. nur leider hat dein .container keine höhe, also kannst ihn nicht sehen;)

neuroleptika · 14 Juni 2008

<div class="container"> hat keine Höhe.
Er enthält nur Elemente, denen float zugewiesen wurde.
Gefloatete Elemente vergrößern das Elternelement nicht. Du musst den float mit clear abbrechen damit <div class="container"> auseinandergedrückt wird.
Z.B. so:

Code:

<div class="container">
  <div class="menue">
    <p>Menü</p>
    <p>&nbsp;</p>
    <p>Link </p>
    <p>Link </p>
    <p>Link </p>
    <p>Link</p>
  </div>
  <div class="content">
    <h1>Inhalt</h1>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
  </div>
<br style="clear:both;"/>
</div>

<div class="menue"> sieht wie eine Auflistung aus.
Das solltest du besser als Liste auszeichnen.
Beispiel:

Code:

  <ul class="menue">
    <li><strong>Menü</strong></li>
    <li>Link </li>
    <li>Link </li>
  </ul>

Asterixus · 14 Juni 2008

neuroleptika schrieb:
<div class="container"> hat keine Höhe.
Er enthält nur Elemente, denen float zugewiesen wurde.
Gefloatete Elemente vergrößern das Elternelement nicht. Du musst den float mit clear abbrechen damit <div class="container"> auseinandergedrückt wird.
Z.B. so:

Code:

<div class="container"> <div class="menue"> <p>Menü</p> <p> </p> <p>Link </p> <p>Link </p> <p>Link </p> <p>Link</p> </div> <div class="content"> <h1>Inhalt</h1> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> </div> <br style="clear:both;"/> </div>

Danke für die schnelle Hilfe an euch beide :)
Es funktioniert

Div nimmt nicht Hintergrundfarbe an Oo

Asterixus

Aktives Mitglied

csstester

Mitglied

neuroleptika

Aktives Mitglied

Asterixus

Aktives Mitglied

Neueste Beiträge