Meillä on kaikki tarvitsemamme sisältö tällä sivulähdöllä ja otsikko on paikallaan. Nyt voimme aloittaa CSS: n sisällön Photoshopin suunnittelussa.
Yksi asia, jonka teimme, oli seitsemän luokan luettelon muuttaminen staattiseksi. Se on vain yksi vähemmän wp_list_pages () -kutsua ja siten hieman tehokkaampi. Jos koskaan vaihdamme luokkia, se on niin iso asia, että ei ole iso juttu palata tähän koodiin.
Tarvitsemme tässä olennaisesti kahden sarakkeen suunnittelun. Se on tarpeeksi helppoa vain parin divin kelluttamisella (tai todennäköisemmin nykyisen ruudukkokehyksemme avulla). Mutta se ei auta meitä tekemään "yhtä korkeita" sarakkeita, kuten suunnittelumme sanelee täällä. Loppujen lopuksi divit, joilla ei ole asetettua korkeutta, ovat vain yhtä korkeita kuin niiden sisällä oleva sisältö. Korkeuden asettaminen div: lle on yleensä huono idea.
Saadaksesi yhtä korkeita sarakkeita, väärennämme sen hienolla pienellä idealla, jossa käytämme yhtä isoa kääreosastoa (joka on yhtä pitkä kuin korkein sarakkeista, jotka se sisältää) ja asetamme kaltevuuden taustan. Ei haalistu yksi väri toisesta -liukuvärjäys, vaan liukuvärjäys, jolla on kovat pysähdykset juuri siinä kohdassa, missä sarake rikkoutuu. Tämä antaa meille harmaata vasemmalla ja valkoinen oikealla -värin, jota tarvitsemme.
Sovellamme eri taustavärejä kullekin vasemman sarakkeen kategorialinkille joukolla: n-lapsi () valitsimia. Päätämme siihen tällä tavalla luokkien sijasta, koska värien järjestys on tärkeämpi kuin värien sovittaminen luokkaan (se on melko mielivaltainen).
Ennen kuin olemme suorittaneet tämän kuvaruudun, teemme varjoefektin (korostettu sarakkeiden välinen erotus) soveltamalla pseudoelementtiä sivun yläosasta alaosaan ulottuvaan navigointiin. Tällä pseudoelementillä on oma musta-läpinäkyvä kaltevuus, joka tekee siitä näyttävän varjon.