bonsoir et merci pour ce site .
j'ai fais un roolover avec le tuto, 1 seule image , et aprés quelques essais (suis débutant)
le résultat est concluant.
par contre c'est surement simple, mais je voudrais intégrer une image en arrière plan; et comme je suis encore un peu perdu entre div / div class ul . et #
je fais donc appel au sav pour aide.
l'image de fond fait 237 x353 et 80 x 50 pour le menu.
voila mon code:
et le css :
si quelqu'un à une idée, ça serait sympa, merci.
Modifié par david.28 (25 Oct 2005 - 23:50)
j'ai fais un roolover avec le tuto, 1 seule image , et aprés quelques essais (suis débutant)
le résultat est concluant.par contre c'est surement simple, mais je voudrais intégrer une image en arrière plan; et comme je suis encore un peu perdu entre div / div class ul . et #
je fais donc appel au sav pour aide.l'image de fond fait 237 x353 et 80 x 50 pour le menu.
voila mon code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link rel="stylesheet" href="../style_css/menu_test_3.css" type="text/css">
</head>
<body>
<div id="menu">
<ul id"test">
<li><a href="#">item n°1</a></li>
<li><a href="#">item n°2</a></li>
<li><a href="#">item n°3</a></li>
<li><a href="#">item n°4</a></li>
<li><a href="#">item n°5</a></li>
<li><a href="#">item n°6</a></li>
<li><a href="#">item n°7</a></li>
<li><a href="#">item n°8</a></li>
</ul></div>
</body>
</html> et le css :
div#menu{
background-image: url(../library/design/menu_1.png);
height: 353px;
width: 237px;
background-repeat: no-repeat;
}
ul#test
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}
ul#test li
{
margin: 0 0 5px 0 ;
padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}
ul#test li a
{
display: block; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
width: 70px;
line-height: 21px;
color: #000;
text-indent: 20px; /* On décale le texte de 40px du bord gauche */
text-decoration: none;
background: url(../library/design/bt/Sans titre-4.gif) no-repeat 0 0; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
border: 1px solid #dbd;
}
ul#test li a:hover
{
background: url(../library/design/bt/Sans titre-4.gif) no-repeat 0 -21px; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
border: 1px solid #f97;
}si quelqu'un à une idée, ça serait sympa, merci.
Modifié par david.28 (25 Oct 2005 - 23:50)
!