Vi har alt innholdet vi trenger på denne siden, og vi har overskriften på plass. Nå kan vi starte CSSin 'innholdet i designet vi har i Photoshop.
En ting vi gjorde var å gjøre listen over syv kategorier statisk. Det er bare en mindre wp_list_pages () samtale og dermed litt mer effektiv. Hvis vi noen gang endrer kategoriene, er det en så stor ting at det ikke er så farlig å gå tilbake til denne koden.
Vi trenger i hovedsak et design med to kolonner her. Det er lett nok å gjøre med å bare flyte et par divs (eller mer sannsynlig, ved å bruke vårt eksisterende rammeverk). Men det hjelper oss ikke å lage kolonner med "like høyde" slik designen dikterer her. Tross alt er delinger uten innstilte høyder bare så høye som innholdet i dem. Å sette en høyde på en div er generelt en dårlig idé.
For å få kolonner med like høyde, falsker vi det med en fin liten ide hvor vi bruker en stor innpakningsdel (som er like høy som den høyeste av kolonnene den inneholder) og setter en gradientbakgrunn. Ikke en fade-en-farge-til-en-annen gradient, men en gradient med harde stopp akkurat der kolonnen bryter. Dette gir oss den grå-til-venstre og hvite-til-høyre fargen vi trenger.
Vi bruker de forskjellige bakgrunnsfargene på hver kategorikobling i venstre kolonne med en serie: nth-child () -velgere. Vi bestemmer oss for å gjøre det på denne måten i stedet for klasser, fordi rekkefølgen på fargene er viktigere enn å matche fargen til kategorien (det er ganske vilkårlig).
Før vi er ferdige med denne skjermsendingen, får vi skyggeeffekten til å skje (en tydelig skille mellom kolonnene) ved å bruke et pseudo-element på navigasjonen som strekker seg fra topp til bunn av siden. Dette pseudo-elementet har sin egen svart-til-gjennomsiktig gradient som får det til å se ut som en skygge.