Wir haben alle benötigten Inhalte auf dieser Seite ausgegeben und die Kopfzeile ist an Ort und Stelle. Nun können wir beginnen, den Inhalt mit CSS in das Design zu integrieren, das wir in Photoshop haben.
Eine Sache, die wir gemacht haben, war, die Liste der sieben Kategorien statisch zu gestalten. Das ist nur ein Aufruf weniger von wp_list_pages() und somit etwas effizienter. Wenn wir die Kategorien jemals ändern, ist das eine so große Sache, dass es kein Problem ist, diesen Code zu überarbeiten.
Wir brauchen hier im Wesentlichen ein Zwei-Spalten-Design. Das ist mit dem einfachen Floaten einiger Divs (oder wahrscheinlicher mit unserem bestehenden Grid-Framework) recht einfach zu bewerkstelligen. Aber das hilft uns nicht, Spalten mit "gleicher Höhe" zu erstellen, wie unser Design es hier vorschreibt. Schließlich sind Divs ohne festgelegte Höhe nur so hoch wie der Inhalt, der sie enthält. Eine Höhe auf einem Div festzulegen, ist generell eine schlechte Idee.
Um Spalten gleicher Höhe zu erhalten, täuschen wir dies mit einer raffinierten kleinen Idee vor, bei der wir ein großes Wrapper-Div verwenden (das so hoch ist wie die höchste der darin enthaltenen Spalten) und einen Farbverlauf als Hintergrund setzen. Kein Farbverlauf von einer Farbe zur anderen, sondern ein Farbverlauf mit harten Übergängen genau dort, wo die Spalten unterbrochen werden. Das gibt uns die graue Färbung links und weiße Färbung rechts, die wir brauchen.
Wir wenden die verschiedenen Hintergrundfarben auf jeden Kategorie-Link in der linken Spalte mit einer Reihe von :nth-child()-Selektoren an. Wir entscheiden uns für diesen Weg statt für Klassen, weil die Reihenfolge der Farben wichtiger ist als die Zuordnung der Farbe zur Kategorie (es ist eher willkürlich).
Bevor wir mit diesem Screencast fertig sind, lassen wir den Schatteneffekt entstehen (eine nachdrückliche Trennung zwischen den Spalten), indem wir ein Pseudo-Element auf die Navigation anwenden, das sich von oben nach unten auf der Seite erstreckt. Dieses Pseudo-Element hat seinen eigenen Farbverlauf von Schwarz zu Transparent, was es wie einen Schatten aussehen lässt.