Sellel lehe väljundil on kogu vajalik sisu ja meil on päis paigas. Nüüd saame CSS-i alustada sisuga Photoshopis kasutatavas kujunduses.
Ühe asjana tegime seitsme kategooria nimekirja staatiliseks. See on vaid üks wp_list_pages () kõne vähem ja seega natuke tõhusam. Kui me kunagi kategooriaid vahetame, on see nii suur asi, et pole suurt probleemi selle koodi uuesti vaadata.
Siin vajame sisuliselt kahe veeru kujundust. Seda on piisavalt lihtne teha, kui hõljuda paari div-d (või tõenäolisemalt, kasutades meie olemasolevat võrguraamistikku). Kuid see ei aita meil teha võrdse kõrgusega veerge, nagu meie disain siin ette näeb. Lõppude lõpuks on kindlaksmääratud kõrgusteta divid ainult nii kõrged kui nende sees olev sisu. Div-i kõrguse määramine on üldiselt halb mõte.
Võrdse kõrgusega veergude saamiseks võltsime selle väikese korraliku ideega, kus kasutame ühte suurt ümbrisdivi (mis on sama kõrge kui kõrgeim veergudest, mida see sisaldab) ja määrame gradiendi tausta. Mitte pleekimine ühelt värvilt teisele, vaid raskete peatustega gradient just seal, kus veerg puruneb. See annab meile halli vasakul ja valgel paremal värvi, mida vajame.
Rakendame vasaku veeru igale kategooria lingile erinevad taustavärvid: n-lapse () selektorite seeriaga. Otsustame seda pigem klasside asemel, sest värvide järjestus on olulisem kui värvi kategooriale vastavusse seadmine (see on pigem suvaline).
Enne selle ekraanikuva edastamist oleme varjuefekti (veergude rõhutatud eraldamine) juhtunud, rakendades lehe ülevalt alla ulatuvale navigeerimisele pseudoelemendi. Sellel pseudoelemendil on oma mustast läbipaistvaks gradient, mis muudab selle varju.