Problème alignement menu déroulant

Signaler
Messages postés
1
Date d'inscription
lundi 2 juin 2008
Statut
Membre
Dernière intervention
5 juin 2008
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
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&&i0&&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">

,

----

  &nbsp;&nbsp;Sous-titre 1,

----

  &nbsp;&nbsp;Sous-titre 2,

----

  &nbsp;&nbsp;Sous-titre 3

  ,

----
&nbsp;&nbsp;Altavista&nbsp;&nbsp;&nbsp;, http://www.altavista.com\")'>&nbsp;&nbsp;Altavista&nbsp;&nbsp;&nbsp;</td>

----
&nbsp;&nbsp;Google&nbsp;&nbsp;&nbsp;, http://www.google.com\")'>&nbsp;&nbsp;Google&nbsp;&nbsp;&nbsp;</td>

----
&nbsp;&nbsp;Yahoo&nbsp;&nbsp;&nbsp;, http://www.yahoo.com\")'>&nbsp;&nbsp;Yahoo&nbsp;&nbsp;&nbsp;</td>

  ,

----

  &nbsp;&nbsp;Notepa,

----
&nbsp;&nbsp;Calculator&nbsp;&nbsp;&nbsp;

  ,

----

  &nbsp;&nbsp;Sous-titre 1,

----

  &nbsp;&nbsp;Sous-titre 2,

----

  &nbsp;&nbsp;Sous-titre 3

  ,

----

  &nbsp;&nbsp;Sous-titre 1,

----

  &nbsp;&nbsp;Sous-titre 2,

----

  &nbsp;&nbsp;Sous-titre 3

  ,

----

  &nbsp;&nbsp;Sous-titre 1,

----

  &nbsp;&nbsp;Sous-titre 2,

----

  &nbsp;&nbsp;Sous-titre 3

&nbsp;,

----

  Sous-titre 1,

----

  Sous-titre 2,

----

  Sous-titre 3

</td>
  </tr>

Merci de votre aide.

1 réponse

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
Problème de conception, avec la totalité
de ton menu inséré dans une table tu ne peux t'attendre que d'avoir le texte de
dessous decallé de la hauteur de la table.
Une solution peut-être serait de placer ton menu dans un DIV et le reste dans un autre DIV décalé de pile poil la hauteur du bandeau du menu.

une adresse pour la création de
menu
http://css.alsacreations.com/Construction-de-menus-en-CSS/
ou une
recherche sur ce site, il y en a tout plein, même des biens...
;O)