CSS tut - Deel 1

Hallo allemaal. Ik heb al een aantal keer een CSS tutorial beloofd, dus daar gaan we dan!

Ik kan onmogelijk alles in 1 tut stoppen, dus het wordt een vervolgverhaal. Als je wilt overstappen van een lay-out met tabellen naar een lay-out met CSS, dan is het allerbelangrijkste dat je weet hoe je elementen op een pagina op de goede plek moet krijgen.

Positioneren in CSS doe je met divs. Een div is van nature een block-level element. Block elementen beginnen op een nieuwe regel. In je HTML ken je dat wel.
Als je bijvoorbeeld een <p></p> in je code plaatst, dan begint die ook op een nieuwe regel. <p> is dus ook een block-level element.

Als je een gedeelte van een zin wilt stylen heb je dus niets aan een block-level element en daarvoor kun je beter geen div gebruiken, maar een <span>.
Een <span> is een inline-element en begint geen nieuwe regel, net als bijv <strong>, of <input>.

Je kunt de manier waarop een div geplaatst wordt, bepalen met de CSS eigenschap "position". De mogelijke waarden voor position zijn:

- static
- relative
- absolute
- fixed
- inherit

Static hoef je niet apart aan te geven, want dat is de standaardwaarde voor elk element. De positie van een element wordt bepaald door de andere elementen op een pagina en ligt dus niet vast. Als ik twee divs onder elkaar zet en de inhoud van de bovenste wordt groter, dan schuift de div daaronder omlaag.

Deze wordt vaak verkeerd begrepen. "Position relative" betekent dat de positie wordt bepaald naar aanleiding van het punt waar het element normaal gesproken verschenen zou zijn als de position static zou zijn geweest. Als ik dit doe:

#mijndiv {
position: relative;
top: 10px; /* de afstand tot de top */
left: 10px; /* de afstand tot de linkerkant */
}

dan verschijnt de div met id "mijndiv" 10 pixels lager en meer naar rechts dan hij normaal gesproken zou zijn verschenen. Als je alleen dit doet:

#mijndiv {
position: relative;
}

verschijnt hij op dezelfde plek als anders. Wat heeft het dan voor nut? Als bepaalde pagina-elementen in Internet Explorer niet verschijnen wil het vaak helpen om de position op relative te zetten. Een ander nut is dat het gebruiken van relative gevolgen heeft voor de elementen binnenin die div die op position: absolute; staan. Hierover zometeen meer.

position: absolute;
hiermee haal je een element uit de "document-flow", zoals dat heet. Je kunt het vergelijken met knikkers in een schaal. Als je er ééntje uit tilt, rollen de overgebleven knikkers naar een andere plek en de nieuwe kun je op elke plek houden boven de rest. Dit lijkt in eerste instantie perfect, want je zou zeggen: geef
al mijn divs een position: absolute. Dan kan ik precies bepalen op welke plek mijn divs verschijnen.

Toch werkt dat niet altijd. Een voorbeeld:
Je hebt een pagina die uit twee delen bestaat: header en content. Twee divs dus, #header en #content. Nou wil ik dat de content op 100 pixels van de bovenkant
af geplaatst wordt, dus ik doe:

#content {
position: absolute;
top: 100px;
}

Dit werkt keurig in alle moderne browsers, maar heeft een nadeel. Als de headerdiv te groot wordt schuiven de header en de content over elkaar heen. Ook als je zorgt dat er niet teveel tekst in de headerdiv staat, kan de gebruiker bijvoorbeeld het lettertype groter maken. Dit los je op door relative en absolute te combineren.

We gaan position absolute iets nuanceren. Het kan twee dingen betekenen.

1) ten opzichte van het browser-venster (lees: de html tag)
2) ten opzichte van het element waarin hij zich bevindt, als dat element als position een van de volgende waarden heeft: relative, absolute of fixed

Met andere woorden: als ik div1 met position absolute in div2 met position relative stop, is de positie van div1 afhankelijk van div2. In het voorbeeld hierboven zou
je het dus zo kunnen aanpakken:

#container {
position: relative;
}
#content {
position: absolute;
top: 3px;
left: 3px;
}

<div id="header">
<div id="container">
<div id="content">
</div>
</div>
</div>

Als de header om de een of andere reden groter wordt, verschuift de container (relative) daaronder mee en de content (absolute) ook, aangezien hij zich in een div met position relative bevindt (container).

een div met position fixed blijft altijd op dezelfde plek op het scherm staan, onafhankelijk van andere elementen. Goed te gebruiken voor footers bijvoorbeeld. Die wil je altijd onderaan je scherm.

#footer {
position: fixed;
bottom: 0px;
}

Helaas ondersteunt Internet Explorer fixed niet. In feite worden heel veel dingen door IE niet ondersteund en daarvoor zijn een aantal oplossingen.
Eén van de oplossingen heet Conditional Comments. Voorbeeld:

<!--[if IE]>
<style type="text/css">
p {
color: #f00;
}
</style>
<![endif]-->

Deze code zorgt ervoor dat teksten in een <p> in IE rood worden en in andere browsers niet. Op die manier kun je dus CSS maken die alleen voor IE geldt.
Je kunt bijvoorbeeld een CSS bestand alleen in IE includen:

<!--[if IE]>
<link href="ie.css" type="text/css">
<![endif]-->

Je kunt je CSS ook toespitsen op één bepaalde IE versie:

<!--[if IE 5.5]>

of op versie 5.5 en hoger:

<!--[if IE gte 5.5]>

"gte" staat hier voor "greater than or equal"

Tot zover het eerste deel van de CSS tutorial. Ik heb bewust de basics behandeld, omdat ik vind dat het belangrijk is dat je die doorhebt voordat je in het wilde weg met divs aan de gang gaat en maar hoopt dat alles goed komt. Met alleen deze tut zul je nog geen kant en klare lay-outs kunnen maken met een header, een sidebar-menu en een content en een footer, maar ik hoop dat je wel een beeld hebt gekregen van de begrippen relative, absolute en fixed.

De volgende keer wil ik het hebben over CSS shorthands. Dat zijn codes waarin je in één keer een hele reeks eigenschappen kunt definiëren.

Een voorproefje:

p {
font-family: verdana;
font-size: 12px;
line-height: 18px;
font-weight: bold;
font-style: italic;
}

kan ook zo:

p {
font: italic bold 12px/18px verdana;
}

tot de volgende keer!

Jan Koehoorn

p.s. deze tut is voor het grootste deel gebaseerd op hoofdstuk 9 van "CSS Hacks & Filters" van Joseph W. Lowery.