Hallo,
ich habe das Problem, das meine height für 100% im Content nicht hinhaut. Ich möchte eine Navigation erstellen die 100% der restlichen Bildschirmhöhe einnimmt. Das ganze noch mit einer Hintergrundfarbe welche ebenfalls die restliche Höhe einnimmt. Momentan füllt er den Bereich nur mit soviel Farbe wie ich Text in der Navigation habe.
Hier ist das entsprechende HTML, darunter das css ausgelagert in einer Datei. Wer kann mir helfen?
Gruss
Julchen
ich habe das Problem, das meine height für 100% im Content nicht hinhaut. Ich möchte eine Navigation erstellen die 100% der restlichen Bildschirmhöhe einnimmt. Das ganze noch mit einer Hintergrundfarbe welche ebenfalls die restliche Höhe einnimmt. Momentan füllt er den Bereich nur mit soviel Farbe wie ich Text in der Navigation habe.
Hier ist das entsprechende HTML, darunter das css ausgelagert in einer Datei. Wer kann mir helfen?
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>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link href="style/becker_style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="box">
<div class="top">
<img src="http://www.tutorials.de/forum/images/top_header_home.jpg" alt="" />
</div>
<div class="menu">
<a href="">Home</a>
<a href="">Philosophie</a>
<a href="">Mein Traumhaus</a>
<a href="">Leistungen</a>
<a href="">Referenzen</a>
<a href="">Zertifizierung</a>
<a href="">News</a>
<a href="">Impressum</a>
<a href="">Kontakt</a>
</div>
</div>
<div class="content">
<h2>content</h2>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Code:
*{
padding:0;
margin:0;
border:0;
}
html, body {
height: 100.01%; /* wichtig */
text-align:left;
}
body {
background-color:#5C656F;
font-family:verdana, arial, sans-serif;
font-size:0.6em;
}
.header{
height:170px;
background:#ccc;
}
p {
margin: 0;
padding: 1em 0;
line-height: 1.5em;
}
.box{
width:790px;
margin:0 0;
text-align:left;
position: relative;
min-height: 100%;
height:auto !important;/* moderne Browser */
height:100%; /* IE */
background:#fff;
}
.inhalt {
padding: 0 2em 60px 2em;
}
.menu {
min-height:100%;
margin:0 0;
position:relative;
height:auto !important;/* moderne Browser */
height:100%; /* IE */
width:130px;
float:left;
background-color:#74887E;
}
.menu a {
color:#000000;
font-weight:normal;
text-decoration:none;
padding: 4px 0px 4px 15px;
display:block;
}
.menu a:hover {
background-image:url(../images/menu_arrow_pic.gif);
color:#F7BD5D;
font-weight:normal;
background-position:center left;
text-decoration:none;
background-repeat:no-repeat;
}
a, a:link, a:visited, a:active {
color:#ffffff;
font-weight:normal;
text-decoration:none;
}
a:hover {
color:#5C656F;
font-weight:normal;
text-decoration:none;
}
a.white, a.white:link, a.white:visited, a.white:active {
color:#ffffff;
font-weight:normal;
text-decoration:none;
}
a.white:hover {
color:#5C656F;
font-weight:normal;
text-decoration:none;
}
a.content, a.content:link, a.content:visited, a.content:active {
color:#999999;
font-weight:normal;
text-decoration:none;
}
a.content:hover {
color:#5C656F;
font-weight:normal;
text-decoration:none;
}
.footer {
width: 100%;
background: #CCC;
position: absolute;
bottom: 0;
height: 20px;
line-height: 20px;
text-align:center;
}Gruss
Julchen
