zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Divs auf 100% Browserhöhe - Wie?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.01.2008, 00:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.01.2008
Beiträge: 1
Xerrez befindet sich auf einem aufstrebenden Ast
Standard 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">
				&nbsp;
			</div>
			<div id="MainContent">
				<div id="LeftMenu">
					&nbsp;
				</div>
				<div id="MiddleBlock">
					<div id="ContentBlock">
						&nbsp;
					</div>
					<div id="RightMenu">
						&nbsp;
					</div>
				</div>
			</div>
			<div id="Footer">
				&nbsp;
			</div>
		</div>
	</body>
</html>
Und nun noch mein aktuelles CSS:

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;
}
Nun die Frage:

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.01.2008, 00:23
Benutzerbild von nick
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 01.08.2006
Ort: Rheinland-Pfalz
Beiträge: 386
nick befindet sich auf einem aufstrebenden Ast
Standard

http://xhtmlforum.de/40080-f-r-frage...twortende.html

Zitat:
Versuche, das Problem nachvollziehbar für andere zu beschreiben. Fang dabei mit der Betreffzeile an.

Stell einen kompletten, lauffähigen Code ein, der einen das Problem sicher nachvollziehen lässt und der dabei auf Überflüssiges verzichtet. Selten, sehr selten sind dazu mehr als ein paar Handvoll Zeilen notwendig. Viele Probleme lösen sich dabei auch von selbst.
z.B. habe ich die Grafiken nicht.

Zitat:
Gib zusätzlich eine URL an: Niemand hat Zeit, Archive auszupacken und Codefragmente zusammenzusetzen.
zum Beispiel hättest du das Fehlermarkup mit internem css posten können.
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>
Klick: 100p

Geändert von nick (16.01.2008 um 00:42 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:09 Uhr.