Overblog Suivre ce blog
Administration Créer mon blog
27 novembre 2010 6 27 /11 /novembre /2010 05:30

Le type de module le plus commun : box-content contient principalement une série de liens, rangés dans une liste non ordonnée ul. J'en ai recensé douze types, ce qui donne la matière de deux articles.

Cet article recense les  autres  listes, dont le contenu mélange images et texte. Les modules à listes homogènes sont traités dans l'article précédent.

[1] Infos générales - Haut et bas de page

[2] La cellule des articles

[3] Articles et quasi-articles

[4] Annexes des articles

[5] Modules

[5.1] Modules : Infos générales - Modules simples

  1. Structure d'une colonne de modules
  2. Structure commune à tous les modules
  3. Modules simples

[5.2] Modules en liste - début

  1. Module Articles Récents
  2. Module Derniers Commentaires
  3. Module Catégories
  4. Module Archives
  5. Module Pages
  6. Module Liens

[5.3] Modules en liste - fin

  1. Module Présentation
  2. Module Profil
  3. Module Communautés
  4. Module Syndication
  5. Module Images Aléatoires
  6. Module Albums

[5.4] Modules complexes

  1. Module Recherche
  2. Module Newsletter
  3. Module Calendrier

[6] Diablogs

Module Présentation box presentation

divbox-content
Contenu du module
ul
Liste non numérotée
li
Item de liste
strong
label
texte "Blog"
pas de balise
Le nom du blog
li
Item de liste
a
img
L'avatar du blog
li
Item de liste
strong
label
texte "Catégorie"
pas de balise
texte ":"
anewWindow
Un mot-clé du blog
anewWindow
Ainsi de suite : un lien par mot-clé
li
Item de liste
strong
label
Description
pas de balise
texte ":" + la description du blog
li
Item de liste
alinkRecomm linkRecommend
texte "Partager ce blog"
li
Item de liste
a
texte "Retour à la page d'accueil"
li
Item de liste
alinkContact
texte "Contact"

Module Profil box profil

divbox-content
Contenu du module
ul
Liste non numérotée
li
Item de liste
strong
label
texte "Nom :"
pas de balise
Le nom du blogueur
li
Item de liste
a
img
L'avatar du blogueur
li
Item de liste
strong
label
texte "Géo-localisation :"
anewWindow
localisation du blogueur-
li
Item de liste
strong
label
texte "Centres d'intérêt :"
anewWindow
un centre d'intérêt-
anewWindow
Ainsi de suite : un lien par centre d'intérêt
li
Item de liste
strong
label
texte "A propos de moi :"
pas de balise
texte rédigé par le blogueur

Module Communautés box community

divbox-content
Contenu du module
ulcenter
Liste non numérotée
linoListStyle
Item de liste
div
Emballage
img
Avatar de la communauté
a
Nom de la communauté
li
Ainsi de suite : un item par communauté
spanlistAll
Emballage
a
Lien
em
texte "liste complète"
  • Orthographe : la classe du module est community, au singulier !
  • Remarquez les classes utilisées pour centrer la liste et supprimer les puces.

Module Syndication box w3c

divbox-content
Contenu du module
ul
Liste non numérotée
li
Item de liste
a
Un flux
img
Icône cliquable
Ce module semble ne proposer aujourd'hui que le flux RSS. D'autres flux donneront lieu à d'autres items de liste.

Module Images aléatoires box aleaim

divbox-content
Contenu du module
ulimgAndText
Liste non numérotée
linoListStyle
Item de liste
divdivImgAl
Emballage de l'image
a
Lien
img
Vignette cliquable, 70x70 pixels
div
Titre de l'image
li
Ainsi de suite : un item par image aléatoire (nombre réglable dans la config du module)
divclear
Assure que le module aleaim se termine en-dessous des flottants.
L'absence de classe sur le deuxième div (le titre) impose un peu de gymnastique de sélecteurs CSS pour le mettre en forme.
Par exemple : initialement aucun de ces div n'a de fond particulier. Si l'on veut donner un fond blanc au titre seulement, il faut :
.aleaim div {background:white}
mais aussi rétablir un fond transparent pour .divImgAl :
div.divImgAl {background:transparent}

Module Albums photos box album

divbox-content
Contenu du module
ulimgAndText center
Liste non numérotée
linoListStyle
Item de liste
divcenter
Emballage de l'image
a
Lien
img
Vignette cliquable, 70x70 pixels
divcenter
Emballage du titre de l'album
a
Lien vers l'album
li
Ainsi de suite : un item par album
p
Emballage
a
texte "Voir tous les albums"
  • Orthographe : la classe du module est album, au singulier !
  • Ce module comporte un lien 'voir tous les albums', un peu comme le lien 'liste complète' du module des articles, mais ce lien n'a pas de classe et se trouve emballé dans un p au lieu d'un span .
  • Les items de liste sont organisés comme ceux des images aléatoires mais sans classes spécifiques. Pour les distinguer en CSS, il faut parler de
    .album .noListStyle .center qui désigne les deux div et de
    .album .noListStyle .center+.center qui ne désigne que le deuxième.

Oublis, erreurs : merci de me les signaler en commentaire :-)

par Aïe mes doigts ! - dans Briques
commenter cet article

Archives