# 013: CSS de la structure de navigation - Astuces CSS

Anonim

Nous utilisons quelques astuces de positionnement pour aligner le bord gauche du logo et la zone de contenu principale, tout en laissant l'en-tête toucher le bord gauche de la page.

Les blocs de navigation, à la largeur la plus large, font 1/8 de la largeur du parent nav. Nous les définissons sur inline-block afin qu'ils acceptent cette largeur. Nous finissons par devoir définir la largeur à 12,49% au lieu de 12,5% en raison d'erreurs d'arrondi de sous-pixels.

Nous trouvons un moyen de faire fonctionner l'ombre du bas de la navigation, mais nous nous inquiétons un peu de la technique utilisée. Nous devons inverser le z-index de chacun des éléments de menu afin que les premiers éléments soient «au-dessus» et descendre un par un plutôt que le dernier. Nous utilisons une série de :nth-childsélecteurs pour ce faire.