Bonjour,
J'aurais besoin de votre aide pour un problème sur un menu déroulant.
Mon menu se déroule bien, mes liens fonctionnent, mais le problème que je rencontre concerne l'affichage.
Mon menu a été fait en javascipt, avec des CSS, le tout dans un tableau.
Mon problème : la cellule sous le menu ne vient pas se coller au menu. La cellule du menu prend la taille du menu déroulé. J'ai donc un blanc entre mon menu et le reste de ma page.
Je voudrais donc que mon sour menu s'aafiche au-dessus de la cellule suivante.
Voici le code complet du menu :
<head>
<script type="text/JavaScript">
<!--
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_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_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>
<script language="JavaScript"><!--
function menu_show() {
for (i=0;i<menu_show.arguments.length;i++) {
document.getElementById(menu_show.arguments[i]).style.visibility='visible';}
}
function menu_hide() {
for (i=0;i<menu_hide.arguments.length;i++) {
document.getElementById(menu_hide.arguments[i]).style.visibility='hidden';}
}
function menu_msg(msg) {
alert(msg);
}
--></script>
<style type="text/css">
<!--
.class1 {position:relative; position:inherit; float:left; top300px; width:125px; cursor:hand; visibility:visible;}
.class2 {position:relative; position:inherit; float:left; top300px; width:125px; cursor:hand; visibility:visible;}
.class3 {position:relative; position:inherit; float:left; top300px; width:125px; cursor:hand; visibility:visible;}
.class4 {position:relative; position:inherit; float:left; top300px; width:125px; cursor:hand; visibility:visible;}
.class5 {position:relative; position:inherit; float:left; top300px; width:125px; cursor:hand; visibility:visible;}
.class6 {position:relative; position:inherit; float:left; top300px; width:125px; cursor:hand; visibility:visible;}
.class7 {position:relative; position:inherit; float:left; top300px; width:125px; cursor:hand; visibility:visible;}
.menu {font-family:'Arial, Helvetica, sans-serif'; font-size:14pt; font-weight:normal; color:white; bordercolor:#000000; border-style:solid;}
.submenu {background-color:white; font-family:'Arial, Helvetica, sans-serif'; font-size:14pt; font-weight:normal; color:black; visibility:hidden;}
#submenu {border:#000000 thin solid}
A {text-decoration:none; color:black;}
A:hover {background-color:#0047b6; color:white;}
.menu1 {font-family:'Arial, Helvetica, sans-serif'; font-size:14pt; font-weight:normal; bordercolor:white; color:white;}
.menu2 {font-family:'Arial, Helvetica, sans-serif'; font-size:14pt; font-weight:normal; bordercolor:white; color:white;}
--></style>
</head>
<tr>
<td colspan="7"><div id='div1' class='class1' onmouseover='menu_show("a1","a2","a3")' onmouseout='menu_hide("a1","a2","a3")'>
<table><tr><td><img src="fichiers_communs/menu_hor/bouton_audit.gif" width="123" height="31" /></td>
</tr>
<div id="submenu"><tr>
<td id='a1' class='submenu'><a href='JavaScript:window.open()'> Sous-titre 1</a></td>
</tr>
<tr>
<td id='a2' class='submenu'><a href='JavaScript:window.print()'> Sous-titre 2</a></td>
</tr>
<tr>
<td id='a3' class='submenu'><a href='JavaScript:history.back()'> Sous-titre 3</a></td>
</tr></div></table>
</div>
<div id='div2' class='class2' onmouseover='menu_show("b1","b2","b3")' onmouseout='menu_hide("b1","b2","b3")'>
<table ><tr>
<td><img src="fichiers_communs/menu_hor/bouton_infogerance.gif" width="123" height="31"></td>
</tr>
<tr><td id='b1' class='submenu'><a href='JavaScript:window.open("http://www.altavista.com")'> Altavista </a></td>
</tr>
<tr><td id='b2' class='submenu'>
<a href='JavaScript:window.open("http://www.google.com")'> Google </a></td>
</tr>
<tr><td id='b3' class='submenu'>
<a href='JavaScript:window.open("http://www.yahoo.com")'> Yahoo </a></td>
</tr></table>
</div>
<div id='div3' class='class3' onmouseover='menu_show("c1","c2","c3")' onmouseout='menu_hide("c1","c2","c3")'>
<table ><tr>
<td><img src="fichiers_communs/menu_hor/bouton_securite.gif" width="123" height="31"></td>
</tr>
<tr>
<td id='c1' class='submenu'><a href='JavaScript:menu_msg("notepad")'> Notepa</a></td>
</tr>
<tr><td id='c2' class='submenu'>
<a href='JavaScript:menu_msg("calculator")'> Calculator </a></td>
</tr></table>
</div>
<div id='div4' class='class4' onmouseover='menu_show("d1","d2","d3")' onmouseout='menu_hide("d1","d2","d3")'>
<table ><tr>
<td><img src="fichiers_communs/menu_hor/bouton_materiel.gif" width="123" height="31"></td>
</tr>
<tr>
<td id='d1' class='submenu'><a href='JavaScript:window.open()'> Sous-titre 1</a></td>
</tr>
<tr>
<td id='d2' class='submenu'><a href='JavaScript:window.print()'> Sous-titre 2</a></td>
</tr>
<tr>
<td id='d3' class='submenu'><a href='JavaScript:history.back()'> Sous-titre 3</a></td>
</tr></table>
</div>
<div id='div5' class='class5' onmouseover='menu_show("e1","e2","e3")' onmouseout='menu_hide("e1","e2","e3")'>
<table ><tr>
<td><img src="fichiers_communs/menu_hor/bouton_sites.gif" width="123" height="31"></td>
</tr>
<tr>
<td id='e1' class='submenu'><a href='JavaScript:window.open()'> Sous-titre 1</a></td>
</tr>
<tr>
<td id='e2' class='submenu'><a href='JavaScript:window.print()'> Sous-titre 2</a></td>
</tr>
<tr>
<td id='e3' class='submenu'><a href='JavaScript:history.back()'> Sous-titre 3</a></td>
</tr></table>
</div>
<div id='div6' class='class6' onmouseover='menu_show("f1","f2","f3")' onmouseout='menu_hide("f1","f2","f3")'>
<table ><tr>
<td><img src="fichiers_communs/menu_hor/bouton_formation.gif" width="123" height="31"></td>
</tr>
<tr>
<td id='f1' class='submenu'><a href='JavaScript:window.open()'> Sous-titre 1</a></td>
</tr>
<tr>
<td id='f2' class='submenu'><a href='JavaScript:window.print()'> Sous-titre 2</a></td>
</tr>
<tr>
<td id='f3' class='submenu'><a href='JavaScript:history.back()'> Sous-titre 3</a></td>
</tr></table>
</div>
<div id='div7' class='class7' onmouseover='menu_show("g1","g2","g3")' onmouseout='menu_hide("g1","g2","g3")'>
<table ><tr><td><img src="fichiers_communs/menu_hor/bouton_sage.gif" width="123" height="31"> </td>
</tr>
<tr>
<td id='g1' class='submenu'><a href='JavaScript:window.open()'>Sous-titre 1</a></td>
</tr>
<tr>
<td id='g2' class='submenu'><a href='JavaScript:window.print()'>Sous-titre 2</a></td>
</tr>
<tr>
<td id='g3' class='submenu'><a href='JavaScript:history.back()'>Sous-titre 3</a></td>
</tr></table>
</div></td>
</tr>
Merci de votre aide.