Layout über CSS

Status
Nicht offen für weitere Antworten.
X

xcite_swEEper

Grünschnabel
Sers,

hab n kleines Problem mit nem Layout für ne Seite über CSS..

Also so soll es aussehen:
Klick
Hab es hier einfach mal mit ner Tabelle gemacht um zu verdeutlichen was ich erreichen will ...

Nun das Ganze eben über CSS... mein Ansatz sieht bisher so aus:
PHP: 
<?xml version="1.0" encoding="utf-8"?>
<!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-DE" lang="de-DE">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

#header {
	width: 100%;
	height: 80px;
	background-color: #DDDDEE;
}

#menu {
	float: left;
	width: 20%;
	background-color: #EEEEEE;
}

#main {
	float: right;
	width: 80%;
	background-color: #DDDDDD;
}
</style>

<title>X!cite</title>

</head>

<body>

<div id="container">

	<div id="header">
		Header
	</div>
	
	<div id="main">
		Main
	</div>
	
	<div id="menu">
		Menu
	</div>

</div>

</body>
</html>

Aussehen tut es dann so:
Klick

Meine Frage: Wie kann ich es hinkriegen, dass die beiden divs Main und Menu bis zum "Boden" der Seite reichen? Also dass sie mit dem Header zusammen eine Höhe von 100% haben?
Wenn der Inhalt in "Main" länger wird, sollte der Menu-Div auch entsprechend "länger" werden.. also dass beide Spalten immer bis zum Ende der Seite reichen..
Einfach "height: 100%;" tut nicht...

thx,
swEEper
 
Hallo xcite_swEEper,

vielleicht kannst du es so machen:
Code: 
     <?xml version="1.0" encoding="utf-8"?>
     <!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-DE" lang="de-DE">
     <head>
     <title>X!cite</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">
     <!--
     html, body {
     	width: 100%;
     	height: 100%;
     		margin: 0;
     		border: 0;
     	padding: 0;
     	background-color: #fff;
     }
     
     #header {
     	position: absolute;
     	width: 100%;
     	height: 80px;
     	background-color: #DDE;
     	z-index: 2;
     }
     
     #menu {
     	position: absolute;
     	top: 80px;
     	left: 0;
     	bottom: 0;
     		width: 20%;
     	background-color: #EEE;
     	
     }
     /* nur für Internet-Explorer: */
     * html #menu {
     	top: 0;
     	height: 100%;
     	border-top: 80px solid #fff;
     }
     
     #main {
     	position: absolute;
     	top: 80px;
     	left: 20%;
     	bottom: 0;
     	width: 80%;
     	background-color: #DDD;
     }
     /* nur für Internet-Explorer: */
     * html #main {
     	height: 100%;
     	border-top: 80px solid #fff;
     }
     -->
     </style>
     </head>
     
     <body>
   	<div id="header">Header</div>
     	<div id="main">Main</div>
     	<div id="menu">Menu</div>
   </body>
     </html>
Dein DIV-Block mit id="container" habe ich weggelassen, da er erst mal keine Funktion hat.
 
Zuletzt bearbeitet:
Servus

Ich bin seit längerem auf der Suche nach etwas derartigem. Hatte schon gehofft, in diesem Thread die Lösung zu finden - leider nicht.

-> http://silentwarrior.si.funpic.de/test.htm

Wo liegt denn das Problem? Bzw. wie kann ich die Navigation so definieren, dass sie immer bis ganz nach unten geht? (Oder andersherum, dass der Hauptanzeigebereich immer mindestens so lange wie die Navigation ist)
 
Probier mal folgende CSS-Eigenschaften:
Code: 
* {
	margin:			0;
	padding:		0;
	border-style:		none;
}
body {
	position:		relative;
    	background-color:	#eee;
}
#header {
	height:			80px;
	background-color:	#dde;
}
#menu {
	position:		absolute;
	top:			80px;
	width:			20%;
}
#main {
	margin-left:		20%;
	width:			80%;
	background-color:	#ddd;
}
 
Hallo SilentWarrior,

in meinem Beitrag vom 30.1.2005 waren leider zwei Fehlrer in den Stylesheets enthalten, die ich inzwischen korregiert habe, und die ebenfalls auf deiner Testseite zu finden sind:








  • Im #header-Selektor muss zwischen der "z-index"-Eigenschaft und dem Wert "2" ein Doppelpunkt statt Gleichheitszeichen stehen.
  • Im * html #main-Selektor muss zwischen der "border-top"-Eigenschaft und dem Wert "80px ..." ein Doppelpunkt statt Semikolon stehen.
Außerdem wird ein Trick (siehe StuNicholls 'Fixed Layout v3') für den Internet-Explorer angewendet: Der IE muss im Quirksmode arbeiten, so dass er die 80px-breiten oberen Ränder mit zur #menu- und #main-Blockhöhe von 100% dazurechnet. Über diesem 80px breiten Rand wird dann der Header mit Hilfe des höheren z-Index abgelegt.
Der IE arbeitet aber nur im Quirksmode, wenn vor der Dokumenttypdeklaration ein XML-Prolog oder ein Kommentar steht. Das ist auf deiner Testseite nicht der Fall. Du solltest also noch vor der Dokumenttypdeklaration beispielsweise folgendes nachtragen:
Code: 
<?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE ...
Bei übergroßem Blockinhalt im #main-DIV-Block brauchst du dann nur noch im entsprechenden Selektor die Scrollmöglichkeit in diesem Block über die Eigenschaft "overflow:auto;" freigeben und ggf. im BODY mit "overflow:hidden;" unterbinden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück