[resolu] Pb menu css image réactive

Salut à tous

Je cherche à faire un menu horizontal avec image réactive. Le résultat obtenu n'est pas celui souhaité. J'aimerais savoir si j'suis pas trop à l'ouest dans mes codes.

Pour voir le résultat c'est PAR ICI

code xhtml

<ul id="menu">
			<li class="home"><a href="home.php">home</a></li>
			<li class="portfolio"><a href="portfolio.php">portfolio</a></li>
			<li class="contact"><a href="contact.php">contact</a></li>
		</ul>

code css

/* MENU */

#menu  {
		margin-left: 50px;
		padding-left: 50px;
}

#menu li {
		margin-right: 100px;
		display: inline;
		list-style-type: none;
}

.home a   {
		display: block;
		background: url(img/webdiz/home.png) no-repeat 0 0;
		line-height: 69px;
		width: 126px;
		text-indent: -5000px;
}

.home a:hover {
		background: url(img/webdiz/home.png) no-repeat 0 -69px;
}

.portfolio a {
		display: block;
		background: url(img/webdiz/portfolio.png) no-repeat 0 0;
		width: 135px;
		line-height: 72px;
		text-indent: -5000px;
}

.portfolio a:hover {
		background: url(img/webdiz/portfolio.png) no-repeat 0 -72px;
}

.contact a {
		display: block;
		background: url(img/webdiz/contact.png) no-repeat 0 0;
		width: 122px;
		line-height: 68px;
		text-indent: -5000px;
}

.contact a:hover {
		background: url(img/webdiz/contact.png) no-repeat 0 -68px;
}

Voila, en attendant je continue mes recherches
Modifié par cedriik__ (22 Jan 2008 - 19:09)

Salut,

Bon bah toujours pas résolu mon problème...

Sait-on jamais si quelqu'un passe par la

Bonjour,

Peux-être quelque chose de ce type ?
Sans doute faudra-t-il faire quelques retouches...

/* MENU */

#menu  {
		margin-left: 50px;
		padding-left: 50px;
}
#menu a {float:left;}
#menu li {
		margin-right: 100px;
		list-style-type: none;
}
#menu li a {margin-left:30px;}
.home a   {
		display: block;
		background: url(img/webdiz/home.png) no-repeat 0 0;
		line-height: 69px;
		width: 126px;
		text-indent: -5000px;
}

.home a:hover {
		background: url(img/webdiz/home.png) no-repeat 0 -69px;
}

.portfolio a {
		display: block;
		background: url(img/webdiz/portfolio.png) no-repeat 0 0;
		width: 135px;
		line-height: 72px;
		text-indent: -5000px;
}

.portfolio a:hover {
		background: url(img/webdiz/portfolio.png) no-repeat 0 -72px;
}

.contact a {
		display: block;
		background: url(img/webdiz/contact.png) no-repeat 0 0;
		width: 122px;
		line-height: 68px;
		text-indent: -5000px;
               

}

.contact a:hover {
		background: url(img/webdiz/contact.png) no-repeat 0 -68px;
}

A prendre pour ce que cela vaut...
Cdt,
Sylvain

Merci bien 6l20

ça fonctionne bien, il a juste fallut que je bidouille un peu mais sinon c'était bien ça. j'te remercie