Menu horizontal : chaque élément a une image et un texte superposés

Bonjour,

Je suis devenu un grand fan de cet communauté, et maintenant j'appelle à l'aide.
Je désire obtenir un menu qui ressemble à ça :

Pour chaque élément, une image et un texte centré en dessous. Les éléments sont alignés horizontalement, et idéalement, font tous la même largeur.

J'ai obtenu ceci avec ce code :

<div id="menu">
<table><tr>
<td><a class="menucurrent" href="index.php5?page=updated"><img src="images/updated_red.jpg" alt="Home" /><span>Home</span></a>

</td><td><a class="menulink" href="index.php5?page=news"><img src="images/news.jpg" alt="News" /><span>News</span></a>
</td><td><a class="menulink" href="index.php5?page=music"><img src="images/music.jpg" alt="Music" /><span>Music</span></a>
</td><td><a class="menulink" href="index.php5?page=blog"><img src="images/blog.jpg" alt="Blog" /><span>Blog</span></a>
</td><td><a class="menulink" href="index.php5?page=the_band"><img src="images/the_band.jpg" alt="Band" /><span>Band</span></a>
</td><td><a class="menulink" href="index.php5?page=gallery"><img src="images/gallery.jpg" alt="Gallery" /><span>Gallery</span></a>
</td></tr></table>
</div>

Maintenant j'ai décidé en lisant les magnifiques tutoriaux de ce site d'utiliser ce code là :

<div id="navigation">
		<ul>
		<li><a class="menuitemcurrentpage" href="#"><img src="images/updated_red.jpg" alt="Updated Stuff"/><span>Home</span></a></li>
		<li><a class="menuitem" href="#"><img src="images/news.jpg" alt="News"/><span>News</span></a></li>

		<li><a class="menuitem" href="#"><img src="images/music.jpg" alt="Music"/><span>Music</span></a></li>
		<li><a class="menuitem" href="#"><img src="images/blog.jpg" alt="Blog"/><span>Blog</span></a></li>
		<li><a class="menuitem" href="#"><img src="images/the_band.jpg" alt="The Band"/><span>The Band</span></a></li>
		<li><a class="menuitem" href="#"><img src="images/gallery.jpg" alt="Gallery"/><span>Gallery</span></a></li>
		
		</ul>
	</div>

Ce qui est plus joli et plus propre.

Pour obtenir l'effet précédent j'ai d'abord penser utiliser la propriété display : table-cell. Mais IE ne la prends pas en compte.

J'ai donc ensuite pensé à ça :

#navigation {
	position : absolute;
	right : 20px;
	top : 10px;
	
}

#navigation ul li {
	display : inline;
	position : relative;
	height : 80px;
}

a.menuitem, a.menuitemcurrentpage {
	display : inline;
	text-decoration : none;
}

a.menuitem img, a.menuitemcurrentpage img {
	position : relative; 
	top : -15px;
	left : 30px;
}

/* plus quelques propriétés de couleur et deco inintéressantes. */

J'arrive à quelquechose de correct, mais le texte n'est bien évidemment pas toujours centré sous l'image car il est de longueur variable. De plus les éléments sont de largeurs variables.

J'ai déjà pas mal avancé dans ce petit problème, j'aimerais juste savoir si vous avez d'autres idées pour faire quelquechose d'encore plus proche de mon objectif.

Merci

Quentin

Plus
Modifié par quentin (01 May 2007 - 15:53)

Bonjour,

Je pense que tes illustrations ont plutôt leur place dans ta feuille de style, et non dans ton code html; elles n'apportent aucune information mais ont au contraire un rôle essentiellement esthétique.

Dans le code suivant :

<a class="menuitem" href="#"><img src="images/music.jpg" alt="Music"/><span>Music</span></a>

l'information « Music » est en double : une fois comme texte alternatif de l'image, une fois en texte brut.

Tes images sont des images d'illustration. Tu as deux moyens pour les afficher :
- soit en insérant les images directement dans le code HTML... dans ce cas, l'attribut alt devra être vide (<img src="..." alt="" />) ;
- soit en les insérant comme images de fond de blocs avec la propriété CSS background-image.

Tu pourrais faire quelque chose comme ça :

#navigation ul li {
	float: left;
	width: 50px;
}
#navigation ul li a {
	display: block;
	padding-top: 60px;
	text-align: center;
	color: gray;
	text-decoration: none;
}
#navigation ul li a#nav-home {
	background: white url(images/nav-home1.png) no-repeat center top;
}
#navigation ul li a#nav-home:hover,
#navigation ul li a#nav-home:focus,
#navigation ul li a#nav-home:active
 {
	background: white url(images/nav-home2.png) no-repeat center top;
	color: red;
	font-weight: bold;
}

(Juste pour donner quelques pistes...)

Je sais que l'image ne fait pas partie de l'information du document, mais chaque élément possède une image différente (c'est quelquechose que mon "client", <edit par Cygnus> Chuttteuh ! Ca ne se dit pas ces choses là !</edit>, veut).
J'ai donc pensé que le plus simple était de les insérer dans le code HTML (cela dit, merci pour la remarque sur l'attribut alt.

Il est à noter que ce menu sera créé dynamiquement en PHP. Par conséquent, si je voulais mettre ces images en background, il faudrait créer dynamiquement un bout de code CSS en entete du document. Après mûre réflexion cela peut etre une piste interessante.

Cela ne resoud pas le probleme de la largeur des éléments qui devrait être la même pour tous. Les aligner horizontalement veut dire utiliser du display : inline. Ce qui il me semble rend impossible l'utilisation de la propriéré width.

Quentin
Modifié par Cygnus (01 May 2007 - 18:39)

quentin a écrit :
Je sais que l'image ne fait pas partie de l'information du document, mais chaque élément possède une image différente.
J'ai donc pensé que le plus simple était de les insérer dans le code HTML (cela dit, merci pour la remarque sur l'attribut alt.

Tu peux tout à fait appliquer les conseils de Florent.
Pour cela il te suffit de différencer chaque lien au moyen d'un id dans le code Html.
Dans ton fichier css, tu affecteras simplement un arrière-plan différent en fonction de l'identifiant du lien.