nicht angemeldet
Problem bei leeren Divs mit Listen
Hallo,
ich hab ein div "box"
In diesem befinden sich wieder 3 Stk.
- "boxtop"
- "boxcontent"
- "boxfooter"
wenn ich aber in dem boxcontent eine liste platziere, dann macht der einen abstand von "boxtop" zu "boxcontent" und von "boxcontent" zu "boxfooter".
Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.box {
width:200px;
height:auto;
}
.boxtop, .boxbottom {
width:200px;
height:50px;
background-color:red;
}
.boxcontent {
width:200px;
height:auto;
background-color:green;
overflow:visible;
}
.boxcontent ul{
margin:0;
padding:0;
list-style:none;
}
.boxcontent li{
display:block;
width:200px;
background-color:yellow;
padding:10px 0;
margin:10px 0;
}
</style>
</head>
<body>
<div class="box">
<div class="boxtop">Kategorien</div>
<div class="boxcontent">
<ul>
<li>Quads</li>
<li>Crossbikes</li>
<li>Enduros</li>
<li>Buggys</li>
</ul>
</div>
<div class="boxbottom"></div>
</div>
</body>
</html>
-
wenn ich aber in dem boxcontent eine liste platziere, dann macht der einen abstand von "boxtop" zu "boxcontent" und von "boxcontent" zu "boxfooter".
.boxcontent li{
display:block;
width:200px;
background-color:yellow;
padding:10px 0;
margin:10px 0;
}Das margin-Attribut deiner Liste ist der Schuldige. ;)
Dadurch erstellt die Liste einen Abstand von 10px nach oben und unten, also auch zwischen den DIVs.Möglicherweise funktioniert
padding-top:10px;
padding-bottom:10px;
padding-left:0px;
padding-right:0px;in der .boxcontent ul Klasse.
MfG,
Treek
-
Ja warum übernimmt der contentbox den margin. wie kann ich das verhindern ?
-
Ja warum übernimmt der contentbox den margin. wie kann ich das verhindern ?
margin: 0px;
Ich weiß ja nicht, ob die Abstände zwischen den einzelnen Listeneinträgen gewünscht waren, aber die wären dann mitsamt den Abständen oben und unten weg.
MfG,
McKentire
-
Yerf!
Ja warum übernimmt der contentbox den margin.
Stichwort: collapsing margins (Der größte marging gewinnt und wird dem aüßersten Element zugewiesen)
wie kann ich das verhindern ?
Ein (unsichtbarer) Rahmen um die Liste oder Padding verwenden.
Gruß,
Harlequin
-
-
-
Hi Stefan,
wenn ich aber in dem boxcontent eine liste platziere, dann macht der einen abstand von "boxtop" zu "boxcontent" und von "boxcontent" zu "boxfooter".
Zunächst mal verteilst du ein paar unnötige Angaben:
height: auto;
overflow: visible;Die Abstände entstehen aber durch deine margin Angabe für die <li>s (display: block; hier übrigens auch überflüssig).
Gruß
Antipitch