Legende galerie photo css

Bonjour à tous,
Je cherche à faire une galerie photo en css xhtml conforme w3c, jusqu'ici pas de pb en utilisant les balises ul et li :

 <ul id="galerie-photo">
<li><a href="photo.jpg"  title="Opera "><img src="photo/nuit-web.jpg" alt="description"/></a></li> 
<li><a href="photo.jpg"  title="Opera "><img src="photo/nuit-web.jpg" alt="description"/></a></li> 
<li><a href="photo.jpg"  title="Opera "><img src="photo/nuit-web.jpg" alt="description"/></a></li> 
<li><a href="photo.jpg"  title="Opera "><img src="photo/nuit-web.jpg" alt="description"/></a></li> 
<li></ul>

avec ce code css

galerie-photo {

text-align:center;

list-style-type:none;

}

#galerie-photo li {
display:inline;

}

#galerie-photo img {
	border:4px solid #000000;
	margin: 5px;

}

Je souhaiterai mettre une légende collé sous chaque photo. Auriez vous une idée du code à utiliser? J'imagine qu'il faut utiliser "caption" mais je ne sais pas comment et je ne trouve rien ni sur le forum ni sur le web.

Merci d'avance de votre éventuel coup de main.

@+

Bonjour,
Je ressors ici un vieux bout de code:

<div class="vignette"><img src="img/england.jpg" class="cadre" width="120px" height="120px" /></div>

avec, pour la css:

.vignette {
	float: left;
	width: 120px;
	height: 120px;
	padding: 2px;
	text-align:center;
}

.cadre {
	padding: 1%;
    background: #fff;
	border: solid 1px #ccc;
}

Voilà, ça pourrait peut-être te servir de piste de départ?

speedlab a écrit :

Je ressors ici un vieux bout de code:

<div class="vignette"><img src="img/england.jpg" class="cadre" width="120px" height="120px" /></div>

Une division pour baliser du contenu en ligne? Un simple paragraphe me semble bien plus indiqué.

Bonsoir à tous,
Merci Speedlab et Benjamin DC pour vos réponses.
J'ai bien essayé de mettre les légendes dans des paragraphes
html

<ul id="galerie-photo">

<li><a href="photo.jpg"  title="Opera "><img src="photo/nuit-web.jpg" alt="description"/></a><p>Ceci est une photo Ceci est une photo Ceci est une photo</p></li> 
<p>Ceci est une photo Ceci est une photo Ceci est une photo</p>
<li><a href="photo.jpg"  title="Opera "><img src="photo/nuit-web.jpg" alt="description"/></a></li> 
<p>Ceci est une photo Ceci est une photo Ceci est une photo</p>
<li><a href="photo.jpg"  title="Opera "><img src="photo/nuit-web.jpg" alt="description"/></a></li> 
<p>Ceci est une photo Ceci est une photo Ceci est une photo</p>
<li><a href="photo.jpg"  title="Opera "><img src="photo/nuit-web.jpg" alt="description"/></a></li> 
<p>Ceci est une photo Ceci est une photo Ceci est une photo</p>
</ul>

css

#galerie-photo {

text-align:center;
list-style-type:none;

}

#galerie-photo li {

display:inline;

}

#galerie-photo img {

	border:4px solid #000000;

	margin: 5px;

}

p {
max-width: 180px;
text-align:center;

}

Le soucis est que je n'arrive pas à positionner le paragraphe pil poil sous les vignettes de la galerie. Le résultat de ce nouveau code (html et css) est que les vignettes ne sont plus alignés horizontalement et que le texte dans les balises P n'est pas sous les vignettes, l'objectif final étant d'avoir des rangées horizontales de vignettes avec une légende sous chaque vignettes.
Si quelqu'un avait une solution?
@+

Salut

Au risque d'en faire hurler certain.
Essaye celle là, Je m'en sort pas mal avec.

LIEN ICI

@+

Michel a écrit :

Essaye celle là, Je m'en sort pas mal avec.
LIEN ICI
@+

Y'a quand même plus simple et plus propre :
un balisage du type :

<li><a href=""><img src=""/> Photo 1</a></li>
<li><a href=""><img src=""/> Photo 2</a></li>
<li><a href=""><img src=""/> Photo 3</a></li>
<li><a href=""><img src=""/> Photo 4</a></li>
<li><a href=""><img src=""/> Photo 5</a></li>

peut donner ça.

Bonjour,
Merci Swell et Michel pour vos réponses.
J'ai essayer "d'analyser" vos deux techniques. Celle de Michel me semble ressembler à celle d'Eric Meyer (que j'essaie de comprendre). (http://more.ericmeyeroncss.com/projects/02/)
Celle de Swell m'intéresse aussi mais j'avoue que j'ai du mal à comprendre le css. Autant le html me semble clair :

>

<ol>

<li><a href="./soledad/"><img src="/photos/337/thumb-soledad.jpg" alt="" height="102" width="136" class="h"/> La Soledad</a></li>

<li><a href="./cathedrale/"><img src="/photos/345/thumb-cathedrale.jpg" alt="" height="102" width="136" class="h"/> Cathédrale d'Oaxaca</a></li>

<li><a href="./arcades/"><img src="/photos/334/thumb-arcades.jpg" alt="" height="136" width="102" class="v"/> Arcades</a></li>

Autant j'ai du mal à m'y retrouver dans le css !

Est ce que vous pourriez me dire ce qu'il faut mettre dans le css pour que la légende présente dans la balise li se trouve sous la vignette et que la galerie reste bien bloc ( vignette les une après les autres à l'horizontale)!

<li><a href="photo.jpg"  title="Opera "><img src="photo/nuit-web.jpg" alt="description"/></a><p>Ceci est une photo Ceci est une photo Ceci est une photo</p></li> 

Merci de votre aide !

@+

Bonsoir

Lis ça , les commentaires datent un peu, mais c'est bon à prendre.
Lien ici grand débat sur l'utilité de certaines fonctions et leur exotisme.

Bien lire la remarque de Fabrice Bonny

J'ai commenté le source et rajouté des images.

Utilise l'inspecteur de firebug, tu vas voir c'est pratique.
Firebug ici

@+

Bonjour à tous,
Merci Michel pour ces liens !
Après plusieurs essais j'arrive à ce résultat :

<div class="contenu-sommaire">
  
 <div class="vignette"><a href="page-n1.php" title="Photos Nuit" ><img src="photo/nuit-(20)-web.jpg" alt=" Nuit" /></a><ul>
<li class="legende">Galerie photos de Nuit</li>
</ul>   
</div>
  <div class="vignette"><a href="page-n1.php" title="Photos Nuit" ><img src="photo/nuit-(20)-web.jpg" alt=" Nuit" /></a><ul>
<li class="legende">Galerie photos de Nuit</li>
</ul>   
</div>
 <div class="vignette"><a href="page-n1.php" title="Photos Nuit" ><img src="photo/nuit-(20)-web.jpg" alt=" Nuit" /></a><ul>
<li class="legende">Galerie photos de Nuit</li>
</ul>   
</div>
 <div class="vignette"><a href="page-n1.php" title="Photos Nuit" ><img src="photo/nuit-(20)-web.jpg" alt=" Nuit" /></a><ul>
<li class="legende">Galerie photos de Nuit</li>
</ul>   
</div>
 <div class="vignette"><a href="page-n1.php" title="Photos Nuit" ><img src="photo/nuit-(20)-web.jpg" alt=" Nuit" /></a><ul>
<li class="legende">Galerie photos de Nuit</li>
</ul>   
</div>
 <div class="vignette"><a href="page-n1.php" title="Photos Nuit" ><img src="photo/nuit-(20)-web.jpg" alt=" Nuit" /></a><ul>
<li class="legende">Galerie photos de Nuit</li>
</ul>   
</div>
 <div class="vignette"><a href="page-n1.php" title="Photos Nuit" ><img src="photo/nuit-(20)-web.jpg" alt=" Nuit" /></a><ul>
<li class="legende">Galerie photos de Nuit</li>
</ul>   
</div>

 	</div>
           <hr class="truc-pousse-bloc" />

Pour le Css :

.contenu-sommaire {
margin-top: 20px;
margin-bottom: 60px;
	
}

div.vignette {
	float: left;
	height: 150px;
	width:230px;
	margin: 3px;
	border: 1px solid #000000;
	text-align: center;
	padding-top : 10px;
	padding-bottom: 10px;
	background-color:#999999;
  }
  
  div.vignette img  {
	border: 2px solid;
	border-color: #000000;
	max-width: 190px;
	max-height: 160px;
}
  
div.vignette img a {
	
}

div.vignette ul {

 
  }
li.legende {
	list-style-type:none;
	height: 30px;
	display: block;
	text-align: center;

}


.truc-pousse-bloc {
	clear: both ;
	visibility: hidden;
}

En espérant que cela puisse servir à d'autres !

Bonne journée et bonne continuation

Bonjour,
J'utilise une petite galerie opensource en php seul. J'en suis très satisfait.

Mon problème c'est la sécurité.

Ma question est la suivante : D'après vous, y-a-t'il possibilité de me faire pirater dans ces mentions d'erreurs ?


Au sujet de cette galerie, je cherche aussi quelqu'un(e) qui serait intéressé(e) à la développer avec ou sans moi (parce que je suis fort peu compétent).

Merci d'avance, pierreandre
Modifié par pierreandre (24 Aug 2008 - 01:17)