...
PDA

Floating footer

trukje
01-03-2013, 11:49 AM
I can't seem to get my footer fixed to the bottom.
Can someone please help me?


HTML:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="script/cufon-yui.js" type="text/javascript"></script>
<script src="font/Kalinga.ttf" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1'); // Works without a selector engine
Cufon.replace('h2'); // Works without a selector engine
Cufon.replace('h3'); // Works without a selector engine
Cufon.replace('.top_replace');
</script>

</head>

<body>
<div class="top"></div>
<div class="top2"></div>


<div id="container">

<img src="logo.png" id="logo">

<nav>

<ul>
<li><a href="index.php" class="menuactive">Home</a></li>
<li><a href="menu.php" class="menupassive">Kunstprojecten</a></li>
<li><a href="album.php" class="menupassive">Contact</a></li>
</ul>


<p class="wit top_replace size">home page</p>

</nav>


<section>
<header>
Test
</header>
</section>


<footer>

<p>&copy;2013 by <a href="http://www.trukje.be" title="Websites op maat" target="_blank">www.trukje.be</a></p>

</footer>

</div><!--einde container>


<div class="bottom"></div>

<div class="bottom2"></div>

<script type="text/javascript"> Cufon.now(); </script>

</body>


CSS:

/* Algemeen */

html, body {
margin: 0px;
padding: 0px;
height: 100%;
}


body {
background-color: #FFF;
color:#1D1D1D;
font-size: 16px;
font-family: Calibri, Verdana, Geneva, sans-serif;
}

header, nav, footer, article{
display: block;
outline: 1px solid red;
}



nav {
float: bottom;
padding-left: 250px;
height: 126px;
}

div#body {

overflow:auto;
padding-top: 5px;
padding-bottom: 25px; /* Height of the foorter */
/*outline: 1px solid red;*/
min-height: 100%;
height: 100%;
}



/*GRID en STRUCTUUR*/

div#container {
min-height: 100%;
position: relative;
width: 960px;
margin: 0 auto;
}


.grid3{
float: left;
width: 220px;
margin: 10px;
/*outline: 1px solid red;*/
}


.grid4{
float: left;
width: 300px;
margin: 10px;
/*outline: 1px solid red;*/
}

.grid5{
float: left;
width: 380px;
margin: 10px;
/*outline: 1px solid red;*/
}

.grid6{
float: left;
width: 460px;
margin: 10px;
/*outline: 1px solid red;*/
}

.grid7{
float: left;
width: 540px;
margin: 10px;
/*outline: 1px solid red;*/
}

.grid8{
float: left;
width: 620px;
margin: 10px;
/*outline: 1px solid red;*/
}


.grid9{
float: left;
width: 700px;
margin: 10px;
/*outline: 1px solid red;*/
}

.grid12{
float: left;
width: 940px;
margin: 10px;
/*outline: 1px solid red;*/
}


.top {
background-color: #98C93C;
padding: 0px;
width: 100%;
margin: 0px;
left: 0px;
top: 0px;
right: 0px;
position: absolute;
z-index: 0;
height: 5px;
}

.top2 {
background-color: #1D1D1D;
padding: 0px;
width: 100%;
margin: 0px;
left: 0px;
top: 6px;
right: 0px;
position: absolute;
z-index: 0;
height: 120px;
}

.bottom {
background-color: #1D1D1D;
padding: 0px;
width: 100%;
margin: 0px;
left: 0px;
bottom: 6px;
right: 0px;
position: absolute;
z-index: -3;
height: 35px;
}

.bottom2 {
background-color: #98C93C;
padding: 0px;
width: 100%;
margin: 0px;
left: 0px;
bottom: 0px;
right: 0px;
position: absolute;
z-index: -3;
height: 5px;
}

.placeholder{
float: left;
width: 640px;
/*outline: 1px solid red;*/
}

/* FOOTER */

footer{
color:#FFF;
font-size: 12px;
position: absolute;
bottom: 5px;
width: 100%;
height: 25px; /* Height of the foorter */
padding-top: 0px;
padding-right: 5px;
text-align: right;
clear: both;
}



footer a {
color: #FFF;
}

footer a:hover{
color: #FFF;
text-decoration: none;

}


/* layout */

header h1{
font-size: 50px;

}


h1{
color: #fff200;
font-size: 24px;
margin-bottom: 15px;

}

h2{
color: #00ADEF;
font-size: 22px;
margin-top: 10px;
margin-bottom: 5px;
}

h3{
color: #EC008C;
font-size: 22px;
margin-top: 10px;
margin-bottom: 5px;
}

p{
margin-top: 0px;
margin-bottom: 15px;
line-height:18px;
}

ul{
display: block;
color: #fff;
padding-left: 20px;
margin: 0;
list-style-type: disc;
}

li{
line-height:18px;
}


#logo{
height: 180px;
width: 181px;
position: absolute;
top: -2px;
left: 10px;
margin: 0px auto;
z-index: +1;
}




.afblink{
border="0";

}

.bold{
font-weight: bolder;
}

.center{
text-align: center;
}

.springfoto{
height: 225px;
width: 300px;
border: 1px solid #F68B1A;
margin: 0;
padding: 0;
}


.border{
border: 1px solid #F68B1A;
}

.ruimte{
margin-bottom: 20px;
}

.padding{
padding-bottom: 10px;
}

.indent {
margin-left: 20px;
}

#fadeshow1{

height: 285px;
width: 380px;
border:1px solid #F68B1A;.
margin: 0;
margin-bottom: 20px;
padding: 0;


}

.size{
font-size: 25px;

}

.wit{
color: #fff;
}


.geel{
color: #fff200;
}

.oranje{
color: #F68B1A;
}

.groen{
color: #80CC28;
}

.paars{
color: #EC008C;

}





/* Navigatie */

nav ul {
font-size: 20px;
list-style-type: none;
padding-bottom: 8px;
padding-top: 20px;
padding-left: 0px;
padding-right: 0px;
margin-bottom: 20px;

}

nav li {
display: inline;
margin-right: Opx;
padding: 0px;
}

nav li a {
text-decoration: none;
padding: 4px 10px;
padding-bottom: 5px;
}

nav li a:hover{
color: #98C93C;
height:17px;}


}

nav li a:hover span {
background:url('pijl_hover.png') top center no-repeat;
}

nav li a:hover {background-position:0 0;} /*IE fix*/

.menuactive{
color: #000;
border: 2px solid #FFF;
border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
background: #FFF url(pijl_huidig.png) center bottom no-repeat;
border-bottom: 10px solid #FFF;
border-top: 20px solid #FFF;

}

.menupassive{

color: #FFF;

}

/*Contactform */


.contact{
margin: 0;
padding: 5px;
border: 1px solid #F68B1A;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}

label, input, textarea, select {
display: block;
}

label{
margin-top: 10px;
margin-bottom: 5px;
padding: 0;

}


input, textarea, select{
color:#000;
border: 1px solid #999;
padding: 6px;
width: 275px;
}

select{
border: 1px solid #999;
padding: 6px;
width: 289px;
}

input#email:focus, textarea#bericht:focus, input#naam:focus, input#voornaam:focus, select#titel:focus{


border: 1px solid #F68B1A;


}
.btn{
cursor: pointer;
cursor: hand;
width: 289px;
margin-top: 10px;
margin-bottom: 10px;
background: #F68B1A;
font-size: 18px;
color: #fff;
border: 1px solid #fff;

}


.fout{
border: 1px solid #EC008C;
}
sunfighter
01-03-2013, 04:27 PM
<!DOCTYPE html>
<html lang="en">>
<head>
<title>Title of the document</title>
<style type="text/css">
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
#page
{
min-height: 100%; /* for all other browsers */
height: 100%; /* for IE */
width: 960px;
margin: auto;
}
#header
{
background-color: pink;
height: 75px;
}
#main
{
padding-bottom: 75px; /* This value is the height of your footer */
}
#footer
{
background-color: green;
position: absolute;
width: 960px;
bottom: 0;
height: 75px; /* This value is the height of your footer */
}
</style>
</head>

<body>
<div id="page">
<div id="header">HEADER</div>
<div id="main">A small amount of content.</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum