Hallo,
ich habe gerade das Problem, dass ich versuche eine durchgehende Navigation zu erstellen. Aussehen soll's am Ende so:
________________________________________________________
|Steuerung | Inhalt |
| | |
| | |
|_______________|_______________________________________|
| Fußzeile |
|_______________________________________________________|
Jedoch sieht's zur Zeit eher folgendermaßen aus:
_______________________________________________________
|Steuerung |Inhalt |
|____________________| |
|Leerer Raum | |
|________________|______________________________________|
| Fußzeile |
|_______________________________________________________|
Der leere Raum soll nun mit der Navigation ausgefüllt werden, sodass diese auf die Fußzeile trifft.
Der html code ist:
und der .css code ist (in einer ausgelagerten Datei):
Danke
Flaumur
PS: Sorry für die hässliche Darstellung oben.
ich habe gerade das Problem, dass ich versuche eine durchgehende Navigation zu erstellen. Aussehen soll's am Ende so:
________________________________________________________
|Steuerung | Inhalt |
| | |
| | |
|_______________|_______________________________________|
| Fußzeile |
|_______________________________________________________|
Jedoch sieht's zur Zeit eher folgendermaßen aus:
_______________________________________________________
|Steuerung |Inhalt |
|____________________| |
|Leerer Raum | |
|________________|______________________________________|
| Fußzeile |
|_______________________________________________________|
Der leere Raum soll nun mit der Navigation ausgefüllt werden, sodass diese auf die Fußzeile trifft.
Der html code ist:
HTML:
<!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>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>Design über CSS pur - Beispiel</title>
<link href="style(2).css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="kopfbereich">
</div>
<div id="steuerung">
<br>Starseite</br>
<br>Kontakt</br>
</div>
<div id="schatten">
</div>
<p></p>
<div id="inhalt">
<h1>Willkommen zur Beispielwebsite</h1>
<p>Diese Website gleidert sich in 4 Bereiche</p>
<br>fasdf</br>
<p>Hier steht einfacher Text.</p>
</div>
<div id="fussbereich">
<p>wir testen das mal</p>
</div>
</body>
</html>
Code:
html, body {
font: 100% Arial, Helvetica, sans-serif;
}
* {
margin:0;
padding:0;
}
#kopfbereich {
background:url(saeulen.jpg) no-repeat left top;
height:150px;
}
#inhalt {
margin-left: 200px;
padding: 20px;
}
#steuerung {
float: left;
width:150px;
padding: 20px;
background-color: green;
border: 1px solid black;
}
#fussbereich {
position: absolute;
bottom: 0;
width: 100%;
line-height: 1.5em;
text-align: center;
background: #8B8878;
}Flaumur
PS: Sorry für die hässliche Darstellung oben.
