Bonjour à tous,
J'ai essayé de concevoir un menu dans le style de celui d'Alsacréations.fr, c'est à dire avec une seule image (sans preload) et en s'occupant bien des background on devrait pouvoir afficher la partie du bas de l'image en hover, non ?
Bah apparement ça ne marche pas, j'ai essayé de modifier les positions dans la mesure où mon image est une 600*100 donc que la deuxième partie commence à 100 px, je me permet donc de vous mettre la page : ici. Pour ce qui concerne le css, le voila :
Modifié par Makushimucool (08 Apr 2006 - 11:07)
J'ai essayé de concevoir un menu dans le style de celui d'Alsacréations.fr, c'est à dire avec une seule image (sans preload) et en s'occupant bien des background on devrait pouvoir afficher la partie du bas de l'image en hover, non ?
Bah apparement ça ne marche pas, j'ai essayé de modifier les positions dans la mesure où mon image est une 600*100 donc que la deuxième partie commence à 100 px, je me permet donc de vous mettre la page : ici. Pour ce qui concerne le css, le voila :
/* CSS Document */
#menu {
position: relative;
width: 600px;
height: 100px;
margin: 0 auto;
text-align: left;
}
#menu ul {
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 100px;
padding: 0;
margin:0;
background: yellow;
list-style: none;
background: transparent url(design/menu.png) top left no-repeat;
}
#menu li {
float: left;
padding: 0;
margin:0;
text-indent: 50px;
}
#menu li a {
display: block;
height: 50px;
width: 600px;
text-decoration: none;
font-size: 1px;
line-height: 0x;
color: #C6C1A3;
}
#menu li a span {
position: absolute;
left: -5000px;
}
#menu li a:hover {
background: transparent url(design/menu.png) top left no-repeat;
}
#menu a#actu:hover {
background-position: 10px -0px;
color: #6882c3;
}
#menu a#rubriques:hover {
background-position: -130px -0px;
color: #8fab10;
}
#menu a#blog:hover {
background-position: -250px -0px;
color: #ffc326;
}
#menu a#forum:hover {
background-position: -370px -0px;
color: #ffc326;
}
#menu a#topsecret:hover {
background-position: -490px -0px;
color: #ffc326;
}
Modifié par Makushimucool (08 Apr 2006 - 11:07)