Classes liées aux modules
| Classes liées aux modules | |
| .box {} Le module entier |  |
| .box h2 {} L'emplacement du titre du module. |  |
| | |
| .box-content ul {} L'ensemble de la liste à puce |  |
| .box-content li {} Chaque élément de la liste à puce |  |
A noter que .box-top, .box-left, .box-right, .box-bottom, .box-topLeft, .box-topRight, .box-bottomLeft, .box-bottomRight et .box-content représentent également le module entier. Mais ils ne sont pas là que pour faire joli ! Ils permettent de gérer complètement et de façon précise le design du module !
Commençons par la classe .box-top et cette image :
.On va ajouter cette image en fond de la classe .box-top, la répéter horizontalement et la positionner en haut.
.box-top { background-image: url(url_de_l_image_top.gif); background-repeat: repeat-x; background-position: top center;}
On obtient le résultat suivant :
Ensuite, on va ajouter la coin en haut à gauche. Utilisons la classe .box-topLeft et cette image :
.Nous allons la positionner en fond de la classe, ne pas la répéter, et la positionner en haut à gauche.
.box-topLeft { background-image: url(url_de_l_image_topLeft.gif); background-repeat: no-repeat; background-position: top left;}
On obtient le résultat suivant :
Désormais, on passe au coin droit, à la classe .box-topRight, et l'image inverse de la précédente :
.Cette image sera en fond de la classe .box-topRight, ne sera pas répétée pour n'apparaître qu'une seule fois, au coin, et sera positionnée en haut à droite.
.box-topRight { background-image: url(url_de_l_image_topRight.gif); background-repeat: no-repeat; background-position: top right;}
Et hop, tout le haut du module est prêt !
On va mettre les bords gauche et droite. Commençons par la gauche. Utilisons pour cela la classe .box-left. Nous allons mettre une bordure tout simple :
.Puisqu'on veut que cette image fasse toute la bordure gauche, on va la positionner à gauche, et la répéter sur toute la hauteur.
.box-left { background-image: url(url_de_l_image_left.gif); background-repeat: repeat-y; background-position: top left;}
La bordure gauche est terminée :
A droite, maintenant. Même principe, avec la classe .box-right, et une image symétrique
.Le principe est identique au précédent, à la différence que cette image sera positionnée à droite, et non à gauche.
.box-right { background-image: url(url_de_l_image_right.gif); background-repeat: repeat-y; background-position: top right;}
La bordure droite est positionnée :
Nous allons mettre la bordure du bas en utilisant la classe .box-bottom et cette image :
.Nous devons répéter cette image horizontalement pour qu'elle prenne toute la largeur. Elle sera positionnée en bas du fond.
.box-bottom { background-image: url(url_de_l_image_bottom.gif); background-repeat: repeat-x; background-position: bottom center;}
Et voilà !
Allez, soyons fous, ajoutons également des coins, en bas, pour améliorer encore ces contours ! Utilisons tout d'abord la classe .box-bottomLeft et ce coin :
.De même que le coin en haut à gauche, celui-ci sera en fond de la classe, non répétée, et positionnée en bas à gauche.
.box-bottomLeft { background-image: url(url_de_l_image_bottomLeft.gif); background-repeat: no-repeat; background-position: bottom left;}
Le premier coin du bas :
Et terminons ce module avec le coin droit. La classe sera .box-bottomRight, et l'image symétrique à la précédente :
.Même principe que précédemment, mais en positionnant à droite et non pas à gauche.
.box-bottomRight { background-image: url(url_de_l_image_bottomRight.gif); background-repeat: no-repeat; background-position: bottom right;}
Et voilà, le module est prêt !
A vous de jouer !
Classes différentes pour chaque module
A noter que chaque module peut être identifié de manière unique, ce qui peut être pratique lorsque l'on veut mettre une image de fond différente pour chaque titre de module, ou une petite icône en face de chaque titre.- #ArticleRecent : le module de la liste des articles récents
- #Lien : les liens
- #Recherche : le module de recherche
- #Recommander : le module "recommander"
- #Archive : les archives
- #Calendrier : le calendrier
- #Syndication : le module W3C
- #Categorie : la liste des catégories
- #Album : les albums photos
- #Newsletter : le module "newsletter"
- #Concours : le module "concours"
- #Presentation : la présentation du blog
- #aleaIm : le module des images aléatoires
- #CommentRecent : les commentaires
- #LeftPart et #RightPart : les deux modules "texte libre". Attention, il se peut que celui de droite ait la classe #LeftPart et inversement. Les classes ne sont pas liées aux positions des modules. D'ailleurs, si vous mettez les deux modules du même côté, les deux classes seront utilisées, une par module.
en guise de titre du module Liens, le principe est le suivant :
#Lien .box-content h2 {background-image:url(url_de_l_image); font-size:0px;height:22px; }
Quelques explications :
#Lien : on ne s'occupe que du module "liens"
.box-content : il s'agit du contenu d'un module
h2 : on ne veut mettre en page que le titre... qui correspond ici à la balise html (ne pas hésiter à aller vérifier dans le code source).
background-image:url(url_de_l_image); : on change le fond
font-size:0px; : comme on ne veut plus que le mot "Liens" apparaisse, on met la taille du texte à 0
height:22px; : en mettant la taille du texte à 0, plus rien n'apparaît. Donc il faut forcer la hauteur de cette partie à 22px (la hauteur de l'image) pour la voir apparaître.
Enfantin, non ?
Publicité