Smoelenboek

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

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Eigenlijk is het maken van een smoelenboek maar een excuus. Een excuus om een paar zaken nog eens de revue te laten passeren en om iets nieuws aan de orde te stellen.

We gaan gebruik maken van een definition list en van floating elements.
Beide zaken zijn in deze tutorials al eens aan de orde geweest. Als je dat eerst nog eens na wilt lezen kun je hier meer lezen over de definition list en hier kun je meer lezen over floating elements

Daarnaast wil ik het eens hebben over het ophalen van gegevens uit een database. Niet dat ik hier ga uitleggen hoe dat werkt, maar ik wil wel laten zien aan degenen die al weten hoe dat werkt dat je gecompliceerde en dynamische websites prima kunt opbouwen met mooie strakke html en css.
Hierover later meer. Nu eerst maar eens aan de slag.

Ik heb ervoor gekozen om het smoelenboek op te bouwen uit een onderdeel met een ospomming van alle "smoelen" om vervolgens via een ankerlinkje te kunnen doorklikken naar de detail informatie per "smoel".
Dus eerst maar eens de opsomming van de "smoelen"

Ik heb besloten de opsomming van de "smoelen" te doen in de vorm van pasfoto's die ik in een blok bij elkaar wil groeperen. Daarom zet de foto's alvast in een container div. Verder zet ik er alvast de ankerlinkjes omheen en voorzie ik die linkjes van een kleine opmaak:

CSS: #container{
float: left;
border: 1px solid #000;
width: 417px;
margin: 50px 0 20px 100px;
padding: 3px;
}

/* ie begrijpt de combinatie van margins en floating elements niet dus bij deze de hack: */
* html #container{
margin: 25px 0 5px 50px;
}

#container a:link, #container a:visited{
display: block;
float: left;
width: 100px;
height: 100px;
margin: 1px;
border: 1px solid #FCC8C8;
}

#container a:hover, #container a:active{
display: block;
float: left;
width: 100px;
height: 100px;
margin: 1px;
border: 1px solid #E20000;
}

/* dit heeft ie nodig anders geeft hij een bottom-pading (??!!??) aan het omsluitende a element */
#container img{
float: left;
}
HTML: <div id="container">

<a href="#ab">
<img src="100x100/ab_van_der_laak.jpg" width="100" height="100" alt="Ab van der Laak" title="Ab van der Laak" border="0" />
</a>

<a href="#clavan">
<img src="100x100/dr_remco_clavan.jpg" width="100" height="100" alt="Dr. Remco Clavan" title="Dr. Remco Clavan" border="0" />
</a>

<a href="#jacobse">
<img src="100x100/f_jacobse.jpg" width="100" height="100" alt="F. Jacobse" title="F. Jacobse" border="0" />
</a>

<a href="#frank">
<img src="100x100/frank_van_putten.jpg" width="100" height="100" alt="Frank van Putten" title="Frank van Putten" border="0" />
</a>

<a href="#temmes">
<img src="100x100/ge_en_arie_temmes.jpg" width="100" height="100" alt="G&eacute; en Arie Temmes" title="G&eacute; en Arie Temmes" border="0" />
</a>

<a href="#walter">
<img src="100x100/ir_walter_de_rochebrune.jpg" width="100" height="100" alt="Ir. Walter de Rochebrune" title="Ir. Walter de Rochebrune" border="0" />
</a>

<a href="#koos">
<img src="100x100/koos_koets.jpg" width="100" height="100" alt="Koos Koets" title="Koos Koets" border="0" />
</a>

<a href="#robbie">
<img src="100x100/robbie_kerkhof.jpg" width="100" height="100" alt="Robbie Kerkhof" title="Robbie Kerkhof" border="0" />
</a>

<a href="#tedje">
<img src="100x100/tedje_van_es.jpg" width="100" height="100" alt="Tedje van Es" title="Tedje van Es" border="0" />
</a>

</div>

bekijk het resultaat

Je ziet dat de foto's automatisch uitlijnen. Vier op een rij, dan de volgende rij. Dit komt natuurlijk omdat de div een harde breedte heeft van 417px. De vijfde foto en de negende en dertiende enz. worden naar een nieuwe regel gedwongen.
Lijkt alsof ze in een tabel staan.

Nog maar weer eens Internet Explorer

Verder zie je twee comments in de css staan die allebei te maken hebben met eigenaardigheden van Internet Explorer. Het zijn van die dingen die je vanzelf gaat tegenkomen als je werkt met css voor het positioneren van je elementen.
In het eerste geval is het zo dat IE margins van floatende elementen verdubbeld. Dus als je een element floatend maakt en dit element een linker margin van 20px geeft dan denkt IE: "Ach, kom laat ik daar eens 40px van maken."
dat moet dus rechtgezet worden door die hack

Het tweede gevalletje van IE wartaal is het feit dat ik de afbeeldingen die omsloten worden door een floatend a element ook floatend moet maken omdat IE anders het a element een bottom margin van een pixel of 6-7 geeft.
Misschien vraag je jezelf af, hoe weet hij nou dat hij dat probleem moet oplossen door ook die afbeelding floatend te maken? Het antwoord is simpel: dat weet ik niet. Ik zit mezelf te pletter te proberen tot ik een oplossing gevonden heb.......net als jij.

Op deze manier blijven we wel lekker bezig met z'n alle. Dus dat is fijn.
Ik werk als front end developer bij Mirabeau. Ik kost daar een heleboel Euries per uur. Ik vraag mezelf wel eens af hoeveel uren er wereldwijd extra worden besteed aan het bouwen van websites alleen maar vanwege het feit dat IE niet standard compliant is? En hoevel geld zou dat kosten?
Ik durf te wedden honderden miljoenen............extra dus.........teveel dus.......onnodig.........pfff......

Wij herpakken onszelf

Ik ga eerst even verder met de structuur van het hele ding. Dat wil dus zeggen, als je op een van die foto's klikt moet je natuurlijk ergens naartoe doorgelinkt worden. Naar de uitleg en details die horen bij die persoon.
Die opsomming ga ik zetten in een definition list, een dl. Op deze manier:

CSS: dl{
width: 423px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 50px 0 0 100px;
padding: 0;
clear: left;
}

dt{
border: solid #FCC8C8;
border-width: 1px 1px 0 1px;
padding: 10px 10px 0 10px;
background: #F6F5F5;
}

dd{
margin: 0 0 20px 0;
padding: 0 10px 10px 10px;
border: solid #FCC8C8;
border-width: 0 1px 1px 1px;
background: #F6F5F5;
}

dt span{
position: relative;
left: 10px;
bottom: 120px;
font-family: Georgia, "Times New Roman", serif;
font-size: 160%;
font-weight: bold;
color: #CA0101;
}

dt img{
border: 1px solid #FCC8C8;
}
HTML: <dl>
<dt id="ab">
<img src="ab_van_der_laak.jpg" width="125" height="150" alt="Ab van der Laak" />
<span>Ab van der Laak</span>
</dt>
<dd>Weinig spraakzame zoon van Cor en Cock van der Laak.</dd>

<dt id="clavan">
<img src="dr_remco_clavan.jpg" width="125" height="150" alt="Dr. Remco Clavan" />
<span>Dr. Remco Clavan</span>
</dt>
<dd>Oost Europa deskundige: "Zelfs ik weet het niet, kun je nagaan!"</dd>

<dt id="jacobse">
<img src="f_jacobse.jpg" width="125" height="150" alt="F. Jacobse" />
<span>F. Jacobse</span>
</dt>
<dd>Legendarische mede-oprichter van De Tegenpartij en importeur van 'neutronenkorrels'</dd>

<dt id="frank">
<img src="frank_van_putten.jpg" width="125" height="150" alt="Frank van Putten" />
<span>Frank van Putten</span>
</dt>
<dd>Gefrustreerde zoon van Moeder: "Nee moeder, dat wil ik helemaal niet. Ik wil een geile vriendin in lekkere lingerie."</dd>

<dt id="temmes">
<img src="ge_en_arie_temmes.jpg" width="125" height="150" alt="G&eacute; en Arie Temmes" />
<span>G&eacute; en Arie Temmes</span>
</dt>
<dd>Beroemde broers uit de "Wo is der Bahnhof" legende.</dd>

<dt id="walter">
<img src="ir_walter_de_rochebrune.jpg" width="125" height="150" alt="Ir. Walter de Rochebrune" />
<span>Ir. W. de Rochebrune</span>
</dt>
<dd>Leeft in het tuinhuis van zijn moeder met wie hij in onmin leeft. Al jaren.</dd>

<dt id="koos">
<img src="koos_koets.jpg" width="125" height="150" alt="Koos Koets" />
<span>Koos Koets</span>
</dt>
<dd>Mede-oprichter van Stichting Moorkop. Komt op voor de belangen van de oudere jongeren.</dd>

<dt id="robbie">
<img src="robbie_kerkhof.jpg" width="125" height="150" alt="Robbie Kerkhof" />
<span>Robbie Kerkhof</span>
</dt>
<dd>Mede-oprichter van Stichting Moorkop. Goeoeoeoeoehoeoeoed!</dd>

<dt id="tedje">
<img src="tedje_van_es.jpg" width="125" height="150" alt="Tedje van Es" />
<span>Tedje van Es</span>
</dt>
<dd>Mede-oprichter van De Tegenpartij. Fanatiek lid van motorclub WODAN (Wij Ontspannen Door Alleen Natuur).</dd>
</dl>

bekijk het resultaat

Er gebeuren niet zoveel spannende dingen hierboven. Ik maak de boel een beetje op en geef het wat kleur. Daarnaast maak ik ruimschoots gebruik van margin en padding om ruimte te maken voor de verschillende elementen.
Wat misschien nog de moeite van het noemen waard is, is de relatieve positionering van de span in de dt. Als je jezelf afvraagd wat daar precies gebeurt kun je hier meer lezen over het relatief positioneren van elementen.

Wat we nu nog moeten is de beide delen samenvoegen om zo het smoelenboek compleet te maken.
Ik ga niet alle html en css nog eens in een voorbeeld onder elkaar zetten. Het is makkelijk genoeg:

En dit is het resultaat.

Databases en standard compliant html en css

Als je een beetje verstand hebt van het gebruik van databases en een server side scripting taal zoals PHP dan begrijp je dat zo'n smoelenboek als ik hier gemaakt heb meestal niet statisch is maar uit een database komt.
Als je goed naar de html en css kijkt die ik in dit voorbeeld gebruikt heb zul je zien dat dat geen enkel probleem is. Sterker nog, door het ontbreken van een tabel zal het voor en programmeur alleen maar eenvoudiger worden om de inhoud van de database in de pagina te laten lopen.

Goede HTML en CSS en het scheiden van structuur en presentatie aan de ene kant en dynamisch opgebouwde websites of websites die hun inhoud krijgen vanuit een database anderzijds hoeven elkaar niet te bijten.
Ze kunnen elkaar prima ondersteunen, aanvullen en versterken.

naar het begin van de pagina