nicht angemeldet
Gernot BackHallo Detlef,
..., dass Rahmen von Elternelementen darin floatende Kindelemente nur dann mitumfassen, wenn auch die Elternelemente selbst floaten, ...
<Gebetsmühle>
Floatenden Elemente werden aus dem Elementfluss genommen und haben keinen
Einfluss auf andere Blockelemente (auch umgebende), solange das Float nicht
aufgehoben ist, oder diese Elemente bestimmte Bedingungen (z.B. selbst
floaten) erfüllen.
</Gebetsmühle>
Nun, darüber ob man das zum Grundwissen rechnen sollte, kann man geteilter Meinung sein; insbesondere, was die "bestimmten Bedingungen" angeht.
Wir reden hier ja vom "Containing Block" und wie dessen Rahmen angezeigt wird. Darüber, wie dieser definiert ist, wenn seine Kindelemente floaten, finde ich hier
http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
auf Anhieb nichts, lediglich etwas dazu, wie er sich bei den verschiedenen Werten von position seiner Kindelemente verhält.
Eine weitere "bestimmte Bedingung", unter welcher der Rahmen des Containing-Blocks sich doch auch (in Opera und Firefox) wieder um seine floatenden Kindelemente erstreckt, selbst wenn er selbst nicht floatet, habe ich gerade erst entdeckt:
Wenn man dem Elternelement eine andere overflow-Eigenschaft als visible verpasst, ohne sich zu seiner height auszulassen.
Auch hierzu habe ich keine Spezifikation gefunden:
http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
Gruß Gernot
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bildlistenboxrahmen</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<style type="text/css">
[code lang=css]
* { margin:0;padding:0; }
ul#produktbilder {
width:504px;
list-style-type:none;
overflow:auto;
border:solid 1px red;
}
ul#produktbilder li {
float:left;
border:1px solid #3d3d3d;
margin:0 0 7px 0;
}
ul#produktbilder li img {
width:250px;
height:148px;
display:block;
}
</style>
</head>
<body>
<ul id="produktbilder">
<li>
<img src="http://spaceart.de/_Test/produkte/str006-a.jpg" alt="" />
</li>
<li>
<img src="http://spaceart.de/_Test/produkte/str006-b.jpg" alt="" />
</li>
<li>
<img src="http://spaceart.de/_Test/produkte/str006-c.jpg" alt="" />
</li>
<li>
<img src="http://spaceart.de/_Test/produkte/str006-d.jpg" alt="" />
</li>
<li>
<img src="http://spaceart.de/_Test/produkte/str006-e.jpg" alt="" />
</li>
<li>
<img src="http://spaceart.de/_Test/produkte/str006-f.jpg" alt="" />
</li>
</ul>
</body>
</html>[/code]
Der Martin
Gunnar Bittersmann
MudGuard