Pb de mise en forme d'un menu graphique avec des images réactives

Bonjour à tous,

Je tente de concevoir un menu graphique et je rencontre un problème d'affichage des images le composant.
CSS :

ul#menu {
	list-style-type: none;
}

#menu li {
display: inline;
}

#menu a {
	background: url(images/accueil_off.png) no-repeat;
	width: 37px;
	height: 20px;
}

#menu a:hover {
	background: url(images/accueil_on.png) no-repeat;
}

Page :

<ul id="menu">
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
</ul>

Mon problème est que l'image qui se trouve dans le lien ne s'affiche pas .

La seule astuce que j'ai trouvé est d'ajouter au niveau de la CSS sur #menu a la ligne suivante :

display : block;

alors, mon image s'affiche parfaitement mais le menu s'affiche verticalement .

Auriez vous une solution à me proposer sachant que l'image du menu contient déjà du texte, c'est pour cette raison que la balise a est vide.

Par avance, merci pour les iadées ou astuces que vous pourrz me proposer.

Amicalement,

Emmanuel

Salut

A tu essayé de mettre

#menu a {
	background: url(images/accueil_off.png) no-repeat;
	display : block;
	width: 37px;
	height: 20px;
}

#menu li {

display: inline;

}

Pour définir une taille d'un élément il doit être de type bloc

A+
Modifié par gege71 (29 Apr 2006 - 18:33)

Salut,

Comme le dit parfaitement gege71, tu ne peux attribuer une taille à un élément uniquement si cette élément est de type bloc. Or un lien est de type "en ligne".

Par contre, je ne suis pas sûr que la solution que tu proposes gege71 soit correcte. En effet, tu ne peux pas transformer la balise li (qui est un élément de type bloc) en élément de type "en ligne" alors qu'elle contient un élément de type bloc qui est ton lien

Une autre solution serait :

#menu a {
	background: url(images/accueil_off.png) no-repeat;
	display : block;
	width: 37px;
	height: 20px;
}

#menu li { float: left; /* ou right; */ }

Bonne continuation .
Modifié par ymhotepa (29 Apr 2006 - 18:50)

ymhotepa a écrit :

Par contre, je ne suis pas sûr que la solution que tu proposes gege71 soit correcte. En effet, tu ne peux pas transformer la balise li (qui est un élément de type bloc) en élément de type "en ligne" alors qu'elle contient un élément de type bloc qui est ton lien

Autant pour moi , tu a raison je n'avait pas réfléchi suffisamment
A+

Merci ymhotepa,

Ca tourne impec, par contre une dernière petite question.

Sachant que mon menu est composé d'images, ceci m'étant imposé par la création graphique, je perds l'accessibilité pour les déficients visuels.

Disposez vous d'une astuce dans ce genre de cas ?

Amicalement,

Emmanuel