We hebben alle inhoud die we nodig hebben op deze pagina-uitvoer en we hebben de koptekst op zijn plaats. Nu kunnen we CSS in de inhoud starten in het ontwerp dat we in Photoshop hebben.
Een ding dat we deden, was de lijst met zeven categorieën statisch maken. Het is slechts één oproep wp_list_pages () minder en dus een beetje efficiënter. Als we ooit de categorieën veranderen, is dat zo belangrijk dat het geen probleem is om deze code opnieuw te bezoeken.
We hebben hier in wezen een ontwerp met twee kolommen nodig. Dat is eenvoudig genoeg om slechts een paar div's te laten zweven (of waarschijnlijker, met behulp van ons bestaande rasterkader). Maar dat helpt ons niet om kolommen van gelijke hoogte te maken, zoals ons ontwerp hier voorschrijft. Immers, divs zonder ingestelde hoogten zijn slechts zo groot als de inhoud erin. Een hoogte instellen op een div is over het algemeen een slecht idee.
Om kolommen van gelijke hoogte te krijgen, vervalsen we het met een leuk idee waarbij we een grote wrapper-div gebruiken (die zo hoog is als de hoogste van de kolommen die het bevat) en een verloopachtergrond instellen. Geen verloop van één kleur naar een ander verloop, maar een verloop met harde stops precies daar waar de kolom breekt. Dit geeft ons de grijze kleur aan de linkerkant en wit aan de rechterkant die we nodig hebben.
We passen de verschillende achtergrondkleuren toe op elke categorielink in de linkerkolom met een reeks: nth-child () selectors. We besluiten het op deze manier te doen in plaats van klassen, omdat de volgorde van de kleuren belangrijker is dan het afstemmen van de kleur op de categorie (het is nogal willekeurig).
Voordat we klaar zijn met deze screencast, laten we het schaduweffect optreden (een nadrukkelijke scheiding tussen kolommen) door een pseudo-element toe te passen op de navigatie dat zich uitstrekt van boven naar beneden op de pagina. Dit pseudo-element heeft zijn eigen zwart-naar-transparant verloop waardoor het eruitziet als een schaduw.