XHTML deel 3 – Nog meer over CSS
Bob Broen |
2007-04-04 |
Webdesign
In het volgende voorbeeld is een HTML-pagina te zien waarin de opmaak geheel met CSS geregeld is. Er is een tweekolommen-indeling, gecentreerd op de pagina. Plak deze code in een bestand en noem dit voorbeeld3.html. Dit bestand kun je openen in je browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>XHTML gebruiken - deel 3</title>
<style type="text/css">
body { text-align: center; }
#pagina {
width: 900px;
margin: 10px auto 10px auto;
padding: 0px;
text-align: left; }
#inhoud {
width: 650px;
float: left; }
#zijbalk {
width: 250px;
float: left;
padding: 0 0 30px 0;
background: #FFFFBB; }
#kop {
margin: 0 0 10px 0;
background: yellow;
border-bottom: 6px solid blue; }
#voetnoot {
border-top: 1px solid blue;
margin-top: 10px;
clear: both; }
p, h2, h3 { margin: 10px 30px 10px 30px; }
h2, h3 { font-family: Arial, "MS Trebuchet", sans-serif; }
#zijbalk p {
font-size: 85%;
font-family: Arial, "MS Trebuchet", sans-serif; }
</style>
</head>
<body>
<div id="pagina">
<div id="kop"><h2>XHTML gebruiken - deel 2</h2></div>
<div id="inhoud">
<h3>Pagina-opmaak met CSS</h3>
<p>Dit is een voorbeeldpagina waarin alle opmaak geregeld is met CSS,
zelfs de pagina-indeling. Het is mogelijk om het gehele uiterlijk te
vervangen, zonder de HTML-code aan te passen. Een extreem voorbeeld
hiervan is CSS Zengarden. Op deze site is de HTML op elke pagina gelijk,
alleen de CSS is verschillend.</p>
<p>Op de site van W3.org kun je je code laten controleren. Deze controle
kan strenger zijn dan nodig is, maar is een goed hulpmiddel bij het
aanleren van HTML en CSS.</p>
</div>
<div id="zijbalk">
<h3>Links</h3>
<p>
<a href="http://www.csszengarden.com/">CSS Zengarden</a><br/>
<a href="http://validator.w3.org/">W3.org</a><br/>
</p>
</div>
<div id="voetnoot"><p><strong>Zet hier je naam en de datum
neer.</strong></p></div>
</div>
</body>
</html>
Eerst laten we de CSS buiten beschouwing en kijken we naar de HTML-opmaak. Elke samenhangende groep elementen is omringd door 'div'-tags, net als in deel 2. De 'div'-tags zelf zijn ook weer omsloten door een set 'div'-tags, hiermee hebben we nog meer controle over de opmaak van de pagina.
De 'div'-tags zijn nu voorzien van een 'id' in plaats van een 'class'. Het grote verschil is dat een id wijst naar precies één element op de pagina en dat een class gebruikt kan worden voor meerdere elementen. Er mogen dus geen twee voetnoten zijn.
Oefening: Haal alle CSS-code eens weg en bekijk de pagina dan.
Als we kijken naar de CSS-code, dan zie je dat het body-element werkt met een gecentreerde tekst; dit helpt om de pagina in het midden te krijgen. Bij sommige browsers is deze extra stap nodig.
De opmaak voor "#pagina" dicteert een breedte van 900 pixels. De marge (de extra ruimte buiten het div-blok) staat op '10px auto 10px auto', dat wil zeggen 10 pixels erboven, rechts automatisch verdelen, 10 pixels onder en links ook automatisch verdelen. Oftewel: centreren met 10 pixels extra ruimte.
De padding (vulling tussen het div-blok en de rand) staat op '0px'. Als 'pagina' een vulkleur zou hebben, dan krijgt padding deze kleur. Let wel op dat padding op 0 staat als je width gebruikt; sommige browsers hebben afwijkende ideeën over wat padding is. En dat kan je opmaak behoorlijk in de war schoppen als de breedte belangrijk is.
Als laatste wordt de uitlijning van de tekst weer op links gezet voor alle onderliggende elementen:
De "#inhoud" zweeft (float) aan de linkerzijde (left) van de pagina en heeft een breedte van 650 pixels.
De "#zijbalk" zweeft daarnaast en heeft een breedte van 250 pixels. Ik heb eerder gezegd dat je geen padding mag gebruiken in combinatie met de breedte, maar wat extra ruimte onder de zijbalk verstoort de breedte niet. De volgorde van de getallen is 'boven rechts onder links'. De achtergrondkleur is hier gezet op #FFFFBB, een lichte kleur geel.
Dat waren de onderdelen die belangrijk zijn voor de indeling van de pagina.
Het "#kop"-element geeft wat extra ruimte aan de onderzijde van zijn blok, het zet de achtergrondkleur op geel en plaatst een rand aan de onderzijde van het blok. Deze rand is 6 pixels groot, aaneengesloten en heeft een blauwe kleur. Het "#voetnoot"-element heeft een blauwe rand aan de bovenzijde.
Wat opvalt aan de "#voetnoot" is de opdracht 'clear: both'. Dit geeft aan dat "#voetnoot" zich niet mag aanpassen aan de bovenliggende zwevende elementen. Zonder deze opdracht zou de voetnoot verkeerd geplaatst kunnen worden. Het eerste element dat onder een (of meerdere) floats komt, moet deze opdracht uitvoeren.
Met het element "#zijbalk p" wordt bedoeld alle paragrafen (het 'p'-element) binnen het element "#zijbalk".
De rest van de opmaak sluit aan bij het vorige deel. Misschien is het je al opgevallen dat de standaardgrootte van de fonts overgelaten wordt aan de browser. Er zijn meerdere redenen om dit te doen, maar alleen als de opmaak het toelaat. Het is namelijk niet te voorspellen hoe groot de tekst zal zijn in combinatie met verschillende browsers en gebruikersinstellingen.
Oefening: Plaats de zijbalk links van de inhoud.
Vermijd zoveel mogelijk het gebruik van frames en tabellen bij het opmaken. Frames zijn een noodgreep die je gebruikt om meerdere pagina's te organiseren waardoor informatie weergegeven kan worden op één pagina. Tabellen zijn een praktische oplossing voor het presenteren van gegevens op een gestructureerde manier.
In het volgende deel van Web Succes Magazine gaan we afbeeldingen toevoegen.
