4haus-tips
4haus-tips
Body bekommt den Hintergrund der Navigation. Die Navigation bekommt eine Breite in ex, cont diesen Abstand nach links.
IE läßt immer einen Spalt - aber das ignoriere ich einfach.
html, body {margin:0; padding:0; height:100%}
body {background:url("flowers.jpg") top left fixed #1F5F13;}
#nav {width:20ex; float:left;}
#cont {margin-left:20ex; background: #FEFEFE;
min-height:100%}
Die Mindest-Höhe für #cont muß mit 100% angegeben werden. IE versteht das nun nicht, der bekommt deshalb mit conditional comments eine Höhe von 100% vorgesetzt. Deshalb wird dann aber nichts abgeschnitten, weil für IE height==min-height ist.
<!--[if IE ]>
<style type="text/css">
#cont {height:100%;}
</style>
<![endif]-->
Im FF gibt es einen verticalen scollbalken, aber damit kann man leben, denk ich.
Der Kopfbereich ist absolut positioniert; in #nav und #cont deshalb margin-top entsprechend setzen.
#head {position:absolute; top:0; left:0;
height:60px; width:100%;}
#nav ul {margin:90px 0 0 0;}
h1 {margin-top:80px;}
Bei den Anhaben für Höhe vom Kopfbereich und margin-top für darunter beachten, daß IE eine andere Vorstellung von height (und auch von width) hat als der Rest der Welt. Damit es nicht zu einfach wird, haben IE 5.5 und IE6 ebenfalls unterschiedliche Meinungen.
<!--[if IE ]>
<style type="text/css">
#head {height:80px;}
</style>
<![endif]-->
IE6 im Standardmodus macht zwar manches richtiger, dafür beißt man dann an anderen Stellen wieder in die Tischkante.
Meine Lösung, die den Streß minimiert: IE in den Quirks-Modus versetzen. Dazu an den allerersten Anfang, noch vor die DOCTYPE-Deklaration, einen leeren Kommentar setzen. Hilft im Übrigen ziemlich oft.
Seite mit langen Inhalt
Seite mit langer Navigation
Kurze Seite