nicht angemeldet
Probleme mit CSS-Layern
Hallo allerseits,
ich möchte eine Homepage nicht mehr mit einem Tabellen-Layout, sondern mit CSS-Layern aufbauen. Der Aufbau ist eigentlich ganz simpel: Links ein 172px breiter Rahmen für die Navigation, dieser soll immer so hoch wie das aufgezogene Fenster sein. Am oberen Bildschirmrand eine Kopfzeile. Diese beginnt neben dem Layer mit der Navigation und reicht immer bis zum rechten Seitenrand.
So sieht die CSS-Definition aus:
div.navigator {
position:relative;
top:0px;
left:0px;
width:172px;
height:100%;
border:#660099 dashed 1px;
background-color:#e2e2e2;
padding:5px;
}
div.header {
position:absolute;
top:8px;
left:190px;
height:50px;
padding:3px;
background-color:#e2e2e2;
border:#660099 dashed 1px;
}
Und so die HTML-Datei:
<div align="center" class="navigator">
...ein paar links...
</div>
<div class="header">
<div style="width:100%"></div>
</div>
Soweit so gut, es gibt da aber ein paar Probleme:
Der Navigationslayer klappt im IE6, bei Mozilla & Co. ist er aber nur so hoch wie für den Inhalt gebraucht wird.
Wie bringe ich den Layer für die Kopfzeile dazu, bis zum rechten Bildschirmrand zu gehen, unabhängig vom Inhalt? Ich habe, wie oben ersichtlich, ein weiteres DIV mit 100% eingefügt. Klappt im IE6, aber nicht im Mozilla. Die Angabe für den Kopf-Layer "width:100%;" bezieht sich anscheinend auf die gesamte Fensterbreite, oder?
Wäre schön, wenn jemand mit den Layern helfen könnte, dass diese auf beiden Browsern (IE 5,6 und Mozilla) funktionieren. Notfalls müsste ich vielleicht zwei CSS-Files machen, will aber möglichst auf Tricks mit JS-Browserweichen verzichten.
Vielen Dank
Mario C.
-
Hallo Mario,
Das klingt ganz so, als ob Du noch für 'n Body with und height definieren müsstest.
Zieh Dir mal http://www.styleassistant.de/tips/tip71.htm rein da steht das alles prima erklärt.
Hoffe das wars :-)
Grüße aus Nürnberg, HarryS