CSS zum Wahnsinnig werden.

**Lucleonhart** · 29.11.2006 09:58

Hoi friends!

Ich hab ein style problem mit CSS, und ich werd bald irre.
Ich möchte ein 3-zeilen layout:
------
KOPF = 80px height
------
CONTENT = REST
------
FOOTER = 300px height
------

Alles = 100% der seite.
Frage: WIE?! *g* Es funzt alles, solange es im Quirks mode läuft. Sobald ich aber den DOCTYPE angebe wars das. ^^

Zuerst hab ichs mit einer Tabelle versucht.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html style="width:100%; height:100%;">
<body style="width:100%; height:100%;">
<table style="width:100%; height:100%;">
<tr>
<td style="height:80px;">
HEADER
</td>
</tr>
<tr>
<td>
CONTENT
</td>
</tr>
<tr>
<td style="height:300px;">
FOOTER
</td>
</tr>
</table>
</body>
</html>

--> http://www.lucleonhart.de/try/table_try.html Im FF alles klar, im IE gibts schwachfug. Erklärung über Google: "Der IE unterstützt nur im Quirks mode td - höhenangaben" ......

Dann halt mit divs. Hier hab ich das Problem: Wie sag ich dem "mittleren" Div, das es den "rest" ausfüllen soll?! Sobald ich dem div die höhe 100% gebe, wird es 100% der SEITE hoch.. *heul*

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
html, body
{ width: 100%; height:100%; margin:0px; padding:0px; }

#outerdiv
{ width:100%; height:100%; }

#d1
{ width:100%; height:80px; background-color:#ff0000; }
#d2
{ width:100%; height:100%; background-color:#00ff00; }
#d3
{ width:100%; height:300px; background-color:#0000ff; }
-->
</style>
</head>
<body>

<div id='outerdiv'>

    <div id='d1'>HEADER</div>
    <div id='d2'>CONTENT</div>
    <div id='d3'>FOOTER</div>

</div>

</body>
</html>

--> http://www.lucleonhart.de/try/div_try.html

Bitte helfen!!!

**Blakkeight** · 29.11.2006 10:56

Hm ich mache es so das ich einfach den height:; tag weglasse im mittleren div.

Leider nimmt er dann nicht die restlichen %.

Oder ganz leicht, du gibst d1 und d3 auch in % an.

So siehts bei mir aus und es klappt.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body { width: 100%; height:100%; margin:0px; padding:0px; } 
#outerdiv { width:100%; height:100%; } 
#d1 { width:100%; height:20%; background-color:#ff0000; } 
#d2 { width:100%; height:50%; background-color:#00ff00; } 
#d3 { width:100%; height:30%; background-color:#0000ff; }
</style>
</head>
<body>
<div id='outerdiv'>
	<div id='d1'>HEADER</div>
	<div id='d2'>CONTENT</div>
	<div id='d3'>FOOTER</div>
</div>
</body>
</html>

**Lucleonhart** · 29.11.2006 12:15

Jaja, mit Pr0zent klappt das ganz großartig...
Kann ich aber nicht gebrauchen.

I need px!

**mitaki** · 29.11.2006 13:07

Eine mögliche Lösung wäre position: fixed; Dann muss man jedoch eine kleine Hakerei für den IE<7 einbauen.
Eine andere wären negative Außenränder (margin), die jedoch ebenfalls ein kleines IE Häkchen erfordern.

Davon abgesehen (achtung Luc, ab jetzt gibt es mehr als du wolltest) sind mir folgende Dinge aufgefallen.

Zitat

KOPF = 80px height
CONTENT = REST
FOOTER = 300px height

Für Kopf und Fuß also 380px, damit hast du bei Standardauflösung 800x600 gerade mal 220 Pixel für den Inhalt. Benutezrfreundlich?

Zitat

Erklärung über Google: "Der IE unterstützt nur im Quirks mode td - höhenangaben" ......

Tabellen bestehen nicht nur aus Daten. Aber da Tabellenlayouts ohnehin schwachfug und teufelszeug sind lassen wir die Methode außer Acht.

Zitat

Sobald ich dem div die höhe 100% gebe, wird es 100% der SEITE hoch..

100% sind 100%^^ Prozent beziehen sich immer auf das Elternelement. Zusätzlich kommt das Box-Modell ins Spiel. CSS 3 kennt die Border-Box, welcher hier vermutlich hilfreich wäre. Aber das fällt wegen unzureichender Unterstützung wohl aus.

Zitat

I need px!

Pixel sind nicht zoombar. Während die nicht-Verwendung von % verständlich ist, ist es die Verwendugn von Pixel nicht^^ em für skalierbare Elemente.
Aber natürlich gibt es Elemente, die nicht gezoomt werden müssen/sollten.
Das ganze ist also nur ein Hinweis.

**Manni** · 29.11.2006 14:01

So sollte das klappen (Jedenfalls hat es das bei mir schon mal

):

Code:

#header {
height: 80px;
}

#content {
  height: 100%;
  margin-top: -80px;
  padding-top: 80px;
  padding-bottom: 300px;
}

#footer {
  height: 300px;
  margin-top: -300px;
}

**Lucleonhart** · 29.11.2006 15:20

Nope: http://www.lucleonhart.de/try/div_try2.html

Ich habe es nun gelöst.. etwas bekloppt, aber es funktioniert, und der w3 validator sagt "VALIDE".. Indem man statt

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

nur

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

nimmt.
Ich bin damit zufrieden. Danke.

**mitaki** · 29.11.2006 15:47

Valid ja, aber witzigerweise nicht standardkonform.

Ein Transitional Doctype ohne URI Angabe schleudert die Browser nämlich in den Quirksmodus. Ein Ziel das nicht erstrebenswert ist.
Außerhalb des IE sollte der Fehler dennoch bestehen (sofern man nicht eine der IE-Imitierungen in Opera erwischt hat).

Thema: CSS zum Wahnsinnig werden.

Themen-Optionen

Anzeige

CSS zum Wahnsinnig werden.

Berechtigungen