nicht angemeldet
3 zeiliges design mit korrektem footer
Guten Tag
Ich möchte mittels CSS:
+--------------------------------------+
| Kopfzeile, 6em hoch, 100% breit |
+--------------------------------------+
| |
| |
| Mittelteil, soll verfügbarer Platz |
| zu 100% ausfüllen! |
| |
| |
+--------------------------------------+
| Fusszeile, 3em hoch, 100% breit |
+--------------------------------------+
Die Fusszeile soll immer am unteren Fensterrand kleben. Auch wenn "Mittelteil" leer ist.
Wenn der "Mittelteil" übervoll ist, soll die Fusszeile nach unten wandern, so dass sie am Schluss, nach dem "Mittelteil" erscheint.
Es dürfen nur Angaben in "em" oder % verwendet werden.
Problem
Das Screenfenster wird grösser als 100% -> Scrollbalken erscheint!
Wie muss ich die Fusszeile einbauen, um dies zu verhindern?
Was bisher geschah
Hab geschnallt, dass:
- html, body müssen im CSS mit "height:100%" definiert sein.
- Die "Fusszeile" muss relativ zum "Mittelteil" positioniert sein.
Und noch etwas Qeullcode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="DE">
<head>
<title>Drei Zeilen Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body{height:100%; width:100%;}
body
{
padding:0;
margin:0;
background:#CCFF00;
}
html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
</style>
</head>
<body>
<div id="header" style="position:absolute; top:0px; left:0px; height:6em; width:100%; background-color:#339900;">
Das ist der Kopf
</div>
<div style="background-color:red; height:100%; ">
<div style="padding-top:6em;">Das ist der Mittelteil</div>
</div>
<div style="width:100%; height:3em; position:relative; top:-3em; background-color:yellow; clear:both;">
Fusseli
</div>
</body>
</html>
-
Die Fusszeile soll immer am unteren Fensterrand kleben. Auch wenn "Mittelteil" leer ist.
Wenn der "Mittelteil" übervoll ist, soll die Fusszeile nach unten wandern, so dass sie am Schluss, nach dem "Mittelteil" erscheint.
Es dürfen nur Angaben in "em" oder % verwendet werden.einfach für alle Teile % Angaben machen ?
body --> 90% (100 würde ggf. Scrollbalken hervorbringen, da die % Angabe sich auf das HTML Element bezieht und dieses wiederum - glaub ich - die gesamte Browser-Fenster-Höhe hat (bei IE 6)
Header --> 10%
darin ein DIV mit 6em Höhe
Mittelteil --> 80%
Footer --> 10%
darin ein DIV mit 3em HöheProblem
Das Screenfenster wird grösser als 100% -> Scrollbalken erscheint!
Wie muss ich die Fusszeile einbauen, um dies zu verhindern?was genau meinst du damit ?
..immerhin muß der Balken ja kommen, wenn der Inhalt des Mittelteils eine entsprechende Höhe hatWas bisher geschah
Hab geschnallt, dass:
- html, body müssen im CSS mit "height:100%" definiert sein.
- Die "Fusszeile" muss relativ zum "Mittelteil" positioniert sein.
öhh nö, siehe oben, kleiner Quelltext dazu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"/>
<head>
<title>Struktur der DBN</title>
<meta name="keywords" lang="de" content="DBN, Stuktur, Rollenspiel, Donegal, Broadcasting, News">
<meta name="keywords" lang="en" content="DBN, Struktur, Battletech, Roleplay, Fiction, Donegal, Broadcasting, News">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="dbn_struktur.css">
</head>
<body style="height: 90%;"><div style="height: 10%;">
<div style="height: 6em; background-color: red;">
</div>
</div>
<div style="height: 80%; background-color: blue;">
tetetet
</div>
<div style="height: 10%;">
<div style="height: 3em; background-color: green;">
</div>
</div></body>
</html>
-
Die Fusszeile soll immer am unteren Fensterrand kleben. Auch wenn "Mittelteil" leer ist.
Wenn der "Mittelteil" übervoll ist, soll die Fusszeile nach unten wandern, so dass sie am Schluss, nach dem "Mittelteil" erscheint.hab mich nochmal mit den Anforderungen befaßt
das hier
<body style="height: 90%;">
<div style="height: 10%;">
<div style="height: 6em; background-color: red;">
</div>
</div><div style=" background-color: green;">
<div id="inhalt"></div>
</div><div style="height: 10%;">
<div style="height: 3em; background-color: green;">
</div>
</div></body>
</html>
funktioniert bei mir exakt so wie gewünscht, an den Prozentzahlen kann man natürlich noch feintunen
ist kein Inhalt enthalten, ist die Fußzeile ganz unten
ist viel Inhalt enthalten, wächst der Mitteil automatisch mitMfG
Micha-
Salut Micha
Vielen Dank für deinen Vorschlag!
Ich möchte gezielt keine % - Angaben im Header und Footer benutzen, da beim Verkleinern und Vergrössern des Browserfensters der Header und der Footer genau gleich gross bleiben sollen.Hast du eine Idee, wie man das mit den Angaben "em" für den Header und Footer lösen könnte?
Gruss
Schorsch-
Vielen Dank für deinen Vorschlag!
Ich möchte gezielt keine % - Angaben im Header und Footer benutzen, da beim Verkleinern und Vergrössern des Browserfensters der Header und der Footer genau gleich gross bleiben sollen.Hast du eine Idee, wie man das mit den Angaben "em" für den Header und Footer lösen könnte?
also wenn du tatsächlich "em" als Maß aller Dinge nimmst, hast
du auch hier keine Designsicherheit, verschiedene Schriftgrößen
führen zu verschieden großen Headern/Footernnicht so gut
hmm kommt natürlich auf die Vorgaben drauf an, aber warum läßt du die
Höhen nicht entsprechend den Inhalten "wachsen" ?im Header ein Bild ? --> entsprechend hoch (px oder em, je nach Gusto)
im Footer Text ? --> font-size bestimmt letztlich die Höhe
..und als "Lösung" für die Sache mit dem "Footer immer ganz unten, auch wenn riesiges Fenster aber kein Inhalt in der Mitte" würde mir höchstens eine "künstliche" sidebar einfallen
also für den Mittelteil
...kein umfassendes Div nehmen, sondern
<div id="artificial_sidebar" style="height: 80%; width: 0.1%; float: left">
ob 0.1% gehen weiß ich gar nicht, notfalls gibts halt Breite = 0
</div><div id="mittlerer_inhalt" style="width: 99%;">
Höhe ergibt sich aus dem Inhalt
</div>...ist aber nur eine nicht zertifizierte Idee =)
die künstliche Sidebar spannt quasi den mittelteil auf, egal wieviel
drin ist, ist mehr drin, wird das inhalts-div ja automatisch größer
und drückt nachfolgende Elemente nach unten (footer?)MfG
Micha-
Guten Abend
Hab da glaub eine Lösung gefunden:
<body>
<div style="position:relative; width:100%; height:5em; background-color:blue;">
Kopfzeile
</div>
<div style="width:100%; height:100%; margin-top:-6.5em; background-color:silver;">
</div><div style="position:relative; width:100%; height:1.5em; bottom:0px; background-color:yellow;">
Fusszeile
</div>
</body>Wird sich diese wohl bewähren?
Gruss
Schorsch-
Wird sich diese wohl bewähren?
nur wenn alle Inhalte in der mittleren Box sehr weit unten (margin-top 7em?) anfangen
ansonsten scheints zu funktionieren
-
-
Hi,
also wenn du tatsächlich "em" als Maß aller Dinge nimmst, hast
du auch hier keine Designsicherheit, verschiedene Schriftgrößen
führen zu verschieden großen Headern/Footernnicht so gut
doch! Nur Angaben in em passen sich der Schriftgröße an. Andere Einheiten können dazu führen, daß der Inhalt aus der Box herausgeht.
...ist aber nur eine nicht zertifizierte Idee =)
Genau. ;-)
freundliche Grüße
Ingo
-
-
-
-
Ich denke Du tust Dich am einfachtsen, wenn Du das ganze mit drei Frames löst. Die kannst Du genau Positionieren, und deren größen festlegen.
Der Nachteil daran ist, dass der Fußteil immer sichtbar wäre, selbst wenn der Mittelteil mehr als einen Bildschirm füllen würde.
MfG
BigWilMa
-
Salut
Ich denke Du tust Dich am einfachtsen, wenn Du das ganze mit drei Frames löst. Die kannst Du genau Positionieren, und deren größen festlegen.
Frames kommen nicht in Frage.
Merci trotzdem für deinen Beitrag.Schorsch
-