nicht angemeldet
3-Spalten-Layout via Float -> Darstellungsproblem
Hallo,
nachdem ich bezüglich CSS-Layouts von mehreren Seiten gehört habe, daß es am besten sei, so etwas auf float-Basis aufzubauen, da man mit dieser flexibler und zuverlässiger arbeiten könne als z.B. durch die ausschließliche Verwendung von absoluter und relativer Positionierung, habe ich mir vorgenommen, auch das "floaten" mal gründlich zu lernen.
Wissensbasis ist das neu erschienene "CSS Mastery"-Buch, das ich als Aufbaukurs zum "Professionelle Websites" von Stefan Münz verwende (=beide Bücher kann ich ohne Schleichwerbung-Hintergedanken weiterempfehlen!)
Zum Projekt:
Ich habe versucht, einen Klassiker zu entwerfen: Oben Header, links Navigation, Inhaltsspalte in der Mitte, rechts auch nochmal eine Spalte für kleine Boxen.
Realisiert habe ich dies mit einem umgebenden div, einem Header-div und darunter 3 spaltengebenden divs (navi: float left; li (=Content): float left; re (=rechte Spalte): float right), in die ich wiederum die einzelnen Boxen relativ eingefügt habe. In den einzelnen content-Boxen soll es auch Grafiken geben, die von Text umflossen werden, also auch nochmal float-Elemente.
Da float-Elemente aus dem Dokumentfluss herausgehoben werden, habe ich abschließend ein nicht sichtbares, semantisch sonst unbedeutendes clear-div gesetzt, damit der äußere Rahmen auch die ganzen Inhalte aufnimmt, was er sonst nicht tut (= Tipp aus "CSS Mastery"). Zur Veranschaulichung habe ich den Rand sichtbar gemacht.
Zum Problem (Quellcode weiter unten!):
Aufgrund der verschiedenen Auslegung des Boxenmodells habe ich auf padding verzichtet, wodurch bei Box plus margin ja eigentlich in jedem Browser die gleiche Breite erscheinen sollte.
Um das Layout flexibel zu halten, habe ich mit Prozentwerten gearbeitet.
Arbeite ich jedoch (m.W.) mathematisch korrekt, zeigt nur der Firefox das Ergebnis korrekt an:
navi: 18,5% Breite plus 2x 0.5% margin (links/rechts) = 19.5 % Breite
re: 18,5% Breite plus 2x 0.5% margin (links/rechts) = 19.5 % Breite
li (Content): 61% Breite, kein margin, da schon gegeben durch navi/re
-> der IE bricht in allen Versionen seit 5.0 die rechte Spalte um. Für eine optimale Darstellung müßte ich den Content auf 60% setzen
-> der Opera wiederum zeigt das Ergebnis erst bei 62% Content-Breite korrekt an
Ich komme an dem Punkt einfach nicht weiter. Nehme ich im li-div die Breite ganz raus, geht das div plötzlich bis ganz zum Außenrand, anstatt beim rechts gefloateten re-div zu stoppen. Eine Vermutung war es auch, daß die 1px-Ränder Schuld seien und je nach Browser in die Breitenberechnung als Zusatzwerte einkalkuliert werden. Blende ich sie aus, ist das Problem trotzdem da.
Daher verstehe ich nur noch Bahnhof:
Wieso braucht der IE 60% und der Opera 62%, wenn von der Berechnung her 61% richtig wären? Wie überbrückt man derlei Toleranzen und wo liegt der (Berechnungs-?)Grund?
Wenn ich float:right einsetze, gehe ich doch davon aus, daß das div am umgebenden Blockelement (=hier: float-div) am rechten Rand ausgerichtet wird. Tatsächlich klebt es rechts am Content-div - wieso?
Wie gehe ich am besten damit um, wenn ich in den Content-Boxen einen Innenabstand haben möchte? Wegen des Boxmodell-Bugs soll man padding ja nicht verwenden. Schachtel ich ein weiteres div rein mit margin?
Es würde mich riesig freuen, wenn mir hier jemand mit mehr Praxiserfahrung im "floaten" helfen könnte.
Viele Grüße,
Stefan
PS: Der Quellcode, um den es geht (=ich habe die Blindtexte mal drin gelassen, um verschiedene Boxhöhen zu erreichen, ohne fixe Höhen setzen zu müssen):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS-Test</title>
<style type="text/css">
<!--
body {margin:0px;padding:0px;height:100%;background-color:#CCFFFF}
div {font-family:arial,helvetica,sans-serif;font-size:10pt;}
#floatbox {width:99%;margin:0px;padding:0px;border:1px solid red;}
#header {margin:0.5%;padding:0px;height:80px;border:1px solid red;background-color:#fff;clear:both}
#navi {width:18.5%;margin:0.5%;padding:0px;height:400px;float:left;background-color:#fff}
#li {width:61%;margin-top:0.5%;padding:0px;float:left;}
#re {width:18.5%;margin:0.5%;padding:0px;float:left;}
#li div {border:1px solid red; margin:0px 0px 5px 0px;background-color:#fff}
#re div {border:1px solid red; margin-bottom:5px;background-color:#fff}
#box_li_1 span {position:relative;display:block}
#box_li_1 img {float:left;height:50px;width:50px;left:5px;top:5px;position:relative;margin-right:10px}
.clear {clear:both;border:0px;height:0px;width:0px;}
-->
</style>
</head>
<body>
<div id="floatbox">
<div id="header">Header</div>
<div id="navi">Navi</div>
<div id="li">
<div id="box_li_1"><img src="" alt="Bild"><span>lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</span></div>
<div id="box_li_2">lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. lorem ipsum, quia dolor sit, amet...</div>
<div id="box_li_3">lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. lorem ipsum, quia dolor sit, amet...lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. lorem ipsum, quia dolor sit, amet...lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. lorem ipsum, quia dolor sit, amet...lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. lorem ipsum, quia dolor sit, amet</div>
</div>
<div id="re">
<div id="box_re_1">lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. lorem ipsum, quia dolor sit, amet</div>
<div id="box_re_2">lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. </div>
<div id="box_re_3">lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. </div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
-
kleine Ergänzung:
#re {width:18.5%;margin:0.5%;padding:0px;float:left;}
-> da hatte ich urspr. float:right drin, wodurch sich die eine Frage selbst erledigt hat:
"Wenn ich float:right einsetze, gehe ich doch davon aus, daß das div am umgebenden Blockelement (=hier: float-div) am rechten Rand ausgerichtet wird. Tatsächlich klebt es rechts am Content-div - wieso?"
-> mit float:right richtet es sich auch rechts aus...
und noch ein Mini-Bug (ohne Auswirkung): das "clear:both" im header ist auch überflüssig.
Sorry ;-)
Das Hauptproblem bleibt jedoch weiterhin bestehen.
-
Hi,
Arbeite ich jedoch (m.W.) mathematisch korrekt, zeigt nur der Firefox das Ergebnis korrekt an:
navi: 18,5% Breite plus 2x 0.5% margin (links/rechts) = 19.5 % Breite
re: 18,5% Breite plus 2x 0.5% margin (links/rechts) = 19.5 % Breite
li (Content): 61% Breite, kein margin, da schon gegeben durch navi/reDas Problem dürften unterschiedliche Rundungen sein. Zu lösen ist das ganz einfach, indem Du dem Inhaltsbereich keine Breite zuweist, dafür aber margins. Bei den floatenden Boxen verzichtest Du dann auf margins.
Hättest Du aber auch in http://de.selfhtml.org/css/layouts/anzeige/3spaltig.htm ff nachlesen können.Wie gehe ich am besten damit um, wenn ich in den Content-Boxen einen Innenabstand haben möchte? Wegen des Boxmodell-Bugs soll man padding ja nicht verwenden. Schachtel ich ein weiteres div rein mit margin?
entweder das (wobei dieses dann auch gerne padding haben darf, da es ja keine breite benötigt), ober Du schreibst für standardkonforme Browser und verwendest für den IE<6 CSS-Hacks. Ich würde mich für letzteres entscheiden zugunsten sauberen HTML-Markups.
freundliche Grüße
Ingo-
Hallo Ingo,
danke für die hilfreichen Tipps.
"Hättest Du aber auch in http://de.selfhtml.org/css/layouts/anzeige/3spaltig.htm ff nachlesen können."
Manchmal findet man den Wald vor lauter Bäumen nicht ;-)
Ich habe bei SelfHTML unter "float" geschaut sowie bei http://edition-w3c.de/TR/1998/REC-CSS2-19980512/, aber da standen nur die Basics. Recherche ging somit schon voraus, nur wie gesagt: Den obigen Link hab ich nicht gefunden.
Danke für den Link, ich werde es mal dementsprechend probieren/umbauen/etc.
Viele Grüße,
Stefan
-