Exercice web pour créer un menu à partir de sprite.

Sprite pour menu : taille du bouton 78px 48px
sprites-navCode à suivre :

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
margin:0px;
position:40px;
}
#navlist li {
margin:0px;
padding-left:0px;
list-style: none;
position: absolute;
top:0;
}
#navlist li, #navlist a {
height: 48px;
display: block;
}
#home {
left: 0px;
width: 78px;
background: url(‘sprites-nav.gif’) 0 0;
}
#about {
left: 78px;
width: 78px;
background: url(‘sprites-nav.gif’) -78px 0;
}
#services {
left: 156px;
width: 78px;
background: url(‘sprites-nav.gif’) -156px 0;
}
#contact {
left: 234px;
width: 78px;
background: url(‘sprites-nav.gif’) -234px 0;
}
#home a:hover {
background: url(‘sprites-nav.gif’) 0 -48px;
}
#home a:active {
background: url(‘sprites-nav.gif’) 0 -98px;
}
#about a:hover {
background: url(‘sprites-nav.gif’) -78px -48px;
}
#about a:active {
background: url(‘sprites-nav.gif’) -78px -98px;
}
#services a:hover {
background: url(‘sprites-nav.gif’) -156px -48px;
}
#services a:active {
background: url(‘sprites-nav.gif’) -156px -98px;
}
#contact a:hover {
background: url(‘sprites-nav.gif’) -234px -48px;
}
#contact a:active {
background: url(‘sprites-nav.gif’) -234px -98px;
}
</style>
</head>
<body>

<ul id= »navlist »>
<li id= »home »><a href= »# »></a></li>
<li id= »about »><a href= »# »></a></li>
<li id= »services »><a href= »# »></a></li>
<li id= »contact »><a href= »# »></a></li>
</ul>

</body>
</html>

Résultat :

Laisser un commentaire