Vi har alt det indhold, vi har brug for på denne side, og vi har overskriften på plads. Nu kan vi starte CSSin 'indholdet i det design, vi har i Photoshop.
En ting, vi gjorde, var at gøre listen over syv kategorier statisk. Det er bare et mindre wp_list_pages () opkald og dermed lidt mere effektivt. Hvis vi nogensinde ændrer kategorierne, er det sådan en stor ting, det er ikke så meget at besøge denne kode igen.
Vi har i det væsentlige brug for et design med to søjler her. Det er let nok at gøre med bare at flyde et par divs (eller mere sandsynligt ved at bruge vores eksisterende gitterramme). Men det hjælper os ikke med at lave "lige højde" -kolonner, som vores design dikterer her. Når alt kommer til alt er divs uden indstillede højder kun så høje som indholdet inde i dem. At indstille en højde på en div er generelt en dårlig idé.
For at få kolonner med samme højde falsker vi det med en pæn lille idé, hvor vi bruger en stor indpakningsdel (som er så høj som den højeste af kolonnerne, den indeholder) og indstiller en gradientbaggrund. Ikke en fade-en-farve-til-en anden gradient, men en gradient med hårde stop lige hvor søjlen går i stykker. Dette giver os den grå-til-venstre og hvid-til-højre farve, vi har brug for.
Vi anvender de forskellige baggrundsfarver på hvert kategorilink i venstre kolonne med en række: nth-child () vælgere. Vi beslutter at gøre det på denne måde i stedet for klasser, fordi rækkefølgen af farverne er vigtigere end at matche farven til kategorien (det er ret vilkårligt).
Før vi er færdige med denne screencast, får vi skyggeeffekten til at ske (en tydelig adskillelse mellem kolonner) ved at anvende et pseudo-element på navigationen, der strækker sig fra top til bund på siden. Dette pseudo-element har sin egen sort-til-gennemsigtige gradient, der får det til at ligne en skygge.