Discussion :

[tofito]

Bonjour.

J'essaie de faire un menu en CSS pour mon site.
Le résultat est consultable ici: http://dladobe.free.fr/new02/
En temps normal l'item "Accueil" du menu est désactivé et le mot "Accueil" est écrit en noir sur fonds blanc. Par contre au passage de la souris sur le mot, je voudrais que le mot soit écrit en blanc au dessus de l'image http://dladobe.free.fr/new02/images/menu-02-on.jpg

Ce que j'ai écrit marche à moitié puisque au passage du curseur sur le mot, il y a bien une partie de l'image qui s'affiche mais ce n'est qu'un affichage partiel, je voudrais que l'affichage soit similaire à celui des 3 éléments du menu en dessous de "Accueil"

Le code xhtml est le suivant:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
			<div id="menu_01">
			</div>
			<div>
				<a href="index.php"><span id="menu_02">Accueil</span></a>
			</div>
			<div id="menu_03">
			</div>
			<div id="menu_04">
				<a href="photos.php">Photos</a>
			</div>

et le code css est le suivant:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
#menu_1 #menu_01 {width: 390px; height: 20px; background: url(../images/menu-01.jpg) no-repeat;}
#menu_1 div a span#menu_02 {width: 140px; height: 40px; padding: 0 0 0 250px; background: url(../images/menu-02.jpg) no-repeat;}
#menu_1 div a:hover span#menu_02 {width: 140px; height: 40px; padding: 0 0 0 250px; background: url(../images/menu-02-on.jpg) no-repeat;}
#menu_1 div a:focus span#menu_02 {width: 140px; height: 40px; padding: 0 0 0 250px; background: url(../images/menu-02-on.jpg) no-repeat;}
#menu_1 #menu_03 {width: 390px; height: 20px; background: url(../images/menu-03.jpg) no-repeat;}

Si quelqu'un peut me filer un coup de main pour ce menu ce serait super sympa! Merci d'avance!

[adiGuba]

Salut,


Les éléments de types <a> sont des éléments inline, c'est à dire qu'il s'adapte à leurs contenu et que tu ne peux pas leurs fixer de taille : width et height sont donc complètement ignoré.

Il te faut utiliser le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

display: block;

Afin de le forcer à se comporter comme un élément de type block et donc prendre en compte les valeur des attributs width et height...

a++

[tofito]

Merci beaucoup! Tu me rends une fière chandelle!