PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
R

Footer Onderaan

Door Roeltje M op 21-07-2009 17:19
785 views
Hoi Mensen,

Hoe krijg ik de footer op Linkje helemaal onderaan de pagina?

Hier css van footer:

#footer {
	background:#f4f4f4;
	color:#333333;
	font-size:11px;
	width:100% - 10px;
	height:50px;
	padding:5px;
	text-align:right;
	line-height:20px;	
}
T
Tamara
22-07-2009 11:26
zet de divjes header_bg en content in 1 div: container.

en haal alle code weg bij je footer en zet dit erbij:

#footer
{
	clear: both;
	width: 100%;
}


zet ook dit in je css file:

HTML, BODY
{
	width: 100%;
	height: 100%;
}
#container
{
   width: 100%;
}



het kan zijn dat je bij de container ook min-height: 100% erbij moet zetten, maar dat weet ik niet zeker.


edit: ik zie dat je position: absolute bij je footer hebt staan. hierdoor blijft ie altijd halverwege 'hangen'. gebruik deze dan ook gewoon niet voor je footer.
R
Roeltje M
22-07-2009 12:04
Bedankt Tamara! Het werkt bijna nu. Als de tekst nu korter is, dan komt de footer niet onderaan de pagina. Zie: link

Container bevat:

#container {
	height:100%;
}


Ook min-height geprobeerd, met !important er ook nog achter, maar werkt niet helaas.

html:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RijlesInOverijssel.nl</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id='container'>
    <div id='header_bg'>
        <div id='header'>
        
        </div>
		<?php
			include("includes/nav.inc.php");
		?>
    </div>
    <div id='content'>
        <h1>RijlesInOverijssel.nl</h1>
        <p>Welkom bij RijlesInOverijssel.nl! Ook altijd al zo benieuwd welke rijschool bij jou in de buurt het goedkoopst is en ook nog goede beoordelingen heeft? Dan ben je hier op het goede adres!</p>
    
    <p>RijschoolInOverijssel.nl is een initiatief van Design XTR IT Solutions om personen die een rijbewijs willen halen te ondersteunen en tegelijk de autoscholen een nieuwe mogelijkheid te geven om zichzelf in de schijnwerpers te spelen en zo meer klanten te ontvangen.</p>
    
    
    </div>
</div>
<div id='footer'>
	<div id='footercontent'>
    	<a href='#'>Algemene voorwaarden</a> | <a href='#'>Sitemap</a> | <a href='#'>Support</a><br />
Design XTR IT Solutions
    </div>
</div>

</body>
</html>
T
Tamara
22-07-2009 13:44
Ik heb wat dingen aan je CSS aangepast, en nu doet hij het:


* {
	margin: 0;
	padding: 0;
	}
HTML, BODY {
	width: 100%;
	height: 100%;
	}

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#container {
	min-height: 100%;
	height: 100%;
	margin: 0 0 -60px 0;
}
BODY > #container {
	height: auto;
}


let op dat bij de tags hierboven geen andere code blijft staan ;)

deze code (BODY > #container) zorgt ervoor dat de footer ook onderaan de pagina blijft staan in IE.

Reageren

Inloggen om te reageren