28173 sujets

CSS et mise en forme, CSS3

Galerie css alignement vertical

Bonjour,

je dois faire une galerie qui doit ressembler à ça :
galerie.jpg


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 :

                    
<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 :
#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;
}


EDIT par Julien Royer : merci d'éviter les images trop larges qui déforment le forum. Smiley smile
Modifié par Julien Royer (04 Mar 2007 - 12:40)
Sujet clos
Aller à