Wie erreiche ich es, dass im folgenden layout die fußzeile in jedem fall ganz unten ist ( das navi also nicht überschneidet ) Dabei ist zu beachten, dass das dunkelblaue navi rechts nicht immer so lang ist. Das navi soll nach unten gedrückt werden, egal ob das rote, das blaue oder das dunkelblaue div das längste ist. Zudem möchte ich möglichst den quelltext des navi weit hinten/unten notiert haben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<style>html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
html {
height: 100%;
}
body {
height: 100%;
background: #FBEDC1;
font-size: 100.01%;
}
.w100 { width:100%;}
.klein {font-size:50%;}
#kopf { background: #001058; width: 100%; border-width:1px; border-style:solid; border-color:#001058;
}
#kopf h1 { /* formatiert alle Überschriften erster Ordnung, die sich in einem Element mit der id "kopf" befinden */
text-align:left;
font-weight:bolder;
font-size:150%;
letter-spacing:0.2em;
color: #f60;
margin: 0.7em 0 0.3em 10%;
}
#logo { position: absolute; right:5.5em; top:1.5em; height:80; width:263;}
/*definitionen innerhalb der inhaltsbox*/
#inhalt { position:relative; top:0; left:0; width: 100%; color: green; background-color: green; float:left;}
#inhalt p {
font-size: 1em;
line-height: 1.5em;
color: black;
margin: 2em 1.5em 1.5em 1.5em ;
}
#fang {width:85%;}
#zentr {width:80%; margin:0em auto; background-color: white; border:solid; border-color: #FBEDC1; border-width:1px;}
#boxl {width:66%; margin:0em 0em 0em 0em; background-color: red; float:left;}
#boxl img {padding:0 0 0em 0}
#boxr {margin:0em 0em 0em 0em; background-color:blue;}
/* Ab hier formatierung des Elements mit id "navi" inkl. Sub-elemente */
#navi {position:absolute; top:0%; right:0%; background: #001058; width: 15%; height:auto; padding: 0em 0em 0em 0em; }
#navi ul { /* formatiert alle ungeordneten Listen, die sich in einem Element mit der id "navi" befinden */ font-size: 1em;
line-height: 1.25em;
color: #0063CE;
margin: 0em 0em 0.75em 0.5em; list-style-position: inside;}
#navi ul li {/*hier wird u.a. das blaue bullet und mittels padding lage von hr definiert*/
font-size: 0.9em;
line-height: 1.1em;
color: #0063CE;
margin: 0em 0.5em 0em 0em;}
#navi ul li ul li {/*hier wird das leuchtgrüne bullet definiert*/
color: #00FC9B;
margin: 0em 0em 0em 0em;
}
#navi ul a {
font-size: 0.7em;
line-height: 0.8em;
color: red;
margin: 0em 0em 0em 0em ;}
#navi ul li a {
font-size: 0.7em;
line-height: 0.8em;
color: red;
margin: 0em 0em 0em 0em ;
font-weight:small;}
#navi li a:link {
font-size: 0.7em;
line-height: 0.8em;
color: #fff;
margin: 0em 0em 0em 0em ;
font-weight:small}
#navi li a:visited {
color: #167EC6;
text-decoration: none;}
#navi li a:hover, a:active {
text-decoration: none;
color: #FF6600; background-color: transparent;}
#fuss {width:100%; background-color: #001058}
ul#navih {
width: 100%;
height:auto;
margin: 0; padding: 0.3em;
text-align: center;
background-color: #001058;
}
ul#navih li { color: #FBEDC1; display: inline;}
</style>
</head>
<body>
<!--kopf-->
<div id="kopf">
<h1>Hier liegt<br>eine mehrzeilige<br>Überschrift</h1>
<p>
<img id=logo src="./logo.gif" title="ein name" name="logo" alt="logo der namens GMBH"></p>
</div>
<!--ende kopf-->
<!--inhalt-->
<div id="inhalt">
<!--fangbox1-->
<div id="fang">
<!--standartkonform zentrierte box-->
<div id="zentr">
<h1 class="w100">Unser Angebot an <strong>bli bla blub</strong></h1>
<!--linke box-->
<div id="boxl">
<p>Beschreibender text</p>
<p>Beschreibender text</p>
<p>Beschreibender text</p>
<p>beschreibender text</p>
<p><img src="1.jpg" height="137" width="191"><br>
<img src="2.jpg" height="128" width="191"><br>
<img src="3.jpg" height="103" width="191"><br>
<img src="4.jpg" height="122" width="191"></p>
</div>
<!--ende linke box-->
<!--rechte box-->
<div id="boxr">
<p>eine ul-liste</p>
<p>m vnbn nnp9 </p>
<p>o oivn ioj on</p>
<p> ojio odoohio</p>
<p> iohiodfh ioc </p>
<p>oifh ioiofnoh oid oisdnio</p>
<p>miuh hsih iskxhclkx kkxc is i idhc laiha olch ishc ishoiah ishoa isch oaish osh a</p>
</div>
<!--ende rechte box-->
</div>
<!--ende zentrierte box-->
</div>
<!--ende fangbox-->
<!--navi-->
<div id="navi">
<!--<div style="padding: 0 0 0 0.3em">-->
<h2>Thema1</h2>
<ul>
<li></a><span style="font-size: 0.7em; line-height: 0.8em; color: #00FC9B; margin: 0em 0em 0em 0em ; font-weight:bold;">AAA, aktiv</span><br> <span style=" font-size: 75%; color: #00FC9B;">+ xxx</span>
<ul style="border-width:1px; border-style:solid; border-color:#00FC9B; padding:0.5em; margin:0.5em 0 1em 0;">
<li><a href="">01</a></li>
<li><a href="">02</a></li>
<li><a href="">03</a></li>
<li><a href="">04</a></li>
<li><a href="">05</a>
<hr style="width:25%; color: #00FC9B; background-color: #00FC9B; height:0.5px; text-align:center;"></li>
<li><a href="">06</a>
<ul>
<li><a href="">a</a></li>
<li><a href="">a</a></li>
<li><a href="">c</a></li>
</ul>
<hr style="width:25%; color: #00FC9B; background-color: #00FC9B; height:0.5px; text-align:center;"></li>
<li><a href="">07</a></li>
<li><a href="">08</a></li>
<li><a href="">09</a>
<hr style="width:25%; color: #00FC9B; background-color: #00FC9B; height:0.5px; text-align:center;"></li>
<li><a href="">10</a></li>
<li><a href="">11</a></li>
<li><a href="">12<br> + yyy</a></li>
<li><a href="">13<br> + zzz</a></li>
<li><a href="">14</a></li>
<li><a href="">15</a></li>
<li><a href="">16</a></li>
</ul></li>
<li><a href="">BBB</a></li>
<li><a href="">CCC</a></li>
<li><a href="">DDD</a></li>
<li><a href="">EEE</a></li>
</ul>
<h2>Thema2</h2>
<ul>
<li><a href="">AAA</a></li>
<li><a href="">BBB</a></li>
</ul>
<h2>Thema3</h2>
<ul>
<li><a href="">AAA</a></li>
<li><a href="">BBB</a></li>
<li><a href="">CCC</a></li>
<li><a href="">DDD</a></li>
</ul>
<h2>Thema4</h2>
<ul>
<li><a href="">AAA</a></li>
<li><a href="">BBB</a></li>
<li><a href="">CCC</a></li>
</ul>
</div>
<!--ende navi-->
</div>
<!--ende inhalt-->
<div id="fuss"><ul id="navih" class="klein" >
<li>Das | </li><li>ist | </li><li>eine | </li><li>horizontale | </li><li>navigations- | </li><li>leiste | </li><li>mit ul | </li><li>und | </li><li>li | </li><li>inline</li>
</ul></div>
</body>
</html>