|
|
|
|
|
|
|
|
|
|
|
: Blog : -Cross browser footer - bottom of screen OR after text if longer (CSS based)
Klik op een afbeelding om deze te openen
Een 'simpel' probleempje, dat standaard nog niet zo simpel op te lossen is, toch zeker niet als je wenst dat de code cross browser compatibel is EN je geen JavaScript wenst te gebruiken, dus enkel HTML en CSS based. Maar het is dus wel zeker mogelijk, na wat zoeken ![[blink]](images/fix/forum/emoticons/knipoog.gif)
Het probleem: je hebt je website en je wil onderaan de pagina een footer plaatsen. Met onderaan wil je dat als de tekst niet heel de pagina vult, de footer aan de onderrand van het scherm hangt en als de tekst langer is dan het scherm, de footer onderaan de tekst blijft.
In Mozilla simpel op te lossen: 'position: fixed' en je bent er, maar Internet Explorer werkt hier weer anders... Dus een andere oplossing dan maar. Hierbij maak je gebruik van een extra 'wrapper', een extra element die je rond je inhoud plaats. De wrapper is echt wel nodig en de body kan niet als wrapper gebruikt worden. Let er dus op dat je footer dus buiten de wrapper is Hierbij de code om dit te verwezenlijken. Hopelijk heb je er iets aan!
<html >
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -44px; /* -44px being the size of the footer */
}
.footer {
height: 44px;
}
.content{
padding-bottom: 54px; /*54px being the size of the footer + the desired padding size*/
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">content</div>
</div>
<div class="footer">footer</div>
</body>
</html>
Categorieën: Webprogrammatie
Blog gemaakt op: 03/02/2010
Blog laatst gewijzigd op: 03/02/2010
Aantal keer bekeken: 265
: Reacties :
- Er zijn nog geen reacties!
|
: Laatste blogs :
|
|
|
|
|
|
|
|
|
© 2007 - 2010 Dennis Vermaut - Sitemap - Disclaimer - Contact
Geoptimaliseerd voor resoluties van 1024*768 of meer
|
