Fixed header.

Bron: http://www.sceneone.nl/tips_tricks/fixed_header.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

In deze tutorial wil ik de mogelijkheid om een bepaald element van je website te fixeren bespreken.
En dan bedoel ik niet zomaar fixeren, maar echt vastzetten op een manier die doet denken aan een frameset. Op een manier dat andere content van je pagina onder het gefixeerde element door scrolled.

Bezint eer gij begint

Voor we beginnen wil ik nog wel even het volgende kwijt. Wat we gaan doen is voor Firefox een koud kunstje, Firefox begrijpt meteen wat we willen en voert het goed uit. Daar hoeven we geen rare toeren voor uit te halen.
Internet Explorer echter (je voelt hem al aankomen) snapt het allemaal niet helemaal en daar moeten we echt hele rare fratsen uithalen om hem aan z'n verstand te peuteren wat we bedoelen. Of eigenlijk is het maar één rare frats die we moeten uithalen en daarna een paar, op zich valide notaties, speciaal voor IE in ons stylesheet.
De rare frats is deze: we moeten IE in quirks mode dwingen. Op zich is dat heel eenvoudig, maar als je iets meer weet over quirks mode begrijp je dat het wel heel raar is.

Consequenties

We moeten IE dus gaan vertellen dat hij zichzelf als een ouderwetse browser moet gedragen (want dat is quirks mode). En dat is natuurlijk raar. Iedereen (in ieder geval iedere webdesigner/webdeveloper die ik ken) is blij dat we bijna af zijn van de gedragingen van bijvoorbeeld IE 5.x en nu gaan wij IE 6.x vertellen: "Ga jij jezelf maar eens gedragen zoals dat jongere klote broertje van je."
Nou ja, dat gaan we dus doen. en dat doen we door voor de doctype declaratie, helemaal bovenin de pagina een eenvoudige comment te zetten. Het maakt niet uit wat je daar zet als er maar iets staat. Dan schiet IE vanzelf in quirks mode.

Dit alles heeft de vervelende consequentie dat alle code in die pagina gerenderd zal worden in quirks mode. Een voorbeeld van wat dit kan betekenen vind je hier.

Nog even....

Tot slot nog even het volgende en dan gaan we echt beginnen.
Er zijn bepaalde zaken in de code hieronder waar ik niet dieper op in zal gaan en die ik niet verder zal uitleggen. Jij zult dan misschien denken waarom legt ie dat nou niet even uit.
Het antwoord hierop is simpel: omdat ik het zelf ook niet weet.

Ik heb bijvoorbeeld nog geen verklaring gegeven over de redenen waarom je IE in quirks mode zou moeten dwingen.
Waarom werkt dat?
En hoe gaat dat dan precies?
Ik heb geen idee.......sommige dingen neem ik voor kennisgeving aan en verder laat ik het maar.

Daar gaatie

Eerst gaan we maar eens kijken hoe eenvoudig het leven is als je alleen rekening houdt met Firefox.
Later bouwen we het geheel om naar iets wat ook werkt in IE. Maar nu doen we nog even alsof het leven van een webdesigner over rozen gaat:

CSS: body{
margin: 0;
font-family: Verdana, sans-serif;
font-size: 0.8em;
}

div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #CCC;
}

div#content{
padding: 110px 20px 0 20px;
}
HTML: <div id="header">HEADER</div>

<div id="content">
<p>een heleboel tekst</p>

<p>en nog meer tekst</p>

<p>en nog een paragraaf met tekst</p>

<p>en de laatste met een heleboel tekst erin</p>
</div>

bekijk het resultaat (in Firefox)

Zo eenvoudig is het dus, niets aan de hand. Dat wil zeggen in Firefox. Als je het bovenstaande voorbeld bekijkt in Internet Explorer gaat er van alles fout. Maar daar komen we later op.

Hoe en wat?

Wat gebeurt er nu eigenlijk in het bovenstaande voorbeeld?
Nou, eigenlijk niet zoveel dus. Om te beginnen met de header box, die heeft een position: fixed. Daarmee wordt hij uit de flow van de pagina gehaald. Position fixed is eigenlijk een variant op position: absolute. Die header staat dus gewoon op de coördinaten x=0 en y=0. Verder valt er niets over te melden.

Dan is er nog de declaratie voor de content div. De padding zorgt ervoor dat de inhoud van die box op de juiste plaats valt. Die top-padding van 110px is er om ruimte te maken voor de header en ervoor te zorgen dat de content (in dit geval die paragrafen met de tekst) niet onder de header schiet.
Verder is er sprake van een gewone XHTML pagina, dus geen quirks mode. Dat komt later als we IE erbij gaan betrekken.

Laten we het voorbeeld wat verder uitbreiden. Waarom zouden we het alleen bij een header houden als we toch bezig zijn. We maken er een rechter kolom bij:

CSS: body{
margin: 0;
font-family: Verdana, sans-serif;
font-size: 0.8em;
}

div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #CCC;
z-index: 100;
}

div#kolom_rechts{
position: fixed;
top: 0;
right: 0;
width: 200px;
height: 100%;
padding: 110px 0 0 0;
background-color: #F60;
z-index: 0;
}

div#content{
padding: 110px 220px 0 20px;
}
HTML: <div id="header">HEADER</div>

<div id="kolom_rechts">RECHTER KOLOM</div>

<div id="content">
<p>een heleboel tekst</p>

<p>en nog meer tekst</p>

<p>en nog een paragraaf met tekst</p>

<p>en de laatste met een heleboel tekst erin</p>
</div>

bekijk het resultaat (in Firefox)

z-index?

Dat gaat lekker. Lijkt wel een frameset.......maar dan toch anders.
Het enige wat het benoemen waard is, is het gebruik van de z-index. Je kunt de z-index gebruiken om de volgorde van de div's te bepalen. Zeg maar de volgorde waarin ze op elkaar gestapeld worden.

De regel is dat hoe hoger de z-index, hoe hoger een div in de hierarchie komt. Die div komt dus bovenop te liggen. In het geval van ons voorbeeld heeft de header box een z-index van 100 en de rechter kolom een z-index van 0.
De header komt dus bovenop te liggen. Precies waar ik 'm hebben wil.

Je ziet hoe eenvoudig het is om op deze manier een frameset te faken. Met eenvoudige code, mooi schoon en strak. Just the way we like it!
Maar nu komt dus Internet Explorer roet in het eten gooien.
Om te beginnen moeten we dus die browser in quirks mode krijgen. Dat ziet er in de html van je pagina zo uit:

HTML: <!-- IE in quirks mode -->
<!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">

Bovenstaande code is dus het begin van je pagina.
De comment <!-- IE in quirks mode --> zorgt ervoor dat IE in quirks mode gaat. Maar daar had ook <!-- Ik ben een pindarotsje en geen droplul! --> mogen staan. Maakt niet uit, als er maar iets staat. Volgens mij is zelfs een witregel goed, maar dat weet ik niet zeker.

Daar beginnen we dus mee, IE naar quirks mode.
En dan moeten er een paar stijldeclaraties aan de CSS toegevoegd worden die alleen voor IE bestemd zijn. Firefox mag deze niet zien anders raakt FF weer van de kook.
We gaan dus een hack gebruiken waardoor alleen IE de stijldeclaraties oppikt en FF ze negeert:

CSS: body{
margin: 0;
font-family: Verdana, sans-serif;
font-size: 0.8em;
}

div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #CCC;
z-index: 100;
}

div#kolom_rechts{
position: fixed;
top: 0;
right: 0;
width: 200px;
height: 100%;
padding: 110px 0 0 0;
background-color: #F60;
z-index: 0;
}

div#content{
padding: 110px 220px 0 20px;
}

/* IE only */

* html body{
overflow: hidden;
padding: 100px 200px 0 0;
}

* html div#header{
position: absolute;
}

* html div#kolom_rechts{
position: absolute;
}

* html div#content{
height: 100%;
overflow: auto;
padding: 10px 20px 0 20px;
}
HTML: <div id="header">HEADER</div>

<div id="kolom_rechts">RECHTER KOLOM</div>

<div id="content">
<p>een heleboel tekst</p>

<p>en nog meer tekst</p>

<p>en nog een paragraaf met tekst</p>

<p>en de laatste met een heleboel tekst erin</p>
</div>

bekijk het resultaat (in Firefox én Internet Explorer)

Eerst even kort over de hack (binnenkort schrijf ik vast een tutorial over css hacks). Ik zet dus voor iedere declaratie: * html Alles wat dan in die declaratie volgt wordt alleen door IE opgepikt, andere browsers negeren het.

Belangrijkste verschillen

Er zijn 2 belangrijke zaken die je IE moet vertellen zodat hij het begrijpt. Ten eerste begrijpt IE de waarde 'fixed' niet voor de declaratie 'position'. Dus maken we daar voor IE 'absolute' van.
Verder moeten we de scrollbalk van de 'body' uitzetten (overflow: hidden), om vervolgens de scrollbalk van de box 'content' weer aan te zetten (overflow: auto). Meer over de eigenschap overflow lees je hier.

Ik schuif ook nog wat met margins en paddings. Als je daardoor van de wijs gebracht wordt moet je het onderdeel over margins en paddings (nog) eens doornemen.

naar het begin van de pagina