Bonjour,
je dois faire une galerie qui doit ressembler à ça :
le problème est que les images et les textes doivent être aligner en bas et non en haut comme sur cette image .
J'avais penser faire une class par format d'image, mais cette solution me semble lourde et pas pratique pour des ajouts future d'images.
Je cherche donc une solution autre que celle là, mais je n'ai pas trouvé de solution, si quelqu'un a une piste je suis preneur.
Voici le html :
et le CSS :
je dois faire une galerie qui doit ressembler à ça :
le problème est que les images et les textes doivent être aligner en bas et non en haut comme sur cette image .
J'avais penser faire une class par format d'image, mais cette solution me semble lourde et pas pratique pour des ajouts future d'images.
Je cherche donc une solution autre que celle là, mais je n'ai pas trouvé de solution, si quelqu'un a une piste je suis preneur.
Voici le html :
Bloc de code:
<div id="affiches">
<div id="gallery">
<dl class="gallery">
<dt><img src="Affiches/historique/1995.jpg" alt="" /></dt>
<dt>Ici le titre</dt>
</dl>
<dl class="gallery">
<dt><img src="Affiches/historique/1996.jpg" alt=""/></dt>
<dt>Ici le titre</dt>
</dl>
<dl class="gallery">
<dt><img src="Affiches/historique/1997.jpg" alt=""/></dt>
<dt>Ici le titre</dt>
</dl>
<dl class="gallery">
<dt><img src="Affiches/historique/1998.jpg" alt=""/></dt>
<dt>Ici le titre</dt>
</dl>
<dl class="gallery">
<dt><img src="Affiches/historique/1999.jpg" alt=""/></dt>
<dt>Ici le titre</dt>
</dl>
<dl class="gallery">
<dt><img src="Affiches/historique/2000.jpg" alt=""/></dt>
<dt>Ici le titre</dt>
</dl>
<dl class="gallery">
<dt><img src="Affiches/historique/2001.jpg" alt=""/></dt>
<dt>Ici le titre</dt>
</dl>
<dl class="gallery">
<dt><img src="Affiches/historique/2002.jpg" alt=""/></dt>
<dt>Ici le titre</dt>
</dl>
<dl class="gallery">
<dt><img src="Affiches/historique/2003.jpg" alt=""/></dt>
<dt>Ici le titre</dt>
</dl>
<dl class="gallery">
<dt><img src="Affiches/historique/2004.jpg" alt="affiche 2004"/></dt>
<dt>Ici le titre</dt>
</dl>
<dl class="gallery">
<dt><img src="Affiches/historique/2005.jpg" alt="affiche 2005"/></dt>
<dt>Ici le titre</dt>
</dl>
<dl class="gallery">
<dt><img src="Affiches/historique/2006.jpg" alt=""/></dt>
<dt>Ici le titre</dt>
</dl>
</div>
<p>Sites des éditions précédentes : 2000 - 2001 - 2002 - 2003 - 2004 -2005 -2006</p>
</div>et le CSS :
Bloc de code:
#affiches {
background-color:#902312;
margin-bottom:10px;
margin-left:25px;
width:700px;
height:240px;
overflow:auto;
}
#affiches p{
margin:0 0 0 5px;
float:left;
display:inline;
color:#ffffff;
}
#gallery {
width:1200px;
}
dl.gallery
{
text-align: center;
padding: 2px;
float: left;
margin-right: 2px;
}
.gallery dt {
font-weight: bold;
}
.gallery dt img
{
width: auto;
height: auto;
}
