|
|||
Divs auf 100% Browserhöhe - Wie?
Hi,
sry erstmal dafür falls es solche Fragen schon gab, aber nach etlichen Google Attacken hab ich einfach keine Lust mehr zu suchen. Hier erstmal der HTML Code der Seite: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Rebellenherzen - Home</title> <link rel="stylesheet" href="/css/style.css" /> </head> <body> <div id="Content"> <div id="Header"> </div> <div id="MainContent"> <div id="LeftMenu"> </div> <div id="MiddleBlock"> <div id="ContentBlock"> </div> <div id="RightMenu"> </div> </div> </div> <div id="Footer"> </div> </div> </body> </html> Code:
html, body { text-align: center; color: #FFF; background-color: #000; margin: 0; padding: 0; } #Content { width: 800px; margin: auto; text-align: left; padding: 0; } #Header { background-image: url(/img/header.jpg); background-repeat: no-repeat; height: 103px; width: 800px; } #MainContent { width: 800px; } #LeftMenu { width: 150px; background-image: url(/img/menu_bg.png); background-repeat: repeat-y; float: left; } #MiddleBlock { } #RightMenu { float: right; width: 150px; background-image: url(/img/menu_bg.png); background-repeat: repeat-y; } #ContentBlock { float: left; } #Footer { background-image: url(/img/fuss.png); width: 800px; background-repeat: no-repeat; height: 57px; clear: both; } Wie schaffe ich es, das der Footer ganz unten am Bildschirmrand ist (und natürlich noch weiter unten wenn der Inhalt für die Browserhöhe zu groß ist) und das die Divs #LeftMenu, #ContentBlock und #RightMenu immer auch wirklich bis nach unten durchgehen. Momentan ist es so, das auf der Seite noch nicht viel Inhalt ist (ist momentan nur ein Design Beispiel) und damit die 3 Divs noch kleiner sind als das eigentliche Browserfenster. Der Footer klebt auch schon an den Divs unten dran, aber halt nicht unten am Browserfenster. Wer sich mal die aktuelle Seite anschauen möchte: Rebellenherzen - Home Bitte nicht an den Bildern stören, die werden noch geändert (es handelt sich halt nur um eine Stammpage für meinen Stamm aus dem Steinzeitspiel). Bin langsam echt am verzweifeln... Im Internet findet sich nix gescheites dazu. Vlt. bin ich aber auch nur einfach zu blöd für CSS (bin eigentlich PHP und HTML Coder) und der Aufbau der ganzen Seite ist falsch (das mit dem float usw.) Bitte helft mir bei dem Thema. Gruß Xerrez |
Sponsored Links |
|
||||
http://xhtmlforum.de/40080-f-r-frage...twortende.html
Zitat:
Zitat:
Ok, die par Sekunden Zusammensetzung sind ja nicht schlimm. http://xhtmlforum.de/40267-faq-h-ufi...ragen-und.html Hilft der FAQ Eintrag #4 dir vielleicht weiter? Wie es möglich wäre, 3 divs (header, content, footer) zu platzieen, dass sie von der Höhe her insgesamt von der obersten Kante von body bis zur untersten komplett durchreichen, wenn alle 3 divs eine relative bzw. prozentuale Höhe haben z.B. 10%, 80%, 10%. Ansonsten hilft da leider Gottes nur eine Tabelle, da die Spalten undefinierter Breite soviel einnehmen wie noch Platz ist von der Breite der Tabelle her.. Da fällt mir ein. Durch absolute Positionierung kannst du mit der bottom-Eigenschaft eine div von unten ankleben, die header div oben ankleben und eine in der mitte dessen y-wert gleich der höhe des header divs entspricht und per faux columns dahintergeschummelte hintergrundgrafik. Hier mein kleiner Vorschlag auf die Schnelle Code:
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="robots" content="no-index, no-follow, no-cache" /> <style type="text/css"> * { margin: 0; border: 0; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: url(bg.png) repeat-y; } div.header { background: #696969; height: 30px; width: 600px; text-align: center; position: absolute; top: 0; } div.content { background: #999999; height: 30px; width: 600px; text-align: center; position: absolute; top: 30px; } div.footer { background: #696969; height: 30px; width: 600px; text-align: center; position: absolute; bottom: 0; } </style> <title>code</title> </head> <body> <div class="header"> <p>Header-Text</p> </div> <div class="content"> <p>Seiteninhalt</p> </div> <div class="footer"> <p>Seiteninhalt</p> </div> </body> </html> Geändert von nick (16.01.2008 um 00:42 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
n Div's in eine Zeile | Mustangore | CSS | 9 | 20.08.2009 16:19 |
Höhenanpassung von divs | localex | CSS | 1 | 21.11.2007 12:25 |
Divs nebeneinander, aber mittig | RomanM | CSS | 2 | 24.10.2007 07:32 |
div bereich nach anderen divs ausrichten | pixel | CSS | 0 | 04.02.2007 00:49 |
Browser-Problem bei Positionierung von DIVs | mickropixel | CSS | 3 | 20.09.2004 17:25 |