hallo, ich habe für meine Seite ein neues Design aufsetzen wollen (*Klick*)
[Achtung, diese Seite kann nicht im Internet Explorer angeguckt werden]
allerdings ist die Navi leiste eindeutig kürzer als die Inhalts-box, wie kriege ich diese beide gleichlang?! (dass sie unten mit dem bild abschließen)
ich habe es mit 'height: 100%;' versucht, aber es ändert sich dort nichts...
Hier der CSS Code (der wird im obigen beispiel natürlich implementiert)
[Achtung, diese Seite kann nicht im Internet Explorer angeguckt werden]
allerdings ist die Navi leiste eindeutig kürzer als die Inhalts-box, wie kriege ich diese beide gleichlang?! (dass sie unten mit dem bild abschließen)
ich habe es mit 'height: 100%;' versucht, aber es ändert sich dort nichts...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Schnuff.eu</title>
<link rel="stylesheet" media="all" href="style.css">
</head>
<body>
<div id="main">
<div id="head"><img src="bg.png" alt="Logo"></div>
<ul id="navi">
<li><a href="./#">Link(Navi)</a></li>
</ul>
<div id="content">
<h1>Inhalt</h1>
</div>
<img src="bottom.png" style="margin: 0px; padding: 0px; position: relative; top: -10px;" alt="--Ende--">
</div>
</body>
</html>
Code:
body {
background : #ffffff;
margin : 0;
font-family : verdana, sans-serif;
color : #000000;
}
#main {
background : transparent;
width : 600px;
height : 100%;
position : relative;
margin : 0 auto;
}
#head {
width : 600px;
height : 70px;
overflow : visible;
}
#navi {
display : block;
width : 100px;
list-style : none;
height : 100%;
float : left;
background : #777777 url("left.png") repeat-y;
padding : 10px 0 0 10px;
margin : 0;
}
#navi li {
background : url("button.png") no-repeat;
display : block;
width : 110px;
height : 40px;
position : relative;
left : -20px;
margin-bottom : 5px;
z-index : 80;
}
#navi a:link, #navi a:visited, #navi a:hover {
text-decoration : none;
color : #000000;
font-size : 17px;
display : block;
height : 40px;
padding-top : 8px;
margin-left : 25px;
}
#content {
background : #777777 url("right.png") repeat-y 480px 0%;
width : 470px;
min-height : 390px;
padding : 0 10px 10px 10px;
text-align : left;
float : right;
}
h1 {
display : block;
font-size : 20px;
}
img {
border : 0;
}
