Anmelden

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS-Problem mit 100%


pazzi
21.01.2007, 11:39
Mein Ausgangspunkt für diese Seitenstruktur ist Folgende: Ich möchte einen Header, der 100% der Browserbreite ausfüllt und eine festgelegte Höhe in Pixeln hat.
Darunter sollen links eine Navigation, mit festgelegter Breite in Pixeln, und der Contentbereich sein. Sowohl Navigation als auch Contentbereich sollen die verbleibende Höhe des Browsers komplett ausfüllen und der Contentbereich soll zusätzlich die komplette, verbleibende Breite ausfüllen.
Bisher hab ich zwei Lösungsmöglichkeiten, allerdings gibt es immer eine Browserpartei, die rumzickt :D
Ich hab hier jetzt nur die Gegenüberstellung von Fx und IE, Opera liefert aber ebenfalls eine Ausgabe, wie der Fx.

Meine erste Möglichkeit:
http://img405.imageshack.us/img405/1732/ver1fx1my.th.gif (http://img405.imageshack.us/my.php?image=ver1fx1my.gif) http://img267.imageshack.us/img267/8965/ver1ie0an.th.gif (http://img267.imageshack.us/my.php?image=ver1ie0an.gif)
Firefox, man beachte die Scrollbalken // IE (so sollte es sein)

Der HTML-Code dazu:

<body>
<div id="header">BOAR!</div>

<div id="sidebar">
<div id="spacer_sidebar"></div>
linkz
</div>

<div id="main">
Inhalt
</div>

</body>

Und der CSS-Code:

body {
background-image:url('img/layout/bg.gif');
color:#000000;
font-size:10pt;
font-family:Tahoma, Arial, sans-serif;

margin:0px;
}

#main {
background-color:#FFEAED;
width:100%;
padding-top:120px;
padding-left:150px;
height:100%;
}

#sidebar {
background-color:#FF0000;
position:absolute;
float:left;
top:0px;
left:0px;
width:150px;
height:100%;
z-index:2;
}

#spacer_sidebar { height:120px; }

#header {
background-color:#00FF00;
position:absolute;
top:0px;
left:0px;
width:100%;
height:120px;
z-index:3;
}

Die zweite Variante sieht in den Browsern so aus:
http://img405.imageshack.us/img405/7590/ver2fx8qj.th.gif (http://img405.imageshack.us/my.php?image=ver2fx8qj.gif) http://img405.imageshack.us/img405/8406/ver2ie7jx.th.gif (http://img405.imageshack.us/my.php?image=ver2ie7jx.gif)
Firefox (so sollte es sein) // IE, hier wird der Header gekürzt

HTML:

<body>

<div id="header">BOAR!</div>

<div id="sidebar">
<div id="spacer_sidebar"></div>
linkz
</div>

Inhalt

</body>

CSS:

body {
background-image:url('img/layout/bg.gif');
color:#000000;
font-size:10pt;
font-family:Tahoma, Arial, sans-serif;
padding-top:120px;
padding-left:150px;
margin:0px;
}

#sidebar {
background-color:#FF0000;
position:absolute;
float:left;
top:0px;
left:0px;
width:150px;
height:100%;
z-index:2;
}

#spacer_sidebar { height:120px; }

#header {
background-color:#00FF00;
position:absolute;
top:0px;
left:0px;
width:100%;
height:120px;
z-index:3;
}
mitaki
21.01.2007, 19:52
Warum ist jeder so scharf auf das Ausfüllen des Browserfensters? Ich sehe darin keinen Mehrwert, die Scrollbalken kommen ja doch und würden durch dieses Gestaltungselement nur noch notwendiger.
Eine saubere Methode gibt es dafür leider noch nicht.

Eine Möglichkeit wäre box-sizing zu verwenden, damit brauchst du aber verschiedene Angaben für Firefox und Opera und musst außerdem den IE in den Quirksmodus versetzen.
Du würdest dann browserweit mit dem Box-Model-Bug arbeiten, wodurch du z.B. sagen kannst Element 100% hoch, davon sind aber x Pixel padding oder border (wenn ich es richtig in Erinnerung habe).

Notwendig ist aber auch hier, dass html und body width und height 100% erhalten.

Mehr fällt mir dazu gerade nicht ein, da ich diese Art der gestaltung nicht gerne mag.

Nur ein Anmerkung zum Schluss, wenn du mit CSS arbeitest solltest du die Browser immer in den standardkonformen Modus versetzen, weil die Ausgaben sonst zu unvorhersehbar sind.
Ich sage das, weil aus deinem Code nicht ersichtlich ist, welcher Modus bei dir verwendet wird.