Sticky footer problem
Hej, jeg har lidt problemer med en kode jeg ikke kan få til at virke.min html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="form.css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<meta charset="utf-8">
<title>Forstenet.dk</title>
</head>
<body>
<div id="header">
<div id="navigation">
<img id="logo" src="images/forstenet-logo.png">
<ul class="tablist">
<li<?php if($page=='home') { ?> id="current" <?php } ?>><a href="<?php $_SERVER['PHP_SELF'];?>?page=home">Forside</a></li>
<li<?php if($page=='portfolio') { ?> id="current" <?php } ?>><a href="<?php $_SERVER['PHP_SELF'];?>?page=portfolio">Portfolio</a></li>
<li<?php if($page=='contact') { ?> id="current" <?php } ?>><a href="<?php $_SERVER['PHP_SELF'];?>?page=contact">Kontakt</a></li>
</ul>
</div>
</div>
<div id="content">
<?php content($page); ?>
</div>
<div id="footer"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/contact_form.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
</body>
</html>
og min css
/* CSS Document */
p {
margin:0px;
padding:0px;
}
h1 {
margin:0px;
padding:0px;
}
body {
margin:0px;
padding:0px;
background-image:url(images/bg.jpg);
background-color:#CCC;
background-repeat:repeat-x;
font-family:Tahoma, Geneva, sans-serif;
line-height:2em;
margin: 0 0 352px; /* bottom = footer height */
}
#header {
position:absolute;
width:100%;
height:200px;
background-color: rgba(60,132,200,1);
background: @include filter-gradient(#3c84c8, #28659a, vertical);
background: @include background-image(linear-gradient(top, rgba(60,132,200,1) 0%, rgba(40,101,154,1) 100%));
border-bottom:1px solid #666;
}
#logo {
float:right;
margin-top:-130px;
margin-right:130px;
}
#navigation {
position:relative;
width:980px;
margin:0px auto;
top:171px;
left:20px;
}
#navigation .tablist {
list-style:none;
height:2em;
padding:0;
margin:0;
border: none;
}
#navigation .tablist li {
float:left;
margin-right:0.13em;
}
#navigation .tablist li a {
display:block;
padding:0 1em;
text-decoration:none;
border:0.06em solid #666;
border-bottom:1px solid #666;
font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
color:#000;
background-color: rgba(255, 255, 255, 0.7);
/* CSS 3 elements */
webkit-border-top-right-radius:0.50em;
-webkit-border-top-left-radius:0.50em;
-moz-border-radius-topright:0.50em;
-moz-border-radius-topleft:0.50em;
border-top-right-radius:0.50em;
border-top-left-radius:0.50em;
}
#navigation .tablist li a:hover {
background:#FFF;
color:#000;
text-decoration:none;
}
#navigation .tablist li#current a {
background-color: #FFF;
color: #000;
border-bottom:1px solid #FFF;;
}
#navigation .tablist li#current a:hover {
background-color: rgba(255, 255, 255, 0.7);
}
#content {
position:relative;
width:940px;
min-height:100%;
margin:0px auto;
top:202px;
/*background-color:#FFF;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;*/
padding:25px 30px 15px 30px;
border:1px solid #FF0;
}
/*#footer {
position:relative;
background-color:#F00;
width:100%;
margin-top:202px;
height:200px;;
}*/
#footer {
position:absolute;
left: 0;
bottom: 0;
height: 200px;
width: 100%;
background-color: blue;
margin-top:-202px;
}
jeg ved godt det er meget rodet.
siden kan ses her. www.forstenet.dk/tmp/
mit problem er at under kontakt der går indholdet ned under footeren og har søgt google tør og prøver alverdens sticky footer muligheder jeg kunne finde, men intet lader til at virke.
Kan i hjælpe?
