Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1300 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Positionnement de menu déroulant

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Positionnement de menu déroulant

n°195023
cybercouf
Posté le 14-08-2002 à 08:47:40  profilanswer
 

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?

mood
Publicité
Posté le 14-08-2002 à 08:47:40  profilanswer
 

n°195025
cybercouf
Posté le 14-08-2002 à 08:53:31  profilanswer
 

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?

n°195047
youdontcar​e
Posté le 14-08-2002 à 10:01:04  profilanswer
 

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.

n°195050
LexTuhor
Posté le 14-08-2002 à 10:03:38  profilanswer
 

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

n°195056
cybercouf
Posté le 14-08-2002 à 10:14:29  profilanswer
 

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  :(  

n°195059
LexTuhor
Posté le 14-08-2002 à 10:16:39  profilanswer
 

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

n°195073
cybercouf
Posté le 14-08-2002 à 10:30:10  profilanswer
 

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  

n°195082
youdontcar​e
Posté le 14-08-2002 à 10:37:55  profilanswer
 

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

n°195088
cybercouf
Posté le 14-08-2002 à 10:42:54  profilanswer
 

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 !

n°195091
youdontcar​e
Posté le 14-08-2002 à 10:47:41  profilanswer
 

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.

mood
Publicité
Posté le 14-08-2002 à 10:47:41  profilanswer
 

n°195102
cybercouf
Posté le 14-08-2002 à 11:06:12  profilanswer
 

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

n°195103
youdontcar​e
Posté le 14-08-2002 à 11:09:02  profilanswer
 

[: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)

n°195107
gm_superst​ar
Appelez-moi Super
Posté le 14-08-2002 à 11:14:25  profilanswer
 

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/

n°195113
cybercouf
Posté le 14-08-2002 à 11:19:21  profilanswer
 

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  :)

n°195137
cybercouf
Posté le 14-08-2002 à 12:23:58  profilanswer
 

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

n°195147
youdontcar​e
Posté le 14-08-2002 à 13:02:10  profilanswer
 

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.

n°195163
cybercouf
Posté le 14-08-2002 à 13:39:03  profilanswer
 

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.  :)  
 

n°195411
cybercouf
Posté le 14-08-2002 à 19:14:00  profilanswer
 

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:

n°195446
youdontcar​e
Posté le 14-08-2002 à 20:52:25  profilanswer
 

[:yaisse] [:the real pinzo]


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Positionnement de menu déroulant

 

Sujets relatifs
[HTML - PHP] P'tit question menuComment faire un menu comme sur ce site ?
[HTML] Positionnement d une image.........[PHP]menu deroulant & repertoir
Comment faire une menu page web[html / css] positionnement de divs, compatible TOUS navigateurs ?
Recherche module d'actualité a integrer dans mon menu[VBA] Urgent - Comment modifier le menu contextuel de Word? [résolu]
[HTML et JS] Un menu qui s'affiche sur 2 frames à la fois... 
Plus de sujets relatifs à : Positionnement de menu déroulant


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR