28172 sujets

CSS et mise en forme, CSS3

[Résolu] Div ou ?

Bonsoir

Je viens de terminer mon premier essai avec flexbox
http://goxo.eu/flex/flex.html

Tout fonctionne mais sémantiquement je ne suis pas satisfait, pour les 2 dernières div de la page j'ai utilisé section pour les images et les listes, il n'y aura pas de titres dans des sections .... Smiley decu

Par quoi puis je remplacer les sections sans tomber dans la divide .....!

Quelles seraient les balises les plus appropriées ?

Merci pour vos conseils.

Bon weekend

Cordialement

BB
Modifié par africa (05 Mar 2016 - 18:27)
Administrateur
Bonsoir,

Utiliser des div n'est pas grave, il faut arrêter de vouloir systématiquement les remplacer par... pire Smiley smile

Ceci dit, dans ton cas tu as raison, je pense également que tes deux derniers blocs méritent le statut de <section> (et tes images méritent un <figure>).
Tu as également raison de vouloir y ajouter un titre à tes sections. Si tu ne veux pas qu'il s'affiche, tu peux les masquer sur écran graphique par exemple.
Merci Raphaël et olivier

En fait les images sont issues d'un script cgi et pointe vers un site,
Je l'ai installé sur la première image à gauche, dans ce cas dois je quand même utiliser <figure> et section pour les images dans la mesure ou à la base les sections images contiennent du code ?

En ce qui concerne les titres, quelle est la meilleure solution et la plus "propre" pour les masquer ?

Merci
Modifié par africa (05 Mar 2016 - 19:12)
Administrateur
africa a écrit :

En ce qui concerne les titres, quelle est la meilleure solution et la plus "propre" pour les masquer ?

La technique de Yahoo!, reprise chez KNACSS semble être la plus robuste :
https://github.com/alsacreations/KNACSS/blob/master/sass/_06-helpers.scss#L10

.visually-hidden {
  position: absolute !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}
Sujet clos
Aller à