problème de placement de calque (DIV)

05 janv. 2006, 16:58

Je réalise actuellement un menu pseudo-déroulant en utilisant des DIV qui sont placé quand on survole un menu.

Le problème: le menu comme le site se trouve au centre de la page. Donc je peux pas connaitre la position du débu du menu vu que ca depend de la résolution du client. Donc le placement des DIV se fait en "relative" plutot qu'en "absolute". Et le probleme en "relative" c'est que les DIV font des retour a la ligne et décale tout ce qui a sous le menu.

Alors y a t-il un autre mode ou une astuce pour placer correctement mes DIV sans faire de décalage?

05 janv. 2006, 18:28

Ça serait plaisant d'avoir le code nécessaire mais tu peux toujours essayer un display:inline; à tes div, ça empêche le retour à la ligne et ils se comporteront comme des inline et non des blocks.

05 janv. 2006, 18:48

Un petit rappel en passant :
Les <div> ne sont pas des calques, mais des divisions. [-X

Plus d'infos sur Alsacreations...

06 janv. 2006, 12:25

j'ai deja testé display:inline, mais ca ne change rien. Le placement de mes div décalent toujours ce qui se trouve en dessous au lieu de se mettre par dessus.

06 janv. 2006, 12:29

sans voir ton html et ton css ca va etre difficile

mais bon essaye de mettre un float:left avec une taille pour tes div et un clear:left dans l'element qui doit se placer en dessous de tes div

07 janv. 2006, 20:45

je vais vous mettre un extrait de l'HTML en esperant que vous puissez m'aider:

Code : Tout sélectionner

<SCRIPT LANGUAGE="JavaScript">
<!--
function MM_findObj(n, d) { //v4.0
  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 && document.getElementById) x=document.getElementById(n); return x;
}


function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'inline':(v='hide')?'none':v; }
    obj.display=v; }
}
//-->
</SCRIPT>

...
<tr>
   <td width="760" height="26" bgcolor="#2F4F8A">
      <table width="100%"  border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td><A onmouseover="MM_showHideLayers('layer_1', '', 'show', 'layer_2', '', 'hide', 'layer_3', '', 'hide', 'layer_4', '', 'hide', 'layer_5', '', 'hide', 'layer_6', '', 'hide')" href="index.php?m=1"><img src="../images/fr/m1.jpg" alt="accueil" width="78" height="26" border="0"></a></td>
            <td><A onmouseover="MM_showHideLayers('layer_1', '', 'hide', 'layer_2', '', 'show', 'layer_3', '', 'hide', 'layer_4', '', 'hide', 'layer_5', '', 'hide', 'layer_6', '', 'hide')" href="index.php?m=2"><img src="../images/fr/m2.jpg" alt="forum" width="140" height="26" border="0"></a></td>
            <td><A onmouseover="MM_showHideLayers('layer_1', '', 'hide', 'layer_2', '', 'hide', 'layer_3', '', 'show', 'layer_4', '', 'hide', 'layer_5', '', 'hide', 'layer_6', '', 'hide')" href="index.php?m=3"><img src="../images/fr/m3.jpg" alt="projets" width="84" height="26" border="0"></a></td>
            <td><A onmouseover="MM_showHideLayers('layer_1', '', 'hide', 'layer_2', '', 'hide', 'layer_3', '', 'hide', 'layer_4', '', 'show', 'layer_5', '', 'hide', 'layer_6', '', 'hide')" href="index.php?m=4"><img src="../images/fr/m4.jpg" alt="manifestations" width="126" height="26" border="0"></a></td>
            <td><A onmouseover="MM_showHideLayers('layer_1', '', 'hide', 'layer_2', '', 'hide', 'layer_3', '', 'hide', 'layer_4', '', 'hide', 'layer_5', '', 'show', 'layer_6', '', 'hide')" href="index.php?m=5"><img src="../images/fr/m5.jpg" alt="publications" width="113" height="26" border="0"></a></td>
            <td><A onmouseover="MM_showHideLayers('layer_1', '', 'hide', 'layer_2', '', 'hide', 'layer_3', '', 'hide', 'layer_4', '', 'hide', 'layer_5', '', 'hide', 'layer_6', '', 'show')" href="index.php?m=6"><img src="../images/fr/m6.jpg" alt="partenaires" width="219" height="26" border="0"></a></td>
         </tr>
      </table>

      <DIV id="layer_1" style="Z-INDEX: 1; LEFT: 0px; display: none; POSITION: relative; TOP: 0px;">
      <TABLE cellSpacing=0 cellPadding=0 width="200" border=0>
         <TR>
            <TD vAlign=top>
               <TABLE cellSpacing=0 cellPadding=0 width="200" border=0>
                  <TR>
                     <TD bgColor="#666666">
                        <TABLE cellSpacing=1 cellPadding=1 width="100%" border=0>
                           <TR>
                              <TD bgColor="#ffffff">
                                 <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
                                    <TR onmouseover="javascript:this.style.background='#5379C8';" onmouseout="javascript:this.style.background='#304D89'" bgColor="#304D89">
                                       <TD height=20 class="main_menu">&nbsp;Accueil</TD>
                                    </TR>
                                    <TR onmouseover="javascript:this.style.background='#5379C8';" onmouseout="javascript:this.style.background='#304D89'" bgColor="#304D89">
                                       <TD height=20 class="main_menu">&nbsp;Présentation</TD>
                                    </TR>
                                 </TABLE>
                              </TD>
                           </TR>
                        </TABLE>
                     </TD>
                  </TR>
               </TABLE>
            </TD>
         </TR>
      </TABLE>
      </DIV>
   </td>
</tr>
<tr>
   <td>
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="760" height="132">
   <param name="movie" value="../images/fr/ban.swf">
   <param name="quality" value="high">
   <embed src="../images/fr/ban.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="760" height="132"></embed>
   </object>
   </td>
</tr>
...

07 janv. 2006, 23:25

Une petite visite d'une page de chez Alsacréations s'impose à mon avis

08 janv. 2006, 02:37

Merci mais ca ne resoud pas mon problème. En effet ce menu est aussi prévu pour fonctionner avec un placement de type "absolute". Si on mets le menu en "relative" ainsi que les elements du dessous, tout se décale comme chez moi.

Sur un menu placé toujours a la meme position de la gauche et du haut c'est bon, mais dans mon cas; positionner sur le milieu du navigateur, il faut forcement que je passe par le type "relative"

08 janv. 2006, 10:09

Dans ce cas, il faut placer l'élément parent en position absolute ou relative mais placer ton menu en absolute: il sera positionné par rapport à l'élément parent sans affecter le reste de la page.

Voir trois intéressants tutos sur le positionnement en CSS sur openweb

problème de placement de calque (DIV)

Qui est en ligne