nicht angemeldet
Hello,
'The menu to just stay at the bottom of the page no matter how much content there is unless it goes to the next page'
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Help Inita</title>
<style type="text/css">
body, html {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;color:#FFF;
background-color:#333;
padding:0;
margin:0;
height: 100%;
}
#page {
width:740px;
background-color:#000;
margin: 0 auto;
padding:0;
height: 100%;
}
Unfortunately the IE takes heigth property like min-height property. For other browsers height:100% is always 100% of the containing block even if the content is higher. You have to use min-height for other browsers and a hack for the IE. I will use the "star html hack".
The desired position for DIV.imenu will have to be reached only with absolute positioning. Therefore I set #page here on position:relative, in order to be able to position DIV.imenu later absolutely in it.
My changes (your css in comments):
#page {
width:740px;
background-color:#000;
margin: 0 auto;
padding:0;
min-height: 100%;
position: relative;
}
* html #page {
height: 100%;
}
.imenu {
font-size: 12px;
text-align:center;
width:720px;
background-color:#000000;
margin:0px; padding:10px;
position: absolute;
bottom: 0;
}
.imenu a {color:#FFF}
.imenu a:hover {
color:#FFC}
.center {
text-align:center}
</style>
</head>
<body>
<div id="page">
<table class="center menuup" border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr class="center" style="height:25px">
<td style="width:20%" class="menuup">[ <a href="/index.html"><b>Home</b></a> ]</td>
<td style="width:20%" class="menuup">[ <a href="/login.html"><b>Login</b></a> ]</td>
<td style="width:30%" class="menuup">[ <a href="#"><b>pictures</b></a> ]</td> <td style="width:30%" class="menuup">[ <a href="#"><b>Search </b></a> ]</td>
</tr>
</table><div style="height:90%">content
We let the height of the DIV undefined and only set padding-bottom to get room for the down menu.
<div style="padding-bottom:40px;">content
<br />
<p style="padding:500px 0">content big</p><br />
funktioniert dies nicht in Firefox, auch nicht in Opera <br />
</div><div class="imenu"> [ <a href="#">My Name</a> ] [ <a href="#">Autos</a> ] [ <a href="#">Bears</a> ] [ <a href="#">See Tree</a> ] [ <a href="#">Contact Us</a> ] [ <a href="#">Site Map</a> ]
</div>
</div>
</body>
</html>
greetings
Axel