CSS: footer onderaan de pagina, ook als content klein is

Status
Niet open voor verdere reacties.
F

flbos

Gebruiker
Lid geworden
5 feb 2004
Berichten
267
Hallo,

Met onderstaande opzet dacht ik er voor te kunnen zorgen dat het gedeelte dat in de footer komt te staan altijd strak onderaan de pagina komt te staan. Op de een of andere manier zorgt de height=100% er echter voor dat de pagina langer wordt waardoor er onnodig gescrolld moet worden om de footer te kunnen zien. Als ik echter geen height=100% gebruik dan komt de footer halverwege de pagina te staan als de content niet groter is dan de hoogte van het browser window. Hoe zorg ik er nu voor dat de footer wel altijd strak onderaan staat (dus zowel bij kleine content als grote content)?

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
body { 
	margin: 2px;
	padding:0px;
	height:100%; 
}
a { color: black; }
a:visited { color: black; }
#header {
	width:100%;
	height:190px;
}
#content {
	width:770px;
	text-align:left;
	padding-left:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	height:100%;
}
#footer {
	text-align:center;
	width:770px;
	font-size:9px;
	clear:left;
}

</style>

</head>
<body>
<div id="header">
  <img src="images/Header.jpg" border="0" alt="Products" />
</div>
<div id="content">
HIER ALLE CONTENT  
</div>
<br />
<div id="footer"><a href="index.htm">home</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="profile.htm">Profile</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="contact.php">Contact</a></div>
<div id="clear">&nbsp;</div>
</body>
</html>
 
Dat zal niet meevallen.

IE en FF en Opera en Safari snappen de css niet altijd,
althans het wordt anders geinterpreteerd.

Ik gooide dit in Google:
footer at-bottom css
.. paar pagina's bekeken, doch geen afdoende oplossing gevonden.

Wens je op fora te zoeken voeg dan forum bij je zoekopdracht toe.
En kijk eens in de discussiegroepen.

:cool:
 
mmm, ik had inderdaad ook al uitgebreid via Google gezocht, maar geen goede oplossing gevonden. Ik snap het eigenlijk niet zo goed, want er zijn toch ontzettend veel pagina's met helemaal onderaan de pagina een aantal links (een soort footer dus). Ik weet zo gauw geen voorbeeld meer, maar zulke pagina's komen toch erg vaak voorbij als ik surf. Daar zullen toch ook wel pagina's bij zijn die met CSS opgebouwd zijn?
 
mischien werkt dit wel!

heb je css wat aangepast!
het is soms gewoon zoeken in welke volgorde je het allemaal zet en sommige dingen zijn zels overbodig! zoals de width in je header bv.
hoop dat het hiermee lukt!
(bij mij werkt het in alle browsers!)
(heb je divs ook een kleur gegeven: is wat overzichterlijker!):D :thumb:
grtjs gintro
en veel succes!!!

Code: 
body { 
	margin: 0; 
	padding: 0; 
	height:100%;
} 
#header { 
    	/*width:100%;*/ 
    	height:60px;
    	padding: 5px;
    	margin: 0;
    	background-color: #333;
} 
#content { 
    	width: 80%; 
    	text-align:left; 
    	padding:10px; 
    	font-family:Verdana, Arial, Helvetica, sans-serif; 
    	font-size:12px; 
    	background-color: #666;
} 
#footer { 
    	text-align:center; 
    	width: 80%; 
    	font-size:12px; 
        position: absolute;
	bottom: 0;
	background-color: #999;
	margin-left: auto;
        margin-right: auto;
}
	a { color: black; } 
	a:visited { color: black; }



[Mod-edit] Code-tag om de code geplaatst. [/edit]
 
Laatst bewerkt door een moderator:
Bedankt voor het uitgebreide antwoord, ik ga er mee aan de slag :thumb: :thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan