Nous avons tout le contenu dont nous avons besoin sur la sortie de cette page et nous avons l'en-tête en place. Maintenant, nous pouvons commencer CSSin 'le contenu dans la conception que nous avons en cours dans Photoshop.
Une chose que nous avons faite a été de rendre statique la liste des sept catégories. C'est juste un appel de moins à wp_list_pages () et donc un peu plus efficace. Si jamais nous changeons les catégories, c'est tellement important que ce n'est pas grave de revoir ce code.
Nous avons besoin ici essentiellement d'une conception à deux colonnes. C'est assez facile à faire en flottant simplement quelques divs (ou plus probablement, en utilisant notre structure de grille existante). Mais cela ne nous aide pas à créer des colonnes de «hauteur égale» comme le dicte notre conception ici. Après tout, les divs sans hauteurs définies ne sont aussi grandes que le contenu qu'elles contiennent. Définir une hauteur sur un div est généralement une mauvaise idée.
Pour obtenir des colonnes de hauteur égale, nous le simulons avec une petite idée intéressante où nous utilisons un grand div wrapper (qui est aussi haut que la plus haute des colonnes qu'il contient) et définissons un arrière-plan dégradé. Pas un dégradé de fondu d'une couleur à une autre, mais un dégradé avec des arrêts durs là où la colonne se brise. Cela nous donne la coloration grise à gauche et blanche à droite dont nous avons besoin.
Nous appliquons les différentes couleurs d'arrière-plan à chaque lien de catégorie dans la colonne de gauche avec une série de sélecteurs: nth-child (). Nous décidons de le faire de cette façon plutôt que des classes car l'ordre des couleurs est plus important que de faire correspondre la couleur à la catégorie (c'est plutôt arbitraire).
Avant d'en finir avec ce screencast, nous réalisons l'effet d'ombre (une séparation emphatique entre les colonnes) en appliquant un pseudo élément à la navigation qui s'étend de haut en bas de la page. Ce pseudo élément a son propre dégradé noir à transparent qui le fait ressembler à une ombre.