Hallo diemaus,
zwei Anmerkungen:
- Bei der Gestaltung der Seite würde ich Kopfzeile vom Inhalt und den wiederum von der Fusszeile trennen. D.h.:
Dann sieht deine css-Datei ein wenig einfacher aus, da du die Einträge für die Klasse „links“ zusammenfassen kannst.
- Ein float-Element kann keine Höhe von 100% haben. Deshalb benutze ich persönlich ein absolut positioniertes Element, um denselben Effekt zu erreichen. D.h. beim obigen Aufbau würde ich folgende stile definieren:
.content{
padding:0px 0px 0px 15%;
width:75%;
}
.links{
position:absolute;
top:0px;
left:0px;
background:#ffff99;
margin:0px;
height:100%;
width:11%;
border:10px solid white;
border-width:0 10px;
z-index:2;
}
wie du siehst, hat das ganze ein Problem: Da hier absolute Angaben (10px für den Rand der .links-Klasse) und relative (width von .links und padding-left von .content) vermischt werden, kann es durchaus vorkommen (bei kleinen Fenstern), dass der Inhalt der .content-Klasse hinter dem .links-Element verschwindet. Bisher ist es m.W. nicht möglich eine prozentuale border-width anzugeben (wohl vor allem, weil nicht klar wäre auf welche Grösse der Prozentsatz sich bezieht…), deshalb kann man dieses Problem nicht einfach umgehen.
Anbei noch die komplette CSS-Datei, so wie ich sie dir umgebaut habe:
*{
margin:0;
padding:0;
}
body {
background:white;
font:1em „trebuchet ms“, verdana, sans-serif;
text-align:center;
padding:10px;
}
.content{
position:relative;
background:#ffff99;
margin:0;
padding:0px 0px 0px 15%;
width:75%;
text-align:left;
}
#header .content {
height:80px;
}
#body .content{
height:500px;
}
#footer .content {
height:36px;
}
.links {
position:absolute;
top:0px;
left:0px;
background:#ffff99;
margin:0px;
height:100%;
width:11%;
border:10px solid white;
border-width:0 10px;
z-index:2;
}
#header, #body, #footer {
position:relative;
margin:10px 0px 0px 0px;
}
h2 {
color:#000000;
font-size:1.2em;
}
h1 {
position:relative;
color:#000000;
font-size:1.3em;
padding:40px 0 15px 0;
}
h3,h4,h5,h6 {
margin:0 148px 0 0;
}
a:link,a:visited,a:active {
color:#000000;
text-decoration:underline
}
a:hover {
text-decoration:none
}
img {
border:none
}
Gruss, Omar Abo-Namous
