28173 sujets

CSS et mise en forme, CSS3

slt,
voila je voudrais savoir comment faire pour avoir un truc comme ça :

###################    ###################
###################    ###################
###################    ###################
###################    ###################
###################    ###################
      image 1                image 2

avec des images. Sans faire de tableau biensur. Je n'ai rien trouver le net.
Il me semblait avoir sur sur le net un truc du style :
<legend><img src="truc.jpg" alt="titre de l'image" />legende</legend>
mais ça ne marche :s donc je voudrais savoir s'il existe une solution en CSS.
merci d'avance pour vôtre aide.
Modifié par XwZ (01 Feb 2006 - 22:20)
Bonjour,

L'élément legend ne sert pas à cela, il est utilisé dans la création de formulaire pour donner une légende à un fieldset qui regroupe des champs de formulaires.

Pour ce qui est de ta galerie de photos si j'ai bien compris, peut-être trouveras-tu ton bonheur avec cette traduction de pompage.net qui utilise une liste de définition pour le html et css pour la mise en forme: Les listes de définitions : mal utilisées ou mal comprises ?

Sinon l'utilisation d'un tableau n'est pas une hérésie pour une galerie de photo. Smiley cligne

Enfin dans ton apprentissage de html, surtout si tu envisages de proposer toi même des tutoriels sur html je te conseille ceux-ci qui t'accompagneront dans tes premiers pas:
-Cours de XHTML conforme et accessible
-Écrire une page Web
Modifié par Igor (01 Feb 2006 - 22:36)
Le choix entre un tableau et un div depend de l'evolution de ta galerie.
Est ce que voudras pouvoir par exemple afficher un nombre variable d'images sur un ligne ou insérer une nouvelle image entre les autres, auquel cas tu devrais utiliser un div en float:left pour chaque images et légende.
Ceci dit la solution de pompage.net est peut-être plus intréréssante.
Modifié par Hermann (01 Feb 2006 - 22:44)
Ho :o c'est magnifique c'est ce que je cherchais merci beaucoup Smiley lol
Je connaissais ces balise je les utilises pour ma V2 et casiment tous les tutoriaux.
@++
Modifié par XwZ (01 Feb 2006 - 22:57)
Cela dit ce que tu cherches c'est finalement d'avoir dans un conteneur une image et un texte de légende ayant un comportement block.

Donc en fait du point de vue d'un code html parfaitement conséquent on pourrait tout aussi bien avoir :

<p><img src="" alt="" width="" height="" /><span>Blabla bla...</span></p>


avec comme css quelque chose comme :

p {
float:left;
}
p img, p span {
display:block;
}
p span {
text-align:center;
}

Modifié par clb56 (02 Feb 2006 - 00:03)