Menu images + titres
Résolu
TeeZor
Messages postés
18
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 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
A voir également:
- Menu images + titres
- Menu déroulant excel - Guide
- Des images - Guide
- Canon quick menu - Télécharger - Utilitaires
- Appliquez à tous les paragraphes du document à télécharger, à l’exception des titres et des sous-titres, la mise en forme suivante : - Guide
- Windows 11 menu contextuel classique - Guide
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
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
Merci beaucoup