HTML de blog [5.3] Modules en liste - fin

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
   • Module Texte Libre
   • Module Overblog
   • Module Partager

[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
   • Vue d'ensemble
   • Le mois
   • Les jours de la semaine
   • Les jours du mois
   • Le bandeau de navigation

[6] Diablogs

Module Présentation box presentation

• Table
• Structure commune à tous les modules
• Structure d'une colonne de modules

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

• Table
• Structure commune à tous les modules
• Structure d'une colonne de modules

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

• Table
• Structure commune à tous les modules
• Structure d'une colonne de modules

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

• Table
• Structure commune à tous les modules
• Structure d'une colonne de modules

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

• Table
• Structure commune à tous les modules
• Structure d'une colonne de modules

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

• Table
• Structure commune à tous les modules
• Structure d'une colonne de modules

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 :-)