Menu
I am trying to make a footer that will always be at the bottom of the screen. I don’t want it to extend the width of the screen, the current width will do. I also want both the navigation (#menu) and main content (#main) to always be the same length and always extend all the way to the footer. Here is my CSS and HTML:
CSS:
[CODE]
* {
margin:0;
padding:0;
}
a:link {
color:#FFFF00;
}
a:visited {
color:#FFCC00;
}
html {height:100%;}
body {
background:url(images/background.jpg) repeat-x;
background-color:#073507;
margin:0;
height:100%;
}
#page {
width:auto;
margin:auto;
}
#header {
width:998px;
height:154px;
background:url(images/header2f.jpg);
margin:auto;
}
#container {
height:auto;
width:977px;
margin:0 auto;
margin-top:43px;
margin-bottom:20px;
}
#menu { /* nav */
background:url(images/nav.jpg) no-repeat;
background-color:#004701;
width:219px;
min-height:461px;
/* height:auto !important;
height:461px; */
height:100%;
float:left;
margin-right:5px;
padding-top:120px;}
.menutitle{
height:auto;
width:auto;
text-align:center;
margin:0 auto;
text-decoration:underline;
font-size:130%;
color:#FFFFFF;
font-weight:900;
}
#main {
background-color:#004701;
/* IE min-height hack start */
min-height:581px; height:auto !important; height:581px; width:742px; float:left;
/* IE min-height hack end */
}
#update {
background:url(/images/updates.jpg);
margin:auto;
}
/* Links with football hover */
.links {
background:url(images/nohovernav.jpg);
width:auto;
height:25px;
margin:auto;
padding-left:45px;
padding-top:1px;
margin-top:5px;
cursor:hand;
text-decoration:none
}
.links:hover {
background:url(images/hovernav.jpg) no-repeat; text-decoration:underline;
}
/* Links end */
#padding {padding-top:15px; padding-bottom: 15px; padding-left:15px; padding-right:15px; color:#CCCCCC;}
.footer {height:45px; margin:0 auto; width:960px; text-align:center; float:left; margin-top:2px; color:#FFFFFF; background-color:#004701;}
img {
margin:5px;
}
.adsection {
text-decoration:underline;
font-weight:bold;
}
and here is the HTML:
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link rel=”stylesheet” type=”text/css” href=”../base.css” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<!– TemplateBeginEditable name=”doctitle” –>
<title>Burr & Burton Football</title>
<!– TemplateEndEditable –>
<!– TemplateBeginEditable name=”head” –><!– TemplateEndEditable –>
</head>
<body>
<div id=”page”>
<div id=”header”></div>
<div id=”update”></div>
<div id=”container”>
<div id=”menu”>
<a href=”../index.php”><div class=”links”> Home </div></a>
<a href=”http://burrburton.org/athletics/index.htm”><div class=”links”> Burr & Burton Atheletics </div></a>
<br /><br />
<div class=”menutitle”> News </div>
<div class=”links”> Coaches Desk </div>
<div class=”links”> BBA News </div>
<br /><br />
<div class=”menutitle”> Roster </div>
<div class=”links”> Players </div>
<div class=”links”> Coaches </div>
<br /><br />
<div class=”menutitle”> Schedule </div>
<div class=”links”> Season </div>
<div class=”links”> Off-Season </div>
<br /><br />
<div class=”menutitle”> Multimedia </div>
<div class=”links”> Pictures </div>
<div class=”links”> Videos </div>
<br /><br />
<div class=”menutitle”> Rankings </div>
<div class=”links”> State </div>
<div class=”links”> Conference </div>
<br /><br />
</div>
<!– TemplateBeginEditable name=”main” –>
<div id=”main”>
<div id=”padding”>
<h1> Welcome </h1>
<br />
Home page filler text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <img src=”http://lh3.ggpht.com/_wMigsT9Rhog/SQC4lfFtiWI/AAAAAAAAB6U/5WyrzwZZkrA/s800/DSC_0075.JPG” align=”right” width=”400″ height=”262″/> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class=”push”></div> <!– Main –>
</div>
<!– TemplateEndEditable –>
</div> <!– Container –>
<div class=”footer”>
<!– Footer Links Div Start –>
<a href=”http://www.burrburton.org”>Burr & Burton Academy</a> |
<a href=”http://www.burrburton.org/athletics/index.htm”>Burr & Burton Atheletics</a> |
<a href=”advertising.html”>Advertising on BurrBurtonFootball.com</a> |
<a href=”contact.html”>Contact</a><br /><br />
<span style=”font-size:10px;”>© 2008 by Eric Hernandez and Burr & Burton Academy.</span><br /><br />
<!– Footer Links Div End –>
</div></div>
</body>
</html>
Thank you for any help. Also as you can probably tell i’m relatively new to this