Page 1 sur 1
problème de placement de calque (DIV)
Posté : 05 janv. 2006, 16:58
par Khorne_fr1
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?
Posté : 05 janv. 2006, 18:28
par alexbad
Ç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.
Posté : 05 janv. 2006, 18:48
par albat
Un petit rappel en passant :
Les
<div> ne sont pas des
calques, mais des
divisions. [-X
Plus d'infos sur Alsacreations...
Posté : 06 janv. 2006, 12:25
par Khorne_fr1
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.
Posté : 06 janv. 2006, 12:29
par jeff
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
Posté : 07 janv. 2006, 20:45
par Khorne_fr1
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"> Accueil</TD>
</TR>
<TR onmouseover="javascript:this.style.background='#5379C8';" onmouseout="javascript:this.style.background='#304D89'" bgColor="#304D89">
<TD height=20 class="main_menu"> 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>
...
Posté : 07 janv. 2006, 23:25
par Cyrano
Une petite visite d'
une page de chez Alsacréations s'impose à mon avis
Posté : 08 janv. 2006, 02:37
par Khorne_fr1
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"
Posté : 08 janv. 2006, 10:09
par Cyrano
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