Menu images + titres

Résolu/Fermé

TeeZor Messages postés 19 Date d'inscription dimanche 26 août 2012 Statut Membre Dernière intervention 3 septembre 2014 - Modifié par TeeZor le 22/12/2013 à 12:16
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 22 déc. 2013 à 19:01

Bonjour,

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
Menu démarrer windows 11 - Guide
Canon quick menu - Télécharger - Utilitaires
Menu demarrer - Guide
Images gratuites - Guide

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
22 déc. 2013 à 14:52

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">Nom rubrique 1</a></li>
<li><a href="#"><img src="image2.png">Nom rubrique 2</a></li>
<li><a href="#"><img src="image3.png">Nom rubrique 3</a></li>
<li><a href="#"><img src="image4.png">Nom rubrique 4</a></li>
<li><a href="#"><img src="image5.png">Nom rubrique 5</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

TeeZor Messages postés 19 Date d'inscription dimanche 26 août 2012 Statut Membre Dernière intervention 3 septembre 2014
22 déc. 2013 à 18:32

C'est parfait ;)

Merci beaucoup

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
22 déc. 2013 à 19:01

tu peux mettre le sujet en résolu

Discussions similaires

Question PIX

calcule nombre des pixels "noir" dans un image (noir/blanc)

Excel formule : compter le nombre de valeurs différentes

les entrées et les sortées

Suppression totale des titres likés dans Spotify

Discussions similaires

Newsletters