Float wird nicht gecleart
0 0 
molily
Float wird nicht gecleart
Mahlzeit,
ich habe bei einem Projekt zwei Probleme.
1. Die Seite soll oben und links einen von einem rosa Balken eingerahmt werden. Gelöst habe ich den linken Balken über einen permanent mitscrollenden Bereich, der im Hintergrund stehen sollte. Leider zeigt der Internet Explorer den eigentlichen Inhalt nicht an.
2. Für eine Bildergalerie habe ich einen Bereich, in dem bis zu fünf Thumbnails untereinander stehen und einen Bereich daneben für das vergrößerte Bild. Leider ragen die Thumbnails aus dem Container heraus, obwohl ich mit clear:both das eigentlich zu verhindern suche.
Untenstehend das HTML und das CSS. Beides ist inkl. Beispielbildern auch unter http://sopos.org/olli/abba/index.html zu finden.
Hier ist die HTML-Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>foobar</title>
<link rel="stylesheet" type="text/css" href="foo/screen00.css" media="screen">
<meta http-equiv="Content-Type" content="text/html;charset=windows-1252">
</head>
<body>
<div id="rand"> </div>
<div id="container">
<table class="content">
<tr>
<td>
<hr>
<h1>Blablubb</h1>
</td>
</tr>
</table>
<table class="content">
<tr>
<td>
<div class="imgcontent">
<div class="bigimage""><img src="foo/T0000000.jpg" title="" alt="" id="big29"></div>
<div class="thumbscont">
<div class="thumb1"><img src="foo/T0000001.jpg" title="" alt=""></div>
<div class="thumb2"><img src="foo/T0000002.jpg" title="" alt=""></div>
<div class="thumb3"><img src="foo/T0000003.jpg" title="" alt=""></div>
<div class="thumb4"><img src="foo/T0000004.jpg" title="" alt=""></div>
<div class="thumb5"><img src="foo/T0000005.jpg" title="" alt=""></div>
</div>
<div style="clear:both;"> </div>
</div>
</td>
</tr>
</table>
<table class="content">
<tr>
<td>
<hr>
<h1>Blubber</h1>
</td>
</tr>
</table>
<table class="content">
<tr>
<td>
<div class="imgcontent">
<div class="bigimage""><img src="foo/LR_Rose_.jpg" title="" alt="" id="big31"></div>
<div class="thumbscont">
<div class="thumb1"><img src="foo/LR_Rose0.jpg" title="" alt=""></div>
<div class="thumb2"><img src="foo/LR_Taube.jpg" title="" alt=""></div>
<div class="thumb3"><img src="foo/LR_Meer_.jpg" title="" alt=""></div>
<div class="thumb4"><img src="foo/LR_Eule_.jpg" title="" alt=""></div>
<div class="thumb5"><img src="foo/LR_seero.jpg" title="" alt=""></div>
</div>
<div style="clear:both;"> </div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Hier das zugehörige CSS:
/* Allgemein */
body { background-color:#ffffff;
font-size:10pt;
font-family:arial, helvetica, sans-serif, sans;
font-weight:normal;
font-style:normal;
border-top: solid 15px #ff86f5;
border-left: solid 15px #ff86f5;
padding-left:60px;
min-height:100%;
max-height:10000%;
max-width: 100%;
padding-top:30px;
margin:0pt;
}
div#rand {
margin:0px 0px 0px -75px;
border-left: solid 15px #ff86f5;
height:100%;
width: 15px;
position:fixed;
z-index:-1;
}
div#container {
position:relative;
z-index:1;
}
/* Bilder */
img { border:0px; }
div.bigimage {
float:right;
position:relative;
left:136px;
width:868px;
text-align:left;
vertical-align:top;
}
div.thumbscont {
position:absolute;
}
div.thumb1,
div.thumb2,
div.thumb3,
div.thumb4,
div.thumb5 {
width:128px;
height:100%;
border: 1px solid black;
margin-bottom:8px;
}
div.imgcontent {
margin-bottom:32px;
}
/* Tabellen */
table.content { margin: 20px;
max-width: 1280px;
border: 0px;
}
.content {
max-width: 1280px;
font-size:10pt;
}
Servus,
Abba
-
Zu 1.: Der MSIE kennt position:fixed leider nicht. Erstelle ein entsprechendes alternatives CSS für den IE mit position:absolute.
Zu 2.: verwende overflow:hidden auf den container statt dem div mit clear:both.
Gruß, LX
--
RFC 1925, Satz 6: Es ist einfacher, ein Problem zu verschieben (...), als es zu lösen.-
Hallo LX,
Zu 1.: Der MSIE kennt position:fixed leider nicht. Erstelle ein entsprechendes alternatives CSS für den IE mit position:absolute.
Okay, danke. Mal schauen, ob es klappt (hab kein Windows und bin auf Feedback von browsershots.org angewiesen.)
Zu 2.: verwende overflow:hidden auf den container statt dem div mit clear:both.
Dann schneidet er mir aber nur den überstehenden Bereich ab. Ich möchte hingegen, dass der Container mitwächst.
Danke und servus,
Abba
-
-
Hallo,
Du verwendest einen wilden Mix aus float, position:relative/absolute und Tabellenlayout. Bei position:absolute ist es nicht möglich, dass ein Element andere Elemente einzuschließen, es sei denn, das Elternelement bekommt eine fixe Höhe - was die ganze Sache sehr unflexibel macht.
Entscheide dich also für eins, am besten für float. position:relative für Abstände brauchst du dann nicht mehr. Und den rosa Rahmen kannst du, soweit ich das sehe, einfach mit border-left und border-top eines Container-Elements lösen (z.B. body), sodass auch position:fixed wegfällt.
Alles in allem machst du es dir viel zu kompliziert. Ich würde dir raten, mal einen Entwurf nur mit gezielt eingesetzten floats zu machen, auf Tabellen und position zu verzichten (müsste bei diesem Layout gehen). Dann kannst du auch ganz einfach Floats einschließen, was bei position:absolute nicht geht.
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout
Mathias