Effet de transparence sur menu

Question

claude67

4 May 2008 à 10:20

Bonjour,

débutant en css, j'essais de modifier le menu graphique 1 de la galerie de menu css.
Mon problème:Quand je rajoute un lien sur le menu (lien 8 et 9), l'effet de survol ne fonctionne pas sur le lien rajouté.
J'ai cherché un peu partout sur le site mais n'étant pas encore habitué aux termes employés, j'ai un peu de mal.
Ci-dessous mon script. Si quelqu'un à une idée merci d'avance.

<head>
<title>Un menu avec multiples survols sans preload d'images</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* CSS issu des tutoriels css.alsacreations.com */
body {
background-color: #F5E9CF;
}
ul, li { /* utilisation de liste pour le menu */
list-style-type: none; /* suppression des puces de liste */
margin:0;
padding:0;
}
ul {
position: absolute; /* positionnement pour IE5 et IE5.5 */
top: 0px;
left: 0%;
background: transparent url(img_menu.jpg) top left no-repeat; /* arrière-plan général du menu */
width: 160px;
padding-top: 57px;
text-align: center;
}
li {display: inline;} /* correction pour IE5 et IE5.5 */

li a { /* dimensions et définitions des boutons */
display: block; /* mise en block de <a> pour lui donner des dimensions */
height: 30px;
width: 160px;
color: #660000;
font-size: 14px;
font-family: georgia, serif;
text-decoration: none;
line-height: 25px; /* hauteur de ligne pour éviter les paddings */
}
li a:hover {
color: #fff;
background: transparent url(img_menu.jpg) top left no-repeat;
}
a#lien1:hover { /* décalage de l'arrière-plan pour chaque bouton */
background-position: 0% -327px;
}
a#lien2:hover {
background-position: 0% -357px;
}
a#lien3:hover {
background-position: 0% -387px;
}
a#lien4:hover {
background-position: 0% -417px;
}
a#lien5:hover {
background-position: 0% -447px;
}
a#lien6:hover {
background-position: 0% -477px;
}
a#lien7:hover {
background-position: 0% -507px;
}
a#lien8:hover {
background-position: 0% -537px;
}
a#lien9:hover {
background-position: 0% -567px;
}

</style>
</head>
<body>
<ul>
<li><a id="lien1" href="#">Lien 1</a></li>
<li><a id="lien2" href="#">Lien 2</a></li>
<li><a id="lien3" href="#">Lien 3</a></li>
<li><a id="lien4" href="#">Lien 4</a></li>
<li><a id="lien5" href="#">Lien 5</a></li>
<li><a id="lien6" href="#">Lien 6</a></li>
<li><a id="lien7" href="#">Lien 7</a></li>
<li><a id="lien8" href="#">Lien 8</a></li>
<li><a id="lien9" href="#">Lien 9</a></li>
</ul>

</body>
</html>

Igor

4 May 2008 à 10:24

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

claude67

4 May 2008 à 10:52

Avec mes excuses

Donc voici mon problème:Quand je rajoute un lien sur le menu (lien 8 et 9), l'effet de survol ne fonctionne pas sur le lien rajouté.


<head>
<title>Un menu avec multiples survols sans preload d'images</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* CSS issu des tutoriels css.alsacreations.com */
body {
background-color: #F5E9CF;
}
ul, li {	/* utilisation de liste pour le menu */
list-style-type: none;	/* suppression des puces de liste */
margin:0;
padding:0;
}
ul {
position: absolute;	/* positionnement pour IE5 et IE5.5 */
top: 0px;
left: 0%;
background: transparent url(img_menu.jpg) top left no-repeat;	/* arrière-plan général du menu */
width: 160px;
padding-top: 57px;
text-align: center;
}
li {display: inline;}	/* correction pour IE5 et IE5.5 */

li a {	/* dimensions et définitions des boutons */
display: block;	/* mise en block de <a> pour lui donner des dimensions */
height: 30px;
width: 160px;
color: #660000;
font-size: 14px;
font-family: georgia, serif;
text-decoration: none;
line-height: 25px;	/* hauteur de ligne pour éviter les paddings */
}
li a:hover {
color: #fff;
background: transparent url(img_menu.jpg) top left no-repeat;
}
a#lien1:hover {	/* décalage de l'arrière-plan pour chaque bouton */
background-position: 0% -327px;
}
a#lien2:hover {
background-position: 0% -357px;
}
a#lien3:hover {
background-position: 0% -387px;
}
a#lien4:hover {
background-position: 0% -417px;
}
a#lien5:hover {
background-position: 0% -447px;
}
a#lien6:hover {
background-position: 0% -477px;
}
a#lien7:hover {
background-position: 0% -507px;
}
a#lien8:hover {
background-position: 0% -537px;
}
a#lien9:hover {
background-position: 0% -567px;
}

</style>
</head>
<body>
<ul>
	<li><a id="lien1" href="#">Lien 1</a></li>
	<li><a id="lien2" href="#">Lien 2</a></li>
	<li><a id="lien3" href="#">Lien 3</a></li>
	<li><a id="lien4" href="#">Lien 4</a></li>
	<li><a id="lien5" href="#">Lien 5</a></li>
	<li><a id="lien6" href="#">Lien 6</a></li>
	<li><a id="lien7" href="#">Lien 7</a></li>
	<li><a id="lien8" href="#">Lien 8</a></li>
	<li><a id="lien9" href="#">Lien 9</a></li>
</ul>


</body>
</html>

Heyoan

4 May 2008 à 11:53

Salut claude67,

en faisant le test chez moi avec une de mes images cela fonctionne... est-ce que le problème ne viendrait pas tout simplement du fait que ton image img_menu.jpg n'est pas assez haute pour aller jusqu'en bas des <li> 8 et 9 Smiley cligne

?

A+

Edit: sinon en passant tu as dans tes balises <style> 
Modifié par Heyoan (04 May 2008 - 11:58)

6l20

4 May 2008 à 11:55

Bonjour claude67,

Sans une page en ligne ou l'image de fond que tu utilises pour ce menu, il va être difficile de te venir en aide Smiley cligne

Sinon, comme Igor te le suggérait, il suffisait d'éditer ton premier message pour mettre en forme ton code Smiley cligne

*Je suis définitivement trop lent Smiley ohwell

Modifié par 6l20 (04 May 2008 - 12:06)

Sujet clos

CSS et mise en forme, CSS3

Effet de transparence sur menu