Na izlazu ove stranice imamo sav sadržaj koji nam je potreban i zaglavlje je postavljeno. Sada možemo pokrenuti CSSin 'sadržaj u dizajn koji imamo u Photoshopu.
Jedna stvar koju smo učinili je da popis od sedam kategorija učinimo statičnim. To je samo jedan poziv manje wp_list_pages () i time malo učinkovitiji. Ako ikad promijenimo kategorije, to je tako velika stvar da nije velika stvar ponovno posjetiti ovaj kôd.
Ovdje nam u osnovi treba dizajn s dva stupca. To je dovoljno jednostavno učiniti sa samo plutajućih nekoliko div-ova (ili što je vjerojatnije, koristeći naš postojeći mrežni okvir). Ali to nam ne pomaže da napravimo stupce "jednake visine" kako ovdje nalaže naš dizajn. Napokon, div-ovi bez postavljenih visina visoki su samo onoliko koliko je sadržaj u njima. Postavljanje visine na div obično je loša ideja.
Da bismo dobili stupce jednake visine, lažiramo ih s urednom malom idejom gdje koristimo jedan veliki div omotača (koji je visok kao najviši stupac koji sadrži) i postavljamo gradijentnu pozadinu. Ne gradijent koji prelazi u jednu boju u drugu, već gradijent s tvrdim zaustavljanjima upravo tamo gdje se stupac lomi. To nam daje boje sive s lijeve i bijele s desne strane koje su nam potrebne.
Primjenjujemo različite boje pozadine na svaku vezu kategorije u lijevom stupcu s nizom selektora: nth-child (). Odlučili smo se za ovaj način, a ne za nastavu, jer je redoslijed boja važniji od podudaranja boje s kategorijom (prilično je proizvoljan).
Prije nego što završimo s ovim screencastom, učinimo efekt sjene (naglašeno odvajanje između stupaca) primjenom pseudo elementa na navigaciju koja se proteže od vrha do dna stranice. Ovaj pseudo element ima vlastiti gradijent od crne do prozirne boje zbog kojeg izgleda poput sjene.