Sujet Précédent Sujet Suivant

Petit problème de menu déroulant

Résolu/Fermé
darkscythe - 20 août 2008 à 11:58
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 - 21 août 2008 à 12:08
Bonjour,

je voulais avoir l'avis de personne plus expérimentées que moi...

En fait j'ai un petit problème sur un site que je suis en train de créer actuellement. J'ai ma barre de menu et je voudrais qu'un menu s'affiche à chaque survol de chaque bouton comme ici :

http://darkscythe.free.fr/probleme/cssmenu4.htm

mais pourtant quand j'essai de faire exactement la même chose sur mon site, cela ne fonctionne pas :

http://darkscythe.free.fr/probleme/index.html

merci de bien vouloir essayer de m'aider
A voir également:

14 réponses

Réponse 1 / 14
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 744
20 août 2008 à 12:43
Pourquoi inclure des balises <td> dans ta <div>? Il n'y a en a pas dans l'original. Reprends ce que tu as fait sur l'original :
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');"><img border="0" src="images/commune.gif" alt=""></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
etc etc...
Ca semble bien non?
1
Réponse 2 / 14
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 744
20 août 2008 à 13:15
Tu n'as pas de display : none ; Donc en fin de compte les navigateurs décident que l'affichage est "présent". A lire pour info :

http://www.journaldunet.com/...

Voir également (et tout lire!!!) pour ton menu :

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

cette partie du tuto est ta solution :
La mise en forme : le CSS
Le code CSS va positionner les différents éléments, les mettre en forme (couleur, fond, bordures, etc.) et masquer les sous-menus au chargement de la page en appliquant un "display: none" sur ces sous-menus (dd).
Je ne suis pas spécialiste mais essaie ceci :

#menu dd {border: 1px solid gray;display: none ;}

à la place de #menu dd {border: 1px solid gray;}
Bonne chasse à l'info.
1
Réponse 3 / 14
nousados.fr Messages postés 111 Date d'inscription lundi 10 décembre 2007 Statut Membre Dernière intervention 26 octobre 2010 5
20 août 2008 à 12:01
le premier url c'est ton site ?
si oui prend dans la page de la premiere url et adapte le
0
darkscythe
20 août 2008 à 12:05
non le site c'est le deuxième =)
0
Réponse 4 / 14
Profil bloqué
20 août 2008 à 12:01
C'est du CSS... sais-tu l'utiliser au moins?
0
darkscythe
20 août 2008 à 12:09
et en fait j'ai pris le code du menu déroulant quelque part et je l'ai adapté en fait (c'est le premier lien) donc il fonctionne c'est quand je retranscrit sur le vrai site que ca ne fonctionne pas =(
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 14
nousados.fr Messages postés 111 Date d'inscription lundi 10 décembre 2007 Statut Membre Dernière intervention 26 octobre 2010 5
20 août 2008 à 12:02
oui un peu
0
Réponse 6 / 14
Profil bloqué
20 août 2008 à 12:06
Je ne vois vraiment pas pourquoi tu bloque le clique-droit, il ne sert strictement à rien, surtout pour ton site =/
Mais bon ..
A première vue de ton code Html
Tu n'utilise que du javascript.
Or, pour avoir ce menu déroulant tu dois utiliser du CSS.
0
Réponse 7 / 14
darkscythe
20 août 2008 à 12:08
bah oui je me doute mais pourquoi ca marche sur une page vierge et quand je remet pareil sur mon site internet ca ne fonctionne pas (j'ai l'impression d'être un gros boulet c'est horrible XD)
0
Réponse 8 / 14
Profil bloqué
20 août 2008 à 12:13
Va faire un tour ici pour en apprendre plus en webmastering

Et ici pour un menu déroulant horizontal ou vertical
0
Réponse 9 / 14
darkscythe
20 août 2008 à 12:18
Je connais ce site pour les menus enfin merci quand même.

Je constate que je suis vraiment pas douée...
0
Réponse 10 / 14
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 744
20 août 2008 à 12:19
Salut,
Peut être est il simplement "masqué" dans ton tableau. Tu as fait un copié-collé d'un menu déroulant. Il faut donc qu'il "passe au-dessus" de la div ou du tableau placé juste en dessous. Enfin ce n'est qu'une supposition car nous n'avons pas accès à ton code.
0
Réponse 11 / 14
darkscythe
20 août 2008 à 12:32
voila le code oui c'est vrai désolée :s

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Bienvenue sur le site de SECHEVAL</title>

<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.TitreVert {
color: #00CC59;
font-weight: bold;
}
.style1 {
color: #00CC00;
font-weight: bold;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
Today = new Date;
Heure = Today.getHours();
Min = Today.getMinutes();
if (Min<"10")
{
Message = " -  " + Heure + "h0" + Min + " ";
}
else
{
Message = " -  " + Heure + "h" + Min + " ";
}
</SCRIPT>




<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #2f6e3b;
}

a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>


<body oncontextmenu="return bloque_clic()" onload="MM_preloadImages('/images/09_Btn1_1.gif','/images/10_Btn2_2.gif','/images/11_btn3_3.gif','images/12_btn4_1.gif','images/13_btn5_1.gif','images/14_btn6_1.gif','images/08_leftNavBar1.gif')">
<blockquote>


<script language=JavaScript>
function bloque_clic()
{return false;
}
</script>

<table class="SiteBorder" align="center" border="0" cellpadding="0" cellspacing="0" width="769">
<tbody><tr>
<td bgcolor="#0d4c19" valign="top"><img src="images/01_topLogo.gif" alt="BeauSite Logo" name="logo" usemap="#home" id="logo" border="0" height="159" width="339"><br>

<td bgcolor="#0d4c19" valign="top"><img src="images/02_slogan.jpg" alt="Slogan" height="178" width="123"></td>

<td rowspan="2" bgcolor="#0d4c19" valign="top" width="388"><img src="images/03_slogan_rightimage.jpg" height="205" width="389"></td>
</tr>
<tr>
<td colspan="2" bgcolor="#0d4c19" valign="top"><table border="0" cellspacing="0" width="100%">
<tbody><tr>
<font color=#98CB00>  <SCRIPT type="text/javascript">
<!--
js = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
m = new Array("janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre");
aujourdhui = new Date();
jour = aujourdhui.getDate();
annee = aujourdhui.getYear();
if (annee < 2000)
annee = annee + 1900;
document.write(js[aujourdhui.getDay()] + " " + jour + " " + m[aujourdhui.getMonth()] + " " + annee);
// -->
</SCRIPT> 
<SCRIPT LANGUAGE="JavaScript">
document.write(Message);
</SCRIPT>

</font>
</tr>
</tbody></table></td>
</tr>
<tr>
<td colspan="3" bgcolor="#0d4c19"><table border="1" bordercolor=#ff0000" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><a href="index.html"><img src="images/accueil.gif" alt="Retour à l'accueil du site" name="home" id="home" onmouseover="MM_swapImage('home','','images/accueil1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="57"></a></td>
<td><table cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>

<div id="menu">
<dl>
<td><dt onmouseover="javascript:montre('smenu1');"><a href="#"><img src="images/commune.gif" border="0" height="32" width="102"></a></dt></td>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>

<td><a href="#"><img src="images/actu.gif" name="actu" id="actu" onmouseover="MM_swapImage('actu','','images/actu1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="102"></a></td>
<td><a href="#"><img src="images/cm.gif" name="cm" id="cm" onmouseover="MM_swapImage('cm','','images/cm1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="102"></a></td>
<td><a href="#"><img src="images/services.gif" name="services" id="services" onmouseover="MM_swapImage('services','','images/services1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="102"></a></td>
<td><a href="#"><img src="images/maquet.gif" name="maquet" id="maquet" onmouseover="MM_swapImage('maquet','','images/maquet1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="102"></a></td>
<td><a href="#"><img src="images/plan.gif" name="plan" id="plan" onmouseover="MM_swapImage('plan','','images/plan1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="102"></a></td>
<td><a href="#"><img src="images/mail.gif" name="mail" id="mail" alt="nous écrire" onmouseover="MM_swapImage('mail','','images/mail1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="57"></a></td>





</div>
</tr></tbody></table></td>
<td width="100"><img src="images/15_rightNavBar.jpg" height="32" width="125"></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td colspan="3" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="769">
<tbody>
<tr>
<td height="25" valign="middle"> </td>
<td colspan="2" height="25" valign="middle"><strong> <br><span class="style1"> » </span> <u>LE MOT DU MAIRE</u> </strong></td>

</tr>
<tr>
<td height="25" valign="middle" width="36"> </td>
<td height="25" valign="middle" >
<br><br>


Tout ce que Monsieur le Maire a à dire

<br><br><br><br></td>

suite non interessante

merci de vous interesser à mon problèmes en tout cas ;)
0
Réponse 12 / 14
darkscythe
20 août 2008 à 12:51
Merci, il y a une amélioration mais ca fait toujours ca :

http://darkscythe.free.fr/probleme/index2.html

PS : j'avais encadré le contour du tableau pour mieux le situer
0
Réponse 13 / 14
darkscythe
20 août 2008 à 19:15
merci tu as résolu mon gros souci

Quand je survolle le bouton le menu reste affiché après aussi mais ca je vais résoudre le truc toute seule merci de ton aide en tout cas et merci à tout ceux qui m'on répondu

=D
0
Réponse 14 / 14
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 744
21 août 2008 à 12:08
Salut,
Je ne doute pas que tu aurais réussit seule puisque de toutes façons la réponse à ton problème est sur le lien alsacréations ci-dessus. Il faut en effet masquer ton sous-menu comme ceci :
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
L'important là dedans étant le : onmouseout="javascript:montre('').
Voilà bon courage pour la suite et n'hésite pas.
0

Discussions similaires

petit colis
tina -
Utilisateur anonyme -

6 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses
comment écrire des petits chiffres ?
Elisa-x3 -
Luka_65 -

9 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Dimensions L x l x H : comment lire ces infos ?
Miss-Curieuse -
valou -

8 réponses