Allereerst moet er natuurlijk mark-up voor bedacht worden, en die is (zoals bijna altijd) erg logisch. Je hebt een kop "Software updates", en vijf links die op volgorde van tijd zijn gesorteerd. Voor de kop moeten we even kijken bij welk nummertje we zijn aangeland: Tweakers.net → meuktracker → Software updates. <h3> dus. Voor het lijstje links gebruiken we een <ol>, wat staat voor ordered list, omdat de volgorde daarvan aflopend is: op tijd gesorteerd.
<div> <h3><a href="meuktracker/cat/77">Software updates</a></h3> <ol> <li><a href="meuktracker/4827" title="07-10-2003 13:53 - CloneDVD 1.3.9.8">CloneDVD 1.3.9.8</a></li> <li><a href="meuktracker/4826" title="07-10-2003 13:46 - 7-Zip 3.11">7-Zip 3.11</a></li> <li><a href="meuktracker/4824" title="06-10-2003 21:32 - ZoneAlarm 4.0.196 beta">ZoneAlarm 4.0.196 beta</a></li> <li><a href="meuktracker/4823" title="06-10-2003 12:24 - Alcohol 120% 1.4.7.1005">Alcohol 120% 1.4.7.1005</a></li> <li><a href="meuktracker/4822" title="05-10-2003 20:56 - DRU-510A en DRX-510UL Speed Selector">DRU-510A en DRX-510U...</a></li> </ol> </div>
Ofwel:
Allereerst stellen we de kleuren in van links: in de koppen moet een link rood zijn, in de lijstjes met 'meuk' dienen ze zwart te zijn, totdat je er met de muis overheen beweegt, dan moeten ook deze rood worden.
#meuktracker h3 a { color: #AE0009; } #meuktracker li a { color: black; } #meuktracker li a:hover { color: #AE0009; }
Welke is samen te vatten tot:
#meuktracker li a { color: black; } #meuktracker li a:hover, #meuktracker h3 a { color: #AE0009; }
Verder willen we géén stip voor de lijstitems, en moeten ze net zo min worden ingesprongen als gewone tekst. Hiervoor gebruiken we respectievelijk de list-style- en margin-property. Hiervoor gebruiken we de volgende code:
#meuktracker ol { list-style: none; margin: 0; }
Maar omdat margin niet het gewenste effect heeft in Mozilla (er gebeurt namelijk niks), voegen we padding: 0; toe.
#meuktracker ol { list-style: none; margin: 0; padding: 0; }
De lettergrootte klopt nog niet, want deze willen wij voor zowel de kop als de lijstitems op 11px instellen:
#meuktracker h3, #meuktracker li { font-size: 11px; }
Bovendien dient er geen witruimte aanwezig te zijn tussen de kop en het onderstaande lijstje, waarop we de marge aan de onderkant van onze header op 0 instellen. Bij een hoeveelheid 0 is de eenheid natuurlijk overbodig. Wel is er een witruimte gewenst tussen de een kop en een eventueel bovenstaand lijstje, ofwel: er dient een witruimte te komen tussen de verschillende trackers. Hiertoe stellen we de marge aan de bovenkant van de header in op 10px.
#meuktracker h3 { margin-bottom: 0; margin-top: 10px; }
Welke verkort kan worden geschreven, omdat de property margin de volgende notatie kent: margin: top right bottom left; Vullen we voor top 10px in, voor bottom 0, en voor right en left auto, dan krijgen we het volgende:
#meuktracker h3 { margin: 10px auto 0 auto; }
Wat we nu nog willen is de achtergrondplaatjes, en dat is zo gebeurd, want we hoeven aan de vorige selector van de headers enkel de background-property toe te voegen.
#meuktracker h3 { margin: 10px auto 0 auto; background: url(../images/meuktracker/header.png); } #meuktracker li { background: url(../images/meuktracker/field.png); }
De verwijzing is relatief ten opzicht van het CSS-bestand, welke in /data/styles/ staat. De plaatjes staan allemaal geordend in /data/images/.
Zoals je ziet zijn we nog niet klaar: de kop en de lijstitems moeten nog de hoogte overnemen van achtergrondplaatjes:
#meuktracker h3 { margin: 10px auto 0 auto; background: url(../images/meuktracker/header.png); height: 22px; } #meuktracker li { background: url(../images/meuktracker/field.png); height: 21px; }
En ook de breedte van het geheel stellen we in met:
#meuktracker div { width: 150px; }
Het enige wat ons nu nog resteert is de tekst positioneren, zowel horizontaal als verticaal, waarvoor we respectievelijk padding en line-height zullen gebruiken. Verticaal gezien willen we de tekst in het midden hebben, hetgeen het makkelijkst bereikt kan worden door de regelhoogte even groot in te stellen als de hoogte van het item, dus op 21px. (Je zult denken dat de kop 1 pixel scheelt, maar het toeval wil dat de verschuiving halve pixel naar beneden wordt afgerond.) Horizontaal gezien willen we de content ietsjes inspringen, laten we zeggen, 5px
#meuktracker h3, #meuktracker li { font-size: 11px; line-height: 21px; padding-left: 5px; }
#meuktracker li a { color: black; } #meuktracker li a:hover, #meuktracker h3 a { color: #AE0009; } #meuktracker ol { list-style: none; margin: 0; } #meuktracker h3, #meuktracker li { font-size: 11px; line-height: 21px; padding-left: 5px; } #meuktracker h3 { margin: 10px auto 0 auto; background: url(../images/meuktracker/header.png); height: 22px; } #meuktracker li { background: url(../images/meuktracker/field.png); height: 21px; } #meuktracker div { width: 150px; }
Omdat het plaatje field.png in feite header.png minus de eerst rij pixels is, kunnen we beter één-en-hetzelfde plaatje gebruiken als achtergrond, zij het dat het de achtergrond bij lijstitems een pixel omhoog (buiten het zicht) verschoven moet worden. Eerst stellen we daartoe voor beide de background-image in, en vervolgens laten we alleen bij de li de positie veranderen. De notatie is als volgt: background-position: X Y; Hiervan laten we X mooi 0, maar we schuiven het plaatje een pixel omhoog met de waarde -1px:
#meuktracker li a { color: black; } #meuktracker li a:hover, #meuktracker h3 a { color: #AE0009; } #meuktracker ol { list-style: none; margin: 0; } #meuktracker h3, #meuktracker li { font-size: 11px; line-height: 21px; padding-left: 5px; background-image: url(../images/meuktracker/header.png); } #meuktracker h3 { margin: 10px auto 0 auto; height: 22px;background: url(../images/meuktracker/header.png);} #meuktracker li {background: url(../images/meuktracker/field.png);background-position: 0 -1px; height: 21px; } #meuktracker div { width: 150px; }
Ofwel:
#meuktracker li a { color: black; } #meuktracker li a:hover, #meuktracker h3 a { color: #AE0009; } #meuktracker ol { list-style: none; margin: 0; } #meuktracker h3, #meuktracker li { font-size: 11px; line-height: 21px; padding-left: 5px; background-image: url(../images/meuktracker/header.png); } #meuktracker h3 { margin: 10px auto 0 auto; height: 22px; } #meuktracker li { background-position: 0 -1px; height: 21px; } #meuktracker div { width: 150px; }
Welke eenzelfde resultaat kent, met minder bytes: