Meilleures CSS et présentation en HTML5

noisettes/sommaire/goodiesunderedito.html

 <BOUCLE_RubGoodies(RUBRIQUES){titre_mot=Goodies}{par num titre}>
 <B_Goodies>
-<div id="homecadre_outils">
+<div class="goodies underedito">
 <h2 class="#EDIT{titre}"><BOUCLE_articles_plusdun(ARTICLES) {id_rubrique} {1,1}{lang}><a href="#URL_RUBRIQUE"[ title="(#_RubGoodies:DESCRIPTIF|attribut_html)"]>#_RubGoodies:TITRE</a></BOUCLE_articles_plusdun><BOUCLE_articles_unseul(ARTICLES) {id_rubrique} {0,1}{lang}><a href="#ARTICLE_URL"[ title="(#_RubGoodies:DESCRIPTIF|attribut_html)"]>#_RubGoodies:TITRE</a></BOUCLE_articles_unseul><a href="#URL_RUBRIQUE"[ title="(#_RubGoodies:DESCRIPTIF|attribut_html)"]>#_RubGoodies:TITRE</a><//B_articles_unseul><//B_articles_plusdun></h2>
 <ul>
 <BOUCLE_Goodies(ARTICLES) {branche}{par num titre}{!par date}{lang}{0,(#CONFIG{soyezcreateurs/nombres_goodies,5})}>
-[(#SET{logooutil,[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|image_reduire{#CONFIG{soyezcreateurs_layout/largeurlogogoody,48},#CONFIG{soyezcreateurs_layout/hauteurlogogoody,48}}|image_format{png}|image_recadre{#CONFIG{soyezcreateurs_layout/largeurlogogoody,48},#CONFIG{soyezcreateurs_layout/hauteurlogogoody,48},top center,transparent}|sinon{[(#CHEMIN{images/actualites.png}|balise_img)]})]})]
-	<li>[<a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]><img src="(#GET{logooutil}|extraire_attribut{src}|appliquer_filtre{supprimer_timestamp,true}|embarque_fichier)" class="logo_outil" alt=""[ width="(#GET{logooutil}|largeur)]"[ height="(#GET{logooutil}|hauteur)]" /></a><br />]<div class="#EDIT{titre}"><a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>#TITRE</a></div></li>
+[(#SET{logooutil,[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|image_reduire{#CONFIG{soyezcreateurs_layout/largeurlogogoody,48},#CONFIG{soyezcreateurs_layout/hauteurlogogoody,48}}|image_format{png}|image_recadre{#CONFIG{soyezcreateurs_layout/largeurlogogoody,48},#CONFIG{soyezcreateurs_layout/hauteurlogogoody,48},center,transparent}|sinon{[(#CHEMIN{images/actualites.png}|balise_img)]})]})]
+	<li class="#EDIT{titre}"><a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]><figure>[<img src="(#GET{logooutil}|extraire_attribut{src}|appliquer_filtre{supprimer_timestamp,true}|embarque_fichier)" class="logo_outil" alt=""[ width="(#GET{logooutil}|largeur)]"[ height="(#GET{logooutil}|hauteur)]" />]<figcaption>#TITRE</figcaption></figure></a></li>
 </BOUCLE_Goodies>
 </ul>
-</div><!-- homecadre_outils -->
+</div><!-- goodies underedito -->
 </B_Goodies>
 </BOUCLE_RubGoodies>
 #FILTRE{mini_html}
\ No newline at end of file

stylescommuniquant.css.html

@@ -70,6 +70,7 @@ div#content { margin: 0; width:#GET{LargeurContaineur}px; }
 	float: left;
 	width: 100%;
 }
+
 [(#CONFIG{soyezcreateurs/largeur_slideshow_communiquant,etroite}|=={etroite}|oui)
 [(#CONFIG{soyezcreateurs/positiongoodies,extra}|=={extra}|oui)
 #communiquant_content_extra .goodies h2:first-child { margin-top: 0; }
@@ -86,10 +87,10 @@ div#content { margin: 0; width:#GET{LargeurContaineur}px; }
 #homecadre_outils ul { padding:0; }
 [(#REM) Pour justifier les pictos des outils horizontalement : cf http://stackoverflow.com/questions/10020046/full-justify-for-li-elements
 Voir aussi : http://portfolio.planetjon.ca/2014/04/19/css-recipes-justified-horizontal-menus/ ]
-#communiquant_content_central #homecadre_outils ul { text-align: justify; }
-#communiquant_content_central #homecadre_outils ul::after {width: 100%; display: inline-block; content: "."; visibility: hidden}
-#homecadre_outils li { display: inline-block; text-align:center; }
-#homecadre_outils img { padding: 0 10px; }
+#communiquant_content_central #homecadre_outils ul, .goodies.underedito ul { text-align: justify; }
+#communiquant_content_central #homecadre_outils ul::after, .goodies.underedito ul::after {width: 100%; display: inline-block; content: "."; visibility: hidden}
+#homecadre_outils li, .goodies.underedito li { display: inline-block; text-align:center; vertical-align: top; }
+#homecadre_outils img, .goodies.underedito img { padding: 0 10px; }
 
 .goody { clear: left; margin-bottom: 8px; min-height: 48px; }
 .goody_ligne { margin-left: #CONFIG{soyezcreateurs_layout/largeurlogogoody,48}px; }