28173 sujets

CSS et mise en forme, CSS3

[Résolu] Difficulté pour afficher du texte sous chaque images alignées

Salut à tous,

Je sais pas trop comment faire pour mettre un petit texte juste en dessous de chacune des images qui sont alignées :

je vous montre le CSS : 

#materiel{
margin:0px;
padding:0px;
font-size:10px;
height:80px;
width:500px;
display:inline;

}
#materiel ul{
margin-top:10px;
padding:0px;
}
#materiel li{
list-style-type:none;
margin:0px;
padding:0px;
}
#materiel ul li{
margin:0px;
padding:0px 20px 0px 10px;
display:inline;
}
#materiel ul li img{
margin:0px;
padding:0px;
height:80px;
width:auto;
text-align:center;
}


Et le HTML :

<div id="materiel">
<ul>
<li><img src="http://chemin/image1.jpg" title="titre1"/>texte1</li>
<li><img src="http://chemin/image2.jpg" title="titre2" />texte2</li>
<li><img src="http://chemin/image3.jpg" title="titre3" />texte3</li>
</ul>
</div>


Merci.
Modifié par jpp13 (15 Jun 2007 - 13:42)
Merci, effectivement le texte se met où il faut mais les images ne sont plus alignées...

Alors que je veux le texte comme ca mais faut que les images soit alignées.

Merci de votre aide.
Modifié par jpp13 (15 Jun 2007 - 13:10)
Bonjour,

Laisse tes li en block et utilise un float left pour les "linéariser", l'utilistion du span en display: block te permet de centrer ton texte mais (il y en a un Smiley cligne ) c'est de fixer son width et donc de connaitre celui de l'image !
		<style type="text/css">
#materiel{
margin:0px;
padding:0px;
font-size:10px;
height:80px;
width:500px;
}

#materiel ul{
margin-top:10px;
padding:0px;
}

#materiel li{
list-style-type:none;
margin-right: 20px;
padding:0px;
float: left;
}

#materiel ul li span{
display: block;
width: 50px;
text-align: center;
}

#materiel ul li img{
margin:0px;
padding:0px;
height:80px;
width:auto;
}

</style>
<body>
<div id="materiel">
<ul>
<li><img src="img1.jpg" title="titre1"/><span>texte1</span></li>
<li><img src="img2.jpg" title="titre2" /><span>texte2</span></li>
<li><img src="img3.jpg" title="titre3" /><span>texte3</span></li>
</ul>
</div>
Sujet clos
Aller à