Unter-Navigationspunkt sprengt umgebenden div-container

hedoo · 25.07.2013

Hallo an alle,
stehe gerade mächtig auf dem Schlauch:
Habe eine Navigation in einem div-container untergebracht. Füge ich der Navigation eine Unterebene hinzu, liegt diese außerhalb des umgebenden divs.
CSS-Code:

Code:

#navigation{ /*Navigation*/
  padding: 0 0 15px 0;
  border-bottom: 1px solid #000;
}

#navigation ul{
  margin: 0 10px 0 10px;
  padding: 0;
  list-style: none;
}
#navigation ul li{
  height: 35px;
  line-height: 35px;
  margin: 0;
  padding: 0;
}

#navigation ul li ul li{  /* Unternavigationspunkte*/
   margin: 0 0 0 10px;
   border-bottom: 1px solid #835f5e; 
 }

#adresse{
 padding: 10px 0 0 10px;
}

Der dazugehörige HTML-Code:

HTML:

<!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>
  <title>Problem</title>
  <link type="text/css" rel="stylesheet" media="all" href="css/template.css" />
</head>

<body>
  <div id="navigation">
      <ul><li><a href="#">Kontakt</a></li><li><a href="#">Impressum</a><ul><li><a href="#">Test</a></li></ul></li></ul>
  </div>
  <div id="adresse">
       <p >Text</p>
   </div>
</body>
</html>

Sobald ein Unter-Menüpunkt hinzugefügt wird, leigt der schwarze Rahmen (border-bottom) nicht mehr unter, sondern hinter der Navigation. Der div #navigation wächst also nicht mit.
Hat jemand eine Idee, wo ein Denkfehler liegt?
Vielen Dank
hedoo

Aelfry · 25.07.2013

AW: Unter-Navigationspunkt sprengt umgebenden div-container

hedoo schrieb:
Der div #navigation wächst also nicht mit.

wie soll er auch, du hast ja schließlich eine feste Höhe zugewiesen

#navigation ul li{
height: 35px;
line-height: 35px;
margin: 0;
padding: 0;
}

Nimm die Zeile raus (oder ändere das Attribut in min-height) und die Größe passt.

hedoo · 25.07.2013

AW: Unter-Navigationspunkt sprengt umgebenden div-container

Danke,
das wars. Wobei ich allerdings davon ausgegangen bin, dass sich die height-Angabe nur auf den Listenpunkt bezieht und keinen Einfluss auf den umgebenden div hat.
Wieder was dazugelernt.
Viele Grüße
hedoo

Myhar · 25.07.2013

AW: Unter-Navigationspunkt sprengt umgebenden div-container

Es hat auch nur einen Einfluss auf den Listenpunkt. Deine Unternavigation befindet sich allerdings in einem Listenpunkt. Das umgebende div spielt hier keine Rolle.
Übrigens, auch wenn das nur eine Testseite ist: Du musst nicht jedes Element in ein div packen, Paragraphen zB sind von Haus aus schon Blockelemente, da muss ein zusätzliches div rundherum nicht sein.