LinkBack URL
About LinkBacks
ZitierenMeinst du den IE 6? Der kann kein min- und max-width.
Im IE 7 sieht's recht ordentlich aus.
Hallo Zusammen,
ich bin neu in diesem Forum und hoffe auf Eure Hilfe!
Ich bin dabei mich richtig in die versch. Layout-Stile einzuarbeiten (fix, fluid, etc. etc.).
Aus einem ganz neuen Buch habe ich eine Vorlage für ein elastisches layout mit fluiden Elementen.
Leider umschließt der Wrapper div nicht den gesamten Inhalt so wie es sein sollte, sondern hängt irgendwo ganz oben im Nirvana ohne überhaput was zu umschließen. Folge: in Firefox wird die Seite richtig dargestellt (mit max-width) im IE erstreckt sich das Layout ins unendliche. Was ist das Problem?
Hier der Code:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="body">
<div id="content"></div>
<div id="sidebar"></div>
</div>
</div>
CSS:
#wrapper {
min-width:800px;
max-width:75em;
padding-left:0;
margin:0 auto;
}
#header,
#body,
#footer {
clear:both;
float:left;
position:relative;
width:100%;
}
#content {
float:left;
width:50%;
}
#sidebar {
float:right;
width:34%;
}
Danke schon mal für Eure Hilfe,
Palou
Meinst du den IE 6? Der kann kein min- und max-width.
Im IE 7 sieht's recht ordentlich aus.
ja ich meine den IE6. Das Problem mit dem Wrapper habe ich inzwischen gelöst. Ich habe einfach overflow:hidden eingefügt.Zitat von sejuma
Das Problem mit der min/max besteht jedoch immer noch.
Ich habe versucht es zu umgehen mit einem JavaScript-Snippet:
#wrapper {
min-width:800px;
max-width:75em;
width: expression(document.body.clientWidth < 799 ? "800px" : document.body.clientWidth > 861 ? "860px : "auto");
}
aber leider dehnt sich das Layout immer noch unkontrolliert aus.
Weiß Du vielleicht Abhilfe?
SOrry . ich meinte natürlich:
width: expression(document.body.clientWidth < 799 ? "800px" : document.body.clientWidth > 76 ? "75em" : "auto");
Moin
Versuch mal diese Version des Scriptes
Ich hoffe du weißt auch warum?
Hallo,
vielen Dank erstmal für den Link. Ich werde ihn gleich ausprobieren
Ja mit dem overflow ist da so eine Sache... Mein Mann hat versucht es mir zu erklären, aber so ganz steige ich da nicht durch. Wieso hat der Wrapper, der ja die ganzen div's umschließt keine Höhe??? Ist doch ewig viel Inhalt drin... Das kapier ich immer noch nicht. Wenn Du's mir verständlicher erklären könntest, wäre ich dankbar
Du musst verstehen was float genau macht. Durch das Floaten nimmst du die Objekte aus dem normalen Fluss heraus. Dadurch befinden sie sich nicht mehr in direkter Relation zu seinem umgebenden Objekt. Also ist demzufolge eben "kein Inhalt" mehr drin, an dem sich das Mutterelement richten kann.
Um das zu erhalten, muss das Float auch wieder gecleart werden. Beim Clearen muss man auch einige Dinge beachten, es gibt viele Wege, aber auch viele Missverständnisse und Fehlerquellen.
Eine Möglichkeit ist es dem Mutterlement ein overflow:auto bzw :hidden mutzugeben. Dadurch cleart er das float nicht wirklich, sondern wird unabhängig zu dem floaten, so groß wie das Kind-Element. Dazu gbt es mittlerweile sehr viel Lesematerial im Internet:
http://onhavinglayout.fwpf-webdesign.de
http://www.sitepoint.com/blogs/2005/...ring-of-floats
http://www.css-technik.de/css-examples/219_9
http://css-tricks.com/the-css-overflow-property
Und, und, und
Vielen Dank. jetzt kann ich es endlich auch besser nachvollziehen. Das hat mir echt weitergeholfen.
Nochmals Danke,
Patricia
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
