Problème alignement menu déroulant

cs_Sandra28 Messages postés 1 Date d'inscription lundi 2 juin 2008 Statut Membre Dernière intervention 5 juin 2008 - 5 juin 2008 à 14:37
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 5 juin 2008 à 17:58
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

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
5 juin 2008 à 17:58
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)
0
Rejoignez-nous