18041 sujets

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

[Resolu]Soucis menu déroulant horizontal

Bonjour a tous,
je viens d'installer le menu horizontal déroulant trouver sur cette page :

http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

mais je rencontre un leger soucis avec ce script, en effet dans ma page ma bolise body contient une fonction onload :
<body onload="MM_preloadImages('motifs/test2/8ball copie.gif','motifs/test/8ball copie.gif','motifs/test/alcool1 copie.gif','motifs/test/antz1 copie.gif','motifs/test/bewareofwolf copie.gif','motifs/test/bluehelme copie.gif','motifs/test/carte copie.gif','motifs/test/classx copie.gif','motifs/test/evil wolf copie.gif','motifs/test/evilwolf2 copie.gif','motifs/test/eyes1 copie.gif','motifs/test/fish copie.gif','motifs/test/freetibet1 copie.gif','motifs/test/gameover copie.gif','motifs/test/geek copie.gif','motifs/infectuousman copie.gif','motifs/test/infectuouswoman copie.gif','motifs/test/invader1 copie.gif','motifs/test/jesus copie.gif','motifs/test/nuage copie.gif','motifs/test/om copie.gif','motifs/test/panneau1 copie.gif','motifs/test/poker1 copie.gif','motifs/test/poker2 copie.gif','motifs/test/poker3 copie.gif','motifs/test/poker4 copie.gif','motifs/test/poker5 copie.gif','motifs/test/pornstar2 copie.gif','motifs/test/pornstar copie.gif','motifs/test/psych copie.gif','motifs/test/scrapbook4 copie.gif','motifs/test/scrapbook5 copie.gif','motifs/test/star2 copie.gif','motifs/test/star5 copie.gif','motifs/test/star6 copie.gif','motifs/test/tribal2 copie.gif','motifs/test/tribal3 copie.gif','motifs/test/tryagain copie.gif','motifs/test/infectuousman copie.gif','motifs/test/tribal1 copie.gif','motifs/test/coeur copie.gif')">

car j'utilise pas mal d'image survolé sur se site, mais quand je ce "onload" est présent le menu reste ouvert a l'ouverture de la page puis se referme logiquement quand on passe dessus et qu'on le quitte de nouveau. Par contre quand je retire le "onload" le menu réagit normalement.
J'aimerai savoir s'il etait possible d'ajouter un bout de code dans le onload pour que le menu apparaisse fermer a l'ouverture de la page.

Merci d'avance
Modifié par mow (22 Jul 2008 - 23:14)
effectivement, c'est le onLoad de ton body qui fout la merde.
Je suppose que tu as utilisé cette méthode afin de réduire le temps de chargement de tes images au survole.
Le mieux, est que tu gères ça dans ta css.

1/tu réalise 2 images en 1.
(ex: si ton image fait du 100 x 40px , tu devra en faire une qui contient a la fois l'image initial et a la fois l'etat au survol du coup tu as une image qui fait du 100 x 80px).

2/ dans ta css, tu defini la taille(40px) de ton image ainsi que ca position(0).

Ca donne:
#ma_div.img a {
width:100px ;
height: 40px ;
background: url(../images/mon-image.jpg) no-repeat 0 0 ;
}
#ma_div img a:hover{
background : url(../images/mon-image.jpg no-repeat 0 -40px ;
}

Tu remarquera que cette fois j'ai défini la position à -40px afin de faire apparaitre la parti basse de mon image qui était tronqué et qui correspond à l'état au survol.
De ce fait, tu ne charge plus qu'une seul image et tu n'as plus besoin du onload. et du coup, plus de problème...

J'espère que j'ai été suffisament claire et qu ca pourra t'aider.

bon courage
wep tu as été tres clair j'avais deja vu un systeme identique pour un menu, par contre je ne vois pas comment insérer mon image ensuite dans le body une fois que j'ai ecris ton css.

Merci =)
j'ai trouvé ^^
<head>

<title>Untitled Document</title>
<style type="text/css">
<!--
.yo a { 
display: block; 
width: 150px; 
height: 75px; 
background: transparent url(evil.gif) no-repeat; 
} 

.yo a:hover { 
background-position: 0 -75px; 
} 

-->
</style>
</head>

<body>
	<div class="yo"> 
	<a href="#"></a> 
	</div>
</body>
</html>
Bon j'ai plus qu'a modifier l'intégralité de mes images et me faire qq ligne de code ^^
Mais si qq'un a une idée de modification avec le onload je suis preneur

Encore merci Crayon2b
Modifié par mow (22 Jul 2008 - 23:13)
Par contre si je rappel mes images avec un Div, mes images seront rangées verticalement ?
une idée ?
oui bien sur, ton menu se présentera de cette facon :

<div id="menu">
<ul>
<li><a href="#">lien 1</a>
<li><a href="#">lien 2</a>
<li><a href="#">lien 3</a>
<li><a href="#">lien 4</a>
</ul>
<br clear="all" />
</div>

/*ici le <br clear> est important il permet de mettre fin au float*/

et dans ta css:
ul#menu {
margin:0;
padding:0;
}
ul#menu li{
float:left; /*C'est lui qui permetra a tes bouton de se positionné les uns à la suite des autre*/
width: 127px;
}
ul#menu li a{
padding:5px 12px;
display:block;
color:#fff;
line-height:1em;
}
ul#menu li a:hover{
text-decoration:underline;
}
petit ajour à la css :

les image tu les appel sur le <a> dans ta css et non dans le body,
comme ca, il sera valabre sur toute les page ou tu aura :

<div id=menu>
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
</ul>
</div>

ul#menu li a{
background:url(../images/bouton.jpg) no-repeat 0 0;
}
ul#menu li a:hover{
background:url(../images/bouton.jpg) no-repeat 0 -40px;
}
voila j'ai édité tout ca, et mis le topic en résolu =)
a vrai dire j'avais pas trop regarder la charte Smiley deal ^

Merci encore Crayon2b pour ton aide
Sujet clos
Aller à