18041 sujets

Questions générales et questions de débutants

{Résolu] Tutorial: menu graphique 1 Médieval

Bonjour,

Je ne parviens pas à faire fonctionner le menu Médieval dont le tutorial est sur le site.

Il marche parfaitement lorsque je suis sur le site Alsacréations.
Par contre celà ne fonctionne pas quand je copie le source dans Dreamweaver et que je ne remplace que l'image de fond par la mienne.

Je voudrais qu'il fonctionne sous ie6 et ie7 .

Voici ce que celà donne :http://www.fdbi.com/test/menuderoulant4.htm.
Lorsque l'on passe sur un lien je souhaiterai que le fond de l'image s'obscurcisse comme sur le tutorial.

Avez-vous une idée?

Je vous joins le code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<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: 50px;
left: 20%;
background: transparent url(images/terre.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: 17px;
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(images/terre.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;
}

/* mentions et copyright */
div#mentions {
  font-family: verdana, arial, sans-serif;
  position: absolute;
  bottom : 200px;
  left : 10px;
  width: 400px;
  margin: 1em;
  padding: 0.5em;
  background: #FFF7D2;
  -moz-border-radius:10px;
  border-radius:10px;
  line-height: 1.1;
  font-size: 0.9em;
}
div#mentions a {
  text-decoration: none;
  color: #222;
}
div#mentions a:hover {
  text-decoration: underline;
  color: black;
}
-->
</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>
</ul>


<div id="mentions">
  <p>Une seule image pour tout le menu, et pas de preload !</p>
  <p>Auteur : Raphaël GOETTER (<a class="test" href="http://www.alsacreations.com">Alsacreations.com</a>)</p>
  <p>Pour obtenir et décortiquer le code : Bouton droit / afficher la source </p>
  <p><a class="test" href="http://css.alsacreations.com/Galeries-de-menus-en-CSS">Retour à la galerie</a></p>
</div>

</body>
</html>


Merci d'avance.

Cordialement.

Frogy Smiley smile
Modifié par frogy (27 Jun 2007 - 18:46)
Bonjour,

As-tu pensé à bien modifier le décalage de ton image ?
Car si tu as gardé les codes tels quel et que ton image n'a pas la même dimension, il est normal que cela ne fonctionne pas... Smiley cligne
Salut frogy Smiley cligne ,

le tutoriel dont tu parles est basé sur cette image :
upload/8634-imagemediev.jpg

En fonction du lien que tu survoles la partie basse est affichée via un décalage (-327px, -357px, -387px, etc).

Comme l'image de la terre que tu utilises n'a pas cette partie basse, rien ne se passe Smiley smile ...

A+
D'accord. je comprends. Smiley smile
Merci beaucoup.
J'essaye en modifiant mon image.

Bonne journée.

Cordialement
Frogy
Merci beaucoup.
J'ai dupliqué mon image, modifié les coordonnées pour lees liens et tout fonctionne.

Bonne soirée.
Cordialement
frogy
Sujet clos
Aller à