Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Floating footer

  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floating footer

    I can't seem to get my footer fixed to the bottom.
    Can someone please help me?


    HTML:
    Code:
    <!--[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:
    Code:
    /* 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;	
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,714
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Code:
    <!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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •