Problems with sticky footer html css
- by CJava
I'm having trouble making a sticky footer, whatever I do the code completely messes up and re-arranged positioning of other elements. I'm using multiple div elements. I have tried pretty much most tutorials on stickying footers online like http://www.cssstickyfooter.com/using-sticky-footer-code.html Help would be much appreciated. Thanks a lot!
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<title>Southend-on-Sea Independant Tourist Guide</title>
<!--Attached CSS to keep constant throughout site-->
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="An independant tourist guide on Southend-on-Sea">
<meta name="keywords" content="southend, southend-on-sea, tourist guide, tourist, independant">
<meta name="author" content="Callum Stevens">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"><!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="navigation.css">
</head>
<body>
<div id="container">
<div id="content">
<div id="header">
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="southendpiersept2006edit.jpg" width="700" height="389" alt="southend pier site logo"></td>
</tr>
</table>
</div>
<div id="navigation">
<ul>
<li class="home"><a href="index.htm">Home</a></li>
<li class="places"><a href="places.htm">Places to go</a></li>
<li class="things"><a href="things.htm">Things to do</a></li>
<li class="where"><a href="where.htm">Where to stay</a></li>
<li class="getting"><a href="getting.htm">Getting< here/a></a></li>
<li class="about"><a href="getting.htm"></a><a href="getting.htm"></a><a href="about.htm">About the town</a></li>
<li class="contact"><a href="contact.htm">Contact us</a></li>
</ul>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
</div>
<br>
<br>
<h1>Southend-On-Sea</h1>
<br>
<h2>Welcome to Southend-On-Sea Tourist Information Site. You're #1 stop for finding out about Southend!</h2>
<br>
<h3>This site aims to help you in getting here, finding accomodation, and letting you know whats going on.</h3>
<p>paragraph</p>
<p id="p2">paragraph2</p>
</div>
</div>
<div id="footer"></div>
</body>
</html>
style.css:
html, body { margin: 0px;
padding: 0px;
text-align:center
}
body{
background: url(bg.jpg) repeat-x;}
#content {
text-align:center
width:67%;
}
h2 {
text-transform: capitalize;}
navigation.css
#navigation ul {
width: 700px;
height: 50px;
position: absolute; /** Places image at the top of the page **/
top: 389px; /** Determines the height from the top of the page **/
left: 15.3%; /** Determines the width from the left of the page **/
background: url(menu.jpg) no-repeat 0 0;
list-style: none;
margin: 0; padding: 0;
}
#navigation li {
display: inline;
}
#navigation li a:link, #navigation li a:visited {
border: none;
width: 100px;
height: 50px;
display: block;
position: absolute;
top: 0;
text-indent: -7000px;
outline: none;
}
#navigation li.home a:link, #navigation li.home a:visited {
left: 0;
}
#navigation li.places a:link, #navigation li.places a:visited {
left: 100px
}
#navigation li.things a:link, #navigation li.things a:visited {
left: 200px
}
#navigation li.where a:link, #navigation li.where a:visited {
left: 300px
}
#navigation li.getting a:link, #navigation li.getting a:visited {
left: 400px
}
#navigation li.about a:link, #navigation li.about a:visited {
left: 500px
}
#navigation li.contact a:link, #navigation li.contact a:visited {
left: 600px
}
#navigation li.home a:hover {
background: url(menu.jpg) no-repeat 0 -50px;
}
#navigation li.places a:hover {
background: url(menu.jpg) no-repeat -100px -50px;
}
#navigation li.things a:hover {
background: url(menu.jpg) no-repeat -200px -50px;
}
#navigation li.where a:hover {
background: url(menu.jpg) no-repeat -300px -50px;
}
#navigation li.getting a:hover {
background: url(menu.jpg) no-repeat -400px -50px;
}
#navigation li.about a:hover {
background: url(menu.jpg) no-repeat -500px -50px;
}
#navigation li.contact a:hover {
background: url(menu.jpg) no-repeat -600px -50px;
}
