Fond du sidebar
Par Kozlika, dimanche 6 novembre 2005 à 10:08 :: Personnalisations :: #6 :: rss
Comme pour le fond de fenêtre ou le fond de page, le fond du sidebar (menu latéral) peut être personnalisé à votre gré. Mais attention ! le sidebar est une boite et non une colonne, il faudra donc avoir recours à une mise en place un peu différente.
Une erreur communément faite est de croire qu'en appliquant un background dans la règle de #sidebar
cette couleur va s'étendre sur toute la hauteur de la page. Il n'en est rien : le sidebar est une boîte, quand son contenu arrive à son terme, la boîte se referme. Il va donc falloir ruser :
- construire une image de quelques pixels de haut et de la largeur du sidebar avec la couleur de son choix
- sur le modèle de ce que nous venons de voir ci-dessus, l'appliquer au fond de page mais cette fois en la collant à droite
background : #fff url(images/sidebar.png) repeat-y top right;
Attention : la structure de la page prévoyant de l'espace latéral autour du sidebar, prévoir plus large ! (ici 200px). On en profite pour retirer les pointillés de bordure de sidebar actuels qui ne feraient pas joli, idem pour l'image en bas du sidebar, actuellement sur fond blanc :
#sidebar { width : 160px; float : right; margin : 20px 0 0 0; padding : 0 20px 40px 20px; background : transparent; font-size:0.85em; color:#666; line-height:125%; }
Pour éviter que notre fausse colonne empiète sur le pied de page, on ajoutera également un fond blanc (transparent
à remplacer par #fff
dans la règle de #footer
)