Menu images + titres
Résolu
TeeZor
Messages postés
23
Statut
Membre
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'ai un menu HTML/CSS qui se présente de la façon suivante:
Quelles seraient les propriétés à appliquer à ma classe titre pour que les noms de mes rubriques apparaisent centrer sur leur image respective ? Car pour le moment les noms apparaissent en-dessous (ou à coté si je les display en inline-block).
Merci
j'ai un menu HTML/CSS qui se présente de la façon suivante:
<table>
<tr>
<td><img src="image1.png"><span class="titre">Nom rubrique 1</span></td>
<td><img src="image2.png"><span class="titre">Nom rubrique 2</span></td>
<td><img src="image3.png"><span class="titre">Nom rubrique 3</span></td>
<td><img src="image4.png"><span class="titre">Nom rubrique 4</span></td>
<td><img src="image5.png"><span class="titre">Nom rubrique 5</span></td>
</tr>
</table>
Quelles seraient les propriétés à appliquer à ma classe titre pour que les noms de mes rubriques apparaisent centrer sur leur image respective ? Car pour le moment les noms apparaissent en-dessous (ou à coté si je les display en inline-block).
Merci
1 réponse
-
Salut
bon déja ne jamais utiliser la balise table pour autre chose que des données tabulaires. Pas de table pour le positionnement. Ensuite ce n'est pas un menu car il n'y a aucun lien
fait plutot ca
la on imagine que tes images font 150px X 150px si elle n'ont pas toutes la meme taille difficile de faire ce que tu demande
le html
<div id="menu">
<ul>
<li><a href="#"><img src="image1.png"><span>Nom rubrique 1</span></a></li>
<li><a href="#"><img src="image2.png"><span>Nom rubrique 2</span></a></li>
<li><a href="#"><img src="image3.png"><span>Nom rubrique 3</span></a></li>
<li><a href="#"><img src="image4.png"><span>Nom rubrique 4</span></a></li>
<li><a href="#"><img src="image5.png"><span>Nom rubrique 5</span></a></li>
</ul>
</div>
le css
#menu ul {
margin:0;
padding:0;
text-align:center;
}
#menu li {
display:inline-block;
list-style-type:none;
margin:0 30px; /***adapter pour ecartement entre les images***/
}
#menu span {
width: 150px; /***meme largeur que les images***/
position:absolute;
text-align:center;
margin:60px -150px;/***a modifier suivant taille des images***/
}
voila ca te donne un menu centré le span centré dans les images
