28172 sujets

CSS et mise en forme, CSS3

Problème affichage du menu sur Firefox

Bonsoir à tous,

Je suis en train de faire un menu avec images en m'inspirant de ce tuto http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html.
Or celui-ci s'affiche très bien, sauf sur Firefox qui lui ignore complètement mon menu.

Voici la bride de code du menu HTML


<ul id="menu">
	<li class="concert"><a href="#"></a></li>
	<li class="biogra"><a href="#"></a></li>
	<li class="pro"><a href="#"></a></li>
	<li class="disco"><a href="#"></a></li>
	<li class="score"><a href="#"></a></li>
	<li class="presse"><a href="#"></a></li>
	<li class="photo"><a href="#"></a></li>
	<li class="lien"><a href="#"></a></li>
</ul>



Et celle de mon menu en CSS + la div colonne qui reçoit ce menu.



#colonne {
	width: 250px;
	height: 750px;
	float: left;
	background: url(../_img/fond.jpg) repeat-y;
}

/* MENU DE NAVIGATION */

ul#menu {
	list-style-type: none;	
	width: 231px;
	margin: 0;
	padding: 0 0 0 9px;
}

ul#menu li.concert a {
	display: block;	
	background: url(../img-menu/concert.gif) top top no-repeat;
	width: 231px;
	height: 28px;
	text-decoration: none;
	position: relative;
}
ul#menu li.concert a:hover {
	background: url(../img-menu/concert.gif) bottom top no-repeat;
}

ul#menu li.biogra a {
	display: block;	
	background: url(../img-menu/bio.gif) top top no-repeat;
	width: 231px;
	height: 28px;
	text-decoration: none;
}
ul#menu li.biogra a:hover {
	background: url(../img-menu/bio.gif) bottom top no-repeat;
}

ul#menu li.pro a {
	display: block;	
	background: url(../img-menu/pro.gif) top top no-repeat;
	width: 231px;
	height: 28px;
	text-decoration: none;
}
ul#menu li.pro a:hover {
	background: url(../img-menu/pro.gif) bottom top no-repeat;
}

ul#menu li.disco a {
	display: block;	
	background: url(../img-menu/disco.gif) top top no-repeat;
	width: 231px;
	height: 28px;
	text-decoration: none;
}
ul#menu li.disco a:hover {
	background: url(../img-menu/disco.gif) bottom top no-repeat;
}

ul#menu li.score a {
	display: block;	
	background: url(../img-menu/score.gif) top top no-repeat;
	width: 231px;
	height: 28px;
	text-decoration: none;
}
ul#menu li.score a:hover {
	background: url(../img-menu/score.gif) bottom top no-repeat;
}

ul#menu li.presse a {
	display: block;	
	background: url(../img-menu/presse.gif) top top no-repeat;
	width: 231px;
	height: 28px;
	text-decoration: none;
}
ul#menu li.presse a:hover {
	background: url(../img-menu/presse.gif) bottom top no-repeat;
}

ul#menu li.photo a {
	display: block;	
	background: url(../img-menu/photo.gif) top top no-repeat;
	width: 231px;
	height: 28px;
	text-decoration: none;
}
ul#menu li.photo a:hover {
	background: url(../img-menu/photo.gif) bottom top no-repeat;
}

ul#menu li.lien a {
	display: block;	
	background: url(../img-menu/lien.gif) top top no-repeat;
	width: 231px;
	height: 28px;
	text-decoration: none;
}
ul#menu li.lien a:hover {
	background: url(../img-menu/lien.gif) bottom top no-repeat;
}

ul#menu li.mail a {
	display: block;	
	background: url(../img-menu/mail.gif) top top no-repeat;
	width: 231px;
	height: 28px;
	text-decoration: none;
}
ul#menu li.mail a:hover {
	background: url(../img-menu/mail.gif) bottom top no-repeat;
}

/* FIN DU MENU DE NAVIGATION */


Merci pour vos conseils

Chrys
Je m'auto-réponds Smiley cligne

Il y a juste un top de trop dans tout tes background Smiley eek

merci qui ? Smiley langue

Chrys
J'espère que tu as bien lu l'avertissement concernant ce que tu a codé ?

Car d'un point de vu accessibilité, ce n'est pas une très bonne solution.
Sujet clos
Aller à