Positionnement de menu déroulant

Positionnement de menu déroulant - HTML/CSS - Programmation

Marsh Posté le 14-08-2002 à 08:47:40    

j`utilise un menu déroulant du style: http://developpeur.journaldunet.co [...] antIE5.htm
 
 
seulement je voudrais un peu plus de renseignement sur le positionnement du menu, dans le code il est positionné en hauteur et largeur en pixel en partant du coin suppérieur gauche :
 
<div id="barre" style="position:absolute; visibility: visible; left: 4px; top: 20px">  
 
comment fait-on si je veux par exemple qu`il soit centré sur la page?
ce type de menu s`affiche toujours par dessus la page existante ou peut on l`inclure dans un tableau par exemple?

Reply

Marsh Posté le 14-08-2002 à 08:47:40   

Reply

Marsh Posté le 14-08-2002 à 08:53:31    

bon j`ai trouvé comment centrer:
 
<div id="barre" style="position:absolute; visibility: visible; left: 4px; top: 20px">
  <table class="txt"  width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr bgcolor="#000000">
      <td colspan="2">
        <div align="center"><a href="#" class="menu" onMouseOver="MM_showHideLayers('menu1','','show';)" onMouseOut="MM_showHideLayers('menu1','','hide';)">Food
        </a> | <a href="#" class="menu" onMouseOver="MM_showHideLayers('menu2','','show';)" onMouseOut="MM_showHideLayers('menu2','','hide';)">Textiles ...
 
par contre du coup mes sous menu ne suivent plus  :( , comment faire pour les positionner la ou le texte du menu commence? pour que le sous menu tombe toujours pile poil en dessous quel que soit la résolution?

Reply

Marsh Posté le 14-08-2002 à 10:01:04    

les menus en javascript :/
 
même problème qu'ici : http://forum.hardware.fr/forum2.php3?post=24552&cat=10
 
tu n'as qu'à retrouver les coords de tes sous menus et les positionner à chaque onmouseover d'une catégorie du menu.

Reply

Marsh Posté le 14-08-2002 à 10:03:38    

Je vois pas de menu moi... J'ai juste une barre (mais ça déroule pas).  :D

Reply

Marsh Posté le 14-08-2002 à 10:14:29    

t`as quel navigateur/version lextuhor ?
 
sinon j`ai trouvé le début d`une solution:
 
mes rubriques, celles qui sont tout le temps affichée je les mets pas dans un calque (j`ai donc enlevé la balise <DIV > )
du coup ca redevient du html normal que je peux intégrer dans mon design sans prbl.
je mets, dans le code, chaque sous rubrique juste apres le text de la reubrique, puis comme parametre du calque des sous rubriques je met position: relative, du coup il se cale sur le texte de la rubrique, pour ajuster mettre le nombre de pixels nessecaires a left
 

Code :
  1. <table class="txt"  width="100%" border="0" cellspacing="0" cellpadding="0">
  2.     <tr bgcolor="#990000" align="center">
  3.       <td colspan="2">
  4.         <a href="#" class="menu" onMouseOver="MM_showHideLayers('menu1','','show')" onMouseOut="MM_showHideLayers('menu1','','hide')">Food
  5.         </a>
  6.         <div id="menu1" style="position:relative; left: 38px; top: 0px; visibility: hidden" onMouseOver="MM_showHideLayers('menu1','','show')" onMouseOut="MM_showHideLayers('menu1','','hide')">
  7.             <table width="100" border="0" cellspacing="0" cellpadding="0" height="80">
  8.               <tr bgcolor="#000000" valign="middle">
  9.                 <td><a href="#" class="menu">Sous menu 1.1</a><br>
  10.                   <a href="#" class="menu">Sous menu 1.2</a><br>
  11.                   <a href="#" class="menu">Sous menu 1.3</a><br>
  12.                   <a href="#" class="menu">Sous menu 1.4</a><br>
  13.                   <a href="#" class="menu">Sous menu 1.5</a></td>
  14.               </tr>
  15.             </table>
  16.           </div>
  17.          | <a href="#" class="menu" onMouseOver="MM_showHideLayers('menu2','','show')" onMouseOut="MM_showHideLayers('menu2','','hide')">Textiles
  18.           </a> | <a href="#" class="menu" onMouseOver="MM_showHideLayers('menu3','','show')" onMouseOut="MM_showHideLayers('menu3','','hide')">Interior deco
  19.           </a> | <a href="#" class="menu" onMouseOver="MM_showHideLayers('menu4','','show')" onMouseOut="MM_showHideLayers('menu4','','hide')">Catering/Packaging
  20.           </a> | <a href="#" class="menu" onMouseOver="MM_showHideLayers('menu5','','show')" onMouseOut="MM_showHideLayers('menu5','','hide')">Chemical  ....


 
par contre, comme j`ai pleins de rubriques, j`en ait sur deux lignes, et la ligne du bas est décalée de toute la hauteur du tableau de la sousrubrique, c tout moche  :(  

Reply

Marsh Posté le 14-08-2002 à 10:16:39    

J'utilise Opera et Mozilla 1.0 et aucun des deux n'affiche ton menu...  :hello:

Reply

Marsh Posté le 14-08-2002 à 10:30:10    

tiens c`est curieux qu`ils ne voient pas le menu :heink: , car c`est que du javascript et du DHTML avec un peu de CCS  

Reply

Marsh Posté le 14-08-2002 à 10:37:55    

cybercouf a écrit a écrit :

tiens c`est curieux qu`ils ne voient pas le menu :heink: , car c`est que du javascript et du DHTML avec un peu de CCS  


rectifications :
 
de l'html non conforme
du css douteux
du javascript non conforme

Reply

Marsh Posté le 14-08-2002 à 10:42:54    

oui effectivement, (suite a la lecture de quelques articles  ;) )
en fait c`est que dans le DHTML, y`as des fonctions qui different de ie a netscape, et le lien que j`ai donné a été prévu que pour ie, il faudrait y rajouter une detection de navigateur et le code pour netscape
d`ailleur je trouve ca tres con qu`ils n`aient pas pu faire un seul standar !

Reply

Marsh Posté le 14-08-2002 à 10:47:41    

cybercouf a écrit a écrit :

d`ailleur je trouve ca tres con qu`ils n`aient pas pu faire un seul standar !


et comment s'est fait le standard à ton avis ? d'où viennent les standards ? l'entreprise X (ici netscape) 'invente' le javascript, l'entreprise concurrente Y (microsoft) batardise la chose, le w3 range tout ça correctement.
 
bref, tu fais ton menu en css1 / dom1, ce sera compatible ie, netscape 6 / mozilla / opera / etc.

Reply

Marsh Posté le 14-08-2002 à 10:47:41   

Reply

Marsh Posté le 14-08-2002 à 11:06:12    

ouais, tu connais pas un bon site qui expliques les diferentes fonctions pour faire un menu dynamic avec css1/dom1 par hazar?

Reply

Marsh Posté le 14-08-2002 à 11:09:02    

[:google2]
 
et www.w3.org
 
le + simple est de rendre conformant ce que tu as déjà (chopper les nodes avec document.getElementById(), revoir les propriétés hide / hidden, etc)

Reply

Marsh Posté le 14-08-2002 à 11:14:25    

cybercouf a écrit a écrit :

d`ailleur je trouve ca tres con qu`ils n`aient pas pu faire un seul standar !



Ne pas faire de standards communs c'est une excellent moyen d'évincer ses concurrents. Car après on ne va pas se faire ch*er à développer des scripts spécialement pour quelques navigateurs peu utilisés.
 
C'est d'ailleurs ce qu'à fait Le Journal du Net en proposant un menu pour IE seulement ;)
 
Sinon, le standard il existe. C'est l'ECMAScript http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM avec DOM http://www.w3.org/DOM/

Reply

Marsh Posté le 14-08-2002 à 11:19:21    

t`es gentil pour google, m`ais c`est par la que j`ai commencé, et j`y suis toujours dedans avec un 10aine de sites ouverts, et j`arrives pas a trouver un site assez complet et bien expliqué! soit c`est trop vague soit ils expliquent que 2 ou 3 trucs  :(  
.. alors en parallele j`ai posté sur HFR pour avoir un peu d`aide, donc qd je pose la question sur des bons sites c`est pas pour qu`on me marque google comme si j`était un gros bolay :na:  
(y`as tellement de bolay qu`on finit par confondre  :sarcastic: )
 
..m`enfin je vais voir sur W3.org  :)

Reply

Marsh Posté le 14-08-2002 à 12:23:58    

pour en revenir a mon problem initial (la normalisation c`est bien, mais pour le moment c pour tourner sous ie, je ferais un code compatible pour les autre si temps j`ai)
donc le fait qu`il me décale tout vers le bas, c`est que en fait mon tableau de sous rubriques, bien que non visible n`est plus "flottant" et donc occupe une certaine place, du coup ca decale tout.  
Et apparament ca fait ca quand j`utilise position:relative, et sa le fait pas avec position:absolute
 
le pb c`est que pour aligner les sous rubriques a la rubrique position relative c t bien pratique

Reply

Marsh Posté le 14-08-2002 à 13:02:10    

cybercouf a pleuré, malheureux qu'il était a écrit :

[...]


je précisais getElementById() (recherche) et les noms css (recherche aussi). c'est le principal truc à changer, ça devrait passer vite fait après.
 
je peux pas te dire 'tiens voici le site miracle pour ton problème spécifique'. tu veux faire un menu dhml, si tu ne connais pas le js ni le css ça va être dur.

Reply

Marsh Posté le 14-08-2002 à 13:39:03    

youdontcare a écrit a écrit :

Cybercouf a pleuré, malheureux qu`il était  
[...]




 :D  
 
ok, enfin de compte je crois que vu le code scource que j`ai récupéré je vais repartir de 0 pour faire mon menu, ca seras un peu mieux, c`est vrai que je découvre un peu le JS et les CCS mais j`avance petit a petit, c`est domage qu`on ne trouve pas autant de doc sur le net que sur le php.
merci de ton aide en tout cas.  :)  
 

Reply

Marsh Posté le 14-08-2002 à 19:14:00    

ouuuuuaaaouuu  :ouch:  :pt1cable:  EUREKA ! j`ai enfin reussi !
j`ai finalement tout refait moi meme, et en plus j`ai trouvé comment faire pour que le menu ne soit pas flotant et que les sous menus suivent parfaitement quelquesoit la resolution, en fait il fallait bien jongler avec la position: absolute ou relative.
 
je mets mon code pour ceux qui galerent aussi:
(cepandant j`ai pas fait de detection pour netscape, donc faut le rajouter, mais normalement tout le reste est bien conforme aux norme)
 

Code :
  1. <html>
  2.      <head>
  3.      <title>le menu de CyberCouf</title>
  4. <script language="JavaScript">
  5. <!--
  6.   function Cacher(a) {
  7.     document.getElementById(a).style.visibility="hidden";
  8.   }
  9.   function Montrer(a) {
  10.     document.getElementById(a).style.visibility="visible";
  11.   }
  12. //-->
  13. </script>
  14. <style type="text/css">
  15. <!--
  16. .menu {font-family:Small Fonts; font-size:7pt; color:white; text-decoration:none;}
  17. a.menu:hover {color:red; background: black;}
  18. .txt {font-family:Arial narrow; font-size:9pt; color:white; text-decoration:none;}
  19. //-->
  20. </style>
  21. </head>
  22. <body>
  23. 000<BR>1<BR>2
  24. <div id="barre" style="position:relative; visibility: visible;">
  25.   <table class="txt"  width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  26.     <tr bgcolor="#770000" align="center"><td>
  27. <div id="menu1" style="position:absolute; top: 16px; visibility: hidden" onMouseOver="Montrer('menu1')" onMouseOut="Cacher('menu1')">
  28.             <table width="100" border="0" cellspacing="0" cellpadding="7">
  29.               <tr bgcolor="#000000" valign="middle">
  30.                 <td><a href="#" class="menu">Meat</a><br><a href="#" class="menu">Fish</a><br><a href="#" class="menu">Fruits & Vegetables</a><br><a href="#" class="menu">Dairy products</a><br><a href="#" class="menu">Beverages</a><br></tr></table></div>
  31.        <a href="#" class="menu" onMouseOver="Montrer('menu1')" onMouseOut="Cacher('menu1')">Food</a>
  32.         | <div id="menu2" style="position:absolute; top: 16px; visibility: hidden" onMouseOver="Montrer('menu2')" onMouseOut="Cacher('menu2')">
  33.             <table width="100" border="0" cellspacing="0" cellpadding="7">
  34.               <tr bgcolor="#000000" valign="middle">
  35.                 <td><a href="#" class="menu">Tyres</a><br><a href="#" class="menu">Les inconnus</a><br><a href="#" class="menu">Suspensions</a><br><a href="#" class="menu">Volant</a><br></tr></table></div>
  36.        <a href="#" class="menu" onMouseOver="Montrer('menu2')" onMouseOut="Cacher('menu2')">Citronau</a>
  37.         | <div id="menu3" style="position:absolute; top: 16px; visibility: hidden" onMouseOver="Montrer('menu3')" onMouseOut="Cacher('menu3')">
  38.             <table width="100" border="0" cellspacing="0" cellpadding="7">
  39.               <tr bgcolor="#000000" valign="middle">
  40.                 <td><a href="#" class="menu">Baguette</a><br><a href="#" class="menu">Sandwitch</a><br></tr></table></div>
  41.        <a href="#" class="menu" onMouseOver="Montrer('menu3')" onMouseOut="Cacher('menu3')">French Corner</a>
  42.        </td></tr>
  43.   </table>
  44. </div>


 
 :pt1cable:

Reply

Marsh Posté le 14-08-2002 à 20:52:25    

[:yaisse] [:the real pinzo]

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed