[HTML/JS] Chargement + menu x niveaux JS

Chargement + menu x niveaux JS [HTML/JS] - HTML/CSS - Programmation

Marsh Posté le 01-12-2003 à 14:02:54    

Bonjour :hello:
j'ai un problème très étrange qui ne peut pas être considéré comme un bug: oui, je n'arrive pas à reproduire l'erreur :/
c'est pour cela que je cherche des idées pour le déceler.  
 
Voici le cas. Je possède une page composée de 3 frames. La première ne possède rien de spécial, la deuxième est un menu en javascript (truc simple) et la troisième possède un include en asp.
 
Environ 1 fois sur 3, lorsque je clique sur mon menu, la page se charge (recharge le menu + un onclick sur la frame principale) puis semble continuer à se charger.  
exemple du bas de la fenêtre:
http://www.mangaclub.ch/urd/imagecenter/Perso/86.gif
 
Comme je l'ai dis, mon grand problème c'est que je ne peux pas reproduire la chose. Elle n'est pas indépendant à un lien, ni à une page, ni rien. Cela se produit totalement aléatoirement.
 
Si qqun a une idée, qu'il n'hésite pas, je sais vraiment pas ou chercher. Si jamais je suis sous ie et je ne peux pas tester sous un autre browser (intranet pas cool).
 
Merci d'avance [:zytra]


Message édité par urd-sama le 12-12-2003 à 10:08:56
Reply

Marsh Posté le 01-12-2003 à 14:02:54   

Reply

Marsh Posté le 01-12-2003 à 16:35:45    

nobooooody knoooows, the troubles i've seen...
(up déguisé [:dawa])

Reply

Marsh Posté le 01-12-2003 à 16:49:40    

nobody knows but jesuuus.... [:dawa]

Reply

Marsh Posté le 01-12-2003 à 17:17:14    

Montres les sources des 3 frames et de la page de description des frames, ou une URL, qu'on puisse tenter de comprendre quelque-chose.
 
Idée, est-ce que tu as des <button onclick="..."> quelque part dans un formulaire ?


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 01-12-2003 à 18:20:59    

je vous donne tout ca demain  
d'après mes souvenirs y'a pas d'événement onclick sur un bouton, par contre sur des liens oui


---------------
.: Clône de Drasche .:. Ebichuleys .:. Avec l'Aloe Vera je fais de beaux cacas [:dawa] .: www.oserselancer.com :.
Reply

Marsh Posté le 01-12-2003 à 19:48:21    

pour aider, je dirais qu'il faut renommer le titre comme ça:
 
[IE/HTML] ...
 
(Attention indice caché: t'as essayé avec moz, juste pour t'en persuader?)


Message édité par schnapsmann le 01-12-2003 à 19:49:16

---------------
From now on, you will speak only when spoken to, and the first and last words out of your filthy sewers will be "Sir!"
Reply

Marsh Posté le 01-12-2003 à 20:19:36    

a peu pas tester avec un autre browser
c'est bloqué


---------------
.: Clône de Drasche .:. Ebichuleys .:. Avec l'Aloe Vera je fais de beaux cacas [:dawa] .: www.oserselancer.com :.
Reply

Marsh Posté le 01-12-2003 à 20:21:05    

Urd-sama a écrit :

a peu pas tester avec un autre browser
c'est bloqué


 
t'as essayé de rajouter des sauts de lignes bidon un peu partout dans ta page (surtout en fin). N'oublie pas, c'est ie.


---------------
From now on, you will speak only when spoken to, and the first and last words out of your filthy sewers will be "Sir!"
Reply

Marsh Posté le 02-12-2003 à 09:54:08    

Alors...


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 02-12-2003 à 09:55:05    

alors je viens de tester l'ajout de saut de ligne bidon et le problème est toujours là malheureusement.
ensuite voici les codes des 3 pages, je vais les alléger au mieux:
vue d'ensemble: http://www.mangaclub.ch/urd/imagecenter/Perso/82.png
(ne vous fier pas aux flèches, c'était pour une autre problème)
 
code frame 1:

Code :
  1. <body>
  3. <div style="left:0px; top:0px;">
  4. <!--form ACTION="/Search/d/query.idq" METHOD="get" target="_top"-->
  5. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  6. <input name="CiMaxRecordsPerPage" type="hidden" value="10" />
  7. <!--webbot bot="HTMLMarkup" endspan i-checksum="4725" -->
  8. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  9. <input name="TemplateName" type="hidden" value="query" />
  10. <!--webbot bot="HTMLMarkup" endspan i-checksum="3271" -->
  11. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  12. <input name="CiSort" type="hidden" value="rank[d]" />
  13. <!--webbot bot="HTMLMarkup" endspan i-checksum="16531" -->
  14. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  15. <input name="HTMLQueryForm" type="hidden" value="/Search/d/query.htm" />
  16. <!--webbot bot="HTMLMarkup" endspan i-checksum="3739" -->
  17. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  18. <input name="CiScope" type="hidden" value="/oe/" />
  19. <!--webbot bot="HTMLMarkup" endspan i-checksum="3370" -->
  20. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  21. <input name="CiMeta" type="hidden" value="ALL" />
  22. <!--webbot bot="HTMLMarkup" endspan i-checksum="62908" -->
  23. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  24. <input name="CiSuche" type="hidden" value="CiRestriction" />
  25. <!--webbot bot="HTMLMarkup" endspan i-checksum="44664" -->
  27. <table cellspacing="0" style="border:0px; width:701px; height:71px;">
  28.   <tr>
  29.     <td style="width:15px; height:42px;"></td>
  30.     <td style="width:200px; height:42px;"><img border="0" src="http://pww.xxx.ch/images/xxx.gif" alt="Intranet xxx" /></td>
  31.     <td style="width:19px; height:42px;"></td>
  32.     <td colspan="6" style="width:571px; height:42px;"><h1>xxx</h1></td>
  33.   </tr>
  34.   <tr>
  35.     <td class="BorderTop" style="width:15px; height:25px;">&nbsp;</td>
  36.     <td class="BorderTop" style="width:212px; height:25px;"><a href="http://pww.xxx.ch/index.htm" target="_top">Home Intranet</a></td>
  37.     <td style="width:19px; height:25px;"></td>
  38.     <td style="width:159px; height:25px;"></td>
  39.     <td class="BorderLeft" style="width:60px; height:25px;"><%IF Session("langue" )="deutsch" THEN%><span class="langueActive"><%ELSE%><!--<a href="index.asp" target="_top">--><%END IF%><span style="color:#808080;">Deutsch</span></a></span></td>
  40.     <td class="BorderLeft" style="width:60px; height:25px;"><%IF Session("langue" )="francais" THEN%><span class="langueActive"><%ELSE%><!--<a href="2index.asp" target="_top">--><%END IF%><span style="color:#808080;">Français</span></a></span></td>
  41.     <td class="BorderLeft" style="width:60px; height:25px;"><%IF Session("langue" )="italiano" THEN%><span class="langueActive"><%ELSE%><!--<a href="3index.asp" target="_top">--><%END IF%><span style="color:#808080;">Italiano</span></a></span></td>
  42.     <td class="BorderLeft" style="width:60px; height:25px;"><%IF Session("langue" )="english" THEN%><span class="langueActive"><%ELSE%><a href="4index.asp" target="_top"><%END IF%>English</a></span></td>
  43.     <td class="BorderLeft" style="width:52px; height:25px;"><a href="4left.htm?070200" target="left" onClick="parent.right.location='support/feedback/feedback.asp'">Cont@ct</a></td>
  44.   </tr>
  45. </table>
  46. <!--/form-->
  47. </div>
  49. </body>


le code n'est pas entièrement de moi mais je peux pas le modifier
 
frame2:

Code :
  1. <body>
  3. <script language="javascript" type="text/javascript">
  4. <!--
  5. var vActif = "null";
  6.   vActif = location.search.substring(1, location.search.length-4);
  7.   vActif2 = location.search.substring(3, location.search.length-2);
  8.   vActif3 = location.search.substring(5, location.search.length);
  9.   if (vActif=="null" ) vActif=00;
  10.   if (vActif2=="null" ) vActif2=00;
  11.   if (vActif3=="null" ) vActif3=00;
  12. -->
  13. </script>
  15. <!-- Menu Home xxx-->
  16. <script language="javascript" type="text/javascript">
  17. <!--
  18. if (vActif==00) {document.write ("<a href=\"4right.asp\" target=\"right\" onClick=\"parent.left.location='4left.htm?000000'\" class=\"menuLeft , menuLeftSelected\">Home RUP@IT1</a>" );}
  19. else {document.write ("<a href=\"4right.asp\" target=\"right\" onClick=\"parent.left.location='4left.htm?000000'\" class=\"menuLeft\">Home RUP@IT1</a>" );}
  20. -->
  21. </script>
  23. <!-- Menu Definition -->
  24. <script language="javascript" type="text/javascript">
  25. <!--
  26. if (vActif==01) /*Si le menu est sélectionné, on ouvre les sous-menus inhérents; sinon affichage normal sans les sous-menus*/
  27. {
  28.   /* Si le menu est sélectionné, on utilise un background blanc; autrement gris */
  29.   if (vActif2==00) {document.write ("<a href=\"definition/definition.asp\" target=\"right\" onClick=\"parent.left.location='4left.htm?010000'\" class=\"menuLeft , menuLeftSelected\">Definition</a>" );}
  30.   else {document.write ("<a href=\"definition/definition.asp\" target=\"right\" onClick=\"parent.left.location='4left.htm?010000'\" class=\"menuLeft\">Definition</a>" );}
  31. [...]
  32. </script>
  34. <div class="ligneHaut"> &nbsp; </div>
  35. <br /><br /><br />
  37. </body>


 
je mets pas de code de la frame3 vu que le problème ne vient pas de la


Message édité par urd-sama le 02-12-2003 à 09:57:21
Reply

Marsh Posté le 02-12-2003 à 09:55:05   

Reply

Marsh Posté le 02-12-2003 à 09:56:35    

[:cupra]
tu pourrais pas utiliser les balises [cpp][/cpp] ?

Reply

Marsh Posté le 02-12-2003 à 09:57:00    

c'est une idée :D
edit: corriged


Message édité par urd-sama le 02-12-2003 à 09:57:44
Reply

Marsh Posté le 02-12-2003 à 10:12:51    

Bon, désolé, mais j'ai rarement vu un menu aussi capilotracté.
 
Si je comprend bien :
<a href="definition/definition.asp" target="right" onClick="parent.left.location='4left.htm?010000'"
Je me dis que tu recharge la page de menu pour lui passer un paramètre qui sert a activer un sous-menu.
 
Ne serait-il pas plus simple d'appeler une fonction qui cache les sous-menus et qui montre celui que tu veux ?
 
Tu veux un exemple ?


Message édité par Mara's dad le 02-12-2003 à 10:13:21

---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 02-12-2003 à 10:16:50    

je sais que c'est un code tout moisi mais j'y connaissais que dalle en jscript :(
je veux bien voir par contre oui, mais je pense pas que j'aurai le temps de changer (présentation jeudi)
mais pour après  ca peut être intéressant :)

Reply

Marsh Posté le 02-12-2003 à 10:26:06    

Il est tout simple :
 
menu.html

Code :
  1. <HTML>
  2. <HEAD>
  3. <link href="menu.css" type="text/css" rel="styleSheet">
  4. <script language="javascript1.1">
  5. var activFonc = 0;
  6. function selFonc( x )
  7. {
  8. if( x != activFonc )
  9. {
  10.  if( activFonc != 0 )
  11.  {
  12.   document.getElementById( 'sous_menu_' + activFonc ).style.display = "none" ;
  13.  }
  14.  document.getElementById( 'sous_menu_' + x ).style.display = "block" ;
  15.  activFonc = x;
  16. }
  17. }
  18. </script>
  19. </head>
  20. <BODY>
  21. <DIV CLASS="menudyn">
  22. <a class="fonc" id="fonc_1" href="page.php?id_page=1_0" target="page" onClick="selFonc(1);">Menu-1</a>
  23. <DIV id="sous_menu_1" class="sous_menu">
  24.  <a class="sous_fonc" href="page.php?id_page=1_1" target="page">Normes</a>
  25.  <a class="sous_fonc" href="page.php?id_page=1_2" target="page">Fonctionnement</a>
  26.  <a class="sous_fonc" href="page.php?id_page=1_3" target="page">Exemples</a>
  27. </DIV>
  28. <a class="fonc" id="fonc_2" href="page.php?id_page=2_0" target="page" onClick="selFonc(2);">Menu-2</a>
  29. <DIV id="sous_menu_2" class="sous_menu">
  30.  <a class="sous_fonc" href="page.php?id_page=2_1" target="page">Produits</a>
  31.  <a class="sous_fonc" href="page.php?id_page=2_2" target="page">Tarifs</a>
  32. </DIV>
  33. </DIV>
  34. </BODY>
  35. </HTML>


 
menu.css

Code :
  1. div.menudyn
  2. {
  3. padding: 0px;
  4. padding-top: 4;
  5. padding-bottom: 4;
  6. }
  8. .fonc
  9. {
  10. display: block;
  11. position:relative;
  12. margin:2;
  13. padding:2;
  14. text-decoration: none;
  15. }
  18. .fonc:hover
  19. {
  20. color: #e0e0e0;
  21. background-color: #2D598A;
  22. }
  24. .sous_fonc
  25. {
  26. display: block;
  27. margin:2;
  28. padding:2;
  29. text-decoration: none;
  30. }
  32. .sous_fonc:hover
  33. {
  34. color: #e0e0e0;
  35. background-color: #2D598A;
  36. }
  38. .sous_menu
  39. {
  40. z-index:2;
  41. display: none;
  42. position: relative;
  43. margin:0;
  44. padding:0;
  45. left:20;
  46. }


 
Dans le css, ce qui est important, c'est display: none dans sous_menu.
 
Edit : Corrigé une incohérence dans les targets.


Message édité par Mara's dad le 02-12-2003 à 10:36:32

---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 02-12-2003 à 10:32:41    

merci dad, je tenterai ca à l'occaz, je vais d'abord terminer ce qui est en cours :)

Reply

Marsh Posté le 02-12-2003 à 10:39:39    

Avantages de ce menu
Il est facile à générer dynamiquement.
Il n'y a presque rien en javascript.
La frame de menu ne se recharge pas à chaque sélection.
...


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 02-12-2003 à 10:40:53    

ouais clair c'est beaucoup mieux que mon actuel (j'ai assez honte de l'actuel je dois avouer mais bon).
je m'y pencherai pour la prochaine session :)

Reply

Marsh Posté le 02-12-2003 à 11:50:52    

Est-ce que ça pourrait être un problème de Response.End() / Response.Flush() ou qqch du style ?

Reply

Marsh Posté le 02-12-2003 à 12:27:39    

il n'y en a pas (pas 100% sure cependant)

Reply

Marsh Posté le 02-12-2003 à 15:52:01    

justement. essaye d'en mettre..

Reply

Marsh Posté le 02-12-2003 à 15:53:01    

ah lol ok je vais tester demain merci :)

Reply

Marsh Posté le 02-12-2003 à 15:56:55    

Sans garanties toutefois :)

Reply

Marsh Posté le 03-12-2003 à 13:24:08    

apparemment aucune amélioration

Reply

Marsh Posté le 03-12-2003 à 14:51:50    

sniffe la carte réseau alors

Reply

Marsh Posté le 03-12-2003 à 15:16:19    

Cette image : src="http://pww.xxx.ch/images/xxx.gif" alt="Intranet xxx" />
Elle est toujours disponible ou pas ?
 
Dans ta frame de droite, il semble qu'il y ait des éléments externes. Peut-être certains d'entre-eux sont-il long à arriver. Un peu comme la fleur ICQ sur le forum...


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 08-12-2003 à 10:09:35    

je suis en train de voir ton menu en javascript, et j'ai un petite question, je ne comprends pas bien le role de cette variable:
var activFonc = 0;
peux-tu m'éclairer?

Reply

Marsh Posté le 08-12-2003 à 10:47:13    

C'est une variable globale au script.
Elle contient le numéro du menu dont le sous-menu est ouvert.
 
Au chargement, aucun menu n'est ouvert donc 0.
 
Ensuite quand on clic sur un menu, on regarde cette variable :
 
 
Si activFonc == menu demandé -> rien ( return )
Si activFonc =! 0 -> Fermer menu activFonc
Enfin, ouvrir le menu demandé et enregistrer son numéro dans activFonc.


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 08-12-2003 à 10:51:53    

d'accord merci daddy :jap:
je suis en train de regarder pour faire à 3 niveaux, spa simple toussa [:dawa]

Reply

Marsh Posté le 08-12-2003 à 11:03:03    

3 Niveaux !
Et demain 4, c'est çà ?
Donc N en fait...
Heu, je regarde aussi, pour le fun :D


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 08-12-2003 à 11:04:21    

normalement ca devrait rester à 3 (je fais en sorte que ca dépasse pas). mais pour le fun faudrait faire pour N niveaux ouais ;)
c'est là que je remarque que je maitrise pas du tout le javascript :/

Reply

Marsh Posté le 08-12-2003 à 12:05:02    

Je l'ai !
 
menu.html ( à générer bien sûr ! )

Code :
  1. <HTML>
  2. <HEAD>
  3. <link href="menu.css" type="text/css" rel="styleSheet">
  4. <script>
  6. // Nombre de niveaux max
  7. var nbMaxLevel = 4;
  9. // Niveau actuel
  10. var levelNum = 0;
  12. // Tableau des menus activés
  13. var activMenu = new Array( nbMaxLevel );
  15. // Initialisation du tableau
  16. for( i = 0; i < nbMaxLevel; i++ )
  17. {
  18. activMenu[ i ] = 0;
  19. }
  21. // Fonction de gestion des menus
  22. function sel_Menu( menuNum, menuLevel )
  23. {
  25. // Si le menu demandé est déjà actif, on ne fait rien
  26. // On plutôt, on fait quelque-chose seulement si le menu demandé n'est pas actif
  27. if( activMenu[ menuLevel ] != menuNum )
  28. {
  30.  // On ferme les menus de même niveau et plus profond
  31.  for( i = nbMaxLevel - 1 ; i >= menuLevel; i-- )
  32.  {
  33.   // Si le menu du niveau i est actif.
  34.   if( activMenu[ i ] != 0 )
  35.   {
  36.    document.getElementById( 'menu_' + activMenu[ i ] ).style.display = "none" ;
  37.   }
  38.  }
  40.  // On ouvre le menu demandé
  41.  document.getElementById( 'menu_' + menuNum ).style.display = "block" ;
  43.  // On mémorise le menu ouvert dans ce niveau
  44.  activMenu[ menuLevel ] = menuNum;
  45. }
  46. }
  48. </script>
  49. </head>
  50. <body>
  51. <DIV CLASS="menudyn">
  52. <a class="fonc" href="page.php?id_page=1_0" target="right" onClick="sel_Menu( '1', 0 );">Menu-1</a>
  53. <DIV id="menu_1" class="sous_menu">
  54.  <a class="sous_fonc" href="page.php?id_page=1_1" target="right" onClick="sel_Menu( '1_1', 1 );">Menu-1-1</a>
  55.  <DIV id="menu_1_1" class="sous_menu">
  56.   <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_1', 2 );">Menu-1-1-1</a>
  57.   <DIV id="menu_1_1_1" class="sous_menu">
  58.    <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right">Norme</a>
  59.    <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right">Exemples</a>
  60.    <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right">Fonctionnement</a>
  61.   </DIV>
  62.   <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_2', 2 );">Menu-1-1-2</a>
  63.   <DIV id="menu_1_1_2" class="sous_menu">
  64.    <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right">Norme</a>
  65.    <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right">Exemples</a>
  66.    <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_2_1', 3 );">Menu-1-1-2-1</a>
  67.    <DIV id="menu_1_1_2_1" class="sous_menu">
  68.     <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right">Norme</a>
  69.     <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right">Exemples</a>
  70.     <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right">Fonctionnement</a>
  71.    </DIV>
  72.    <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_2_2', 3 );">Menu-1-1-2-2</a>
  73.    <DIV id="menu_1_1_2_2" class="sous_menu">
  74.     <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right">Norme</a>
  75.     <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right">Exemples</a>
  76.     <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right">Fonctionnement</a>
  77.    </DIV>
  78.    <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right">Fonctionnement</a>
  79.   </DIV>
  80.   <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_3', 2 );">Menu-1-1-3</a>
  81.   <DIV id="menu_1_1_3" class="sous_menu">
  82.    <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right">Norme</a>
  83.    <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right">Exemples</a>
  84.    <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right">Fonctionnement</a>
  85.   </DIV>
  86.   <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right">Fonctionnement</a>
  87.  </DIV>
  88.  <a class="sous_fonc" href="page.php?id_page=1_2" target="right">Fonctionnement</a>
  89.  <a class="sous_fonc" href="page.php?id_page=1_2" target="right" onClick="sel_Menu( '1_2', 1 );">Menu-1-2</a>
  90.  <DIV id="menu_1_2" class="sous_menu">
  91.   <a class="sous_fonc" href="page.php?id_page=1_2_1" target="right">Normes</a>
  92.   <a class="sous_fonc" href="page.php?id_page=1_2_2" target="right">Fonctionnement</a>
  93.   <a class="sous_fonc" href="page.php?id_page=1_2_3" target="right">Exemples</a>
  94.  </DIV>
  95.  <a class="sous_fonc" href="page.php?id_page=1_3" target="right">Exemples</a>
  96. </DIV>
  97. <a class="fonc" href="page.php?id_page=2_0" target="right" onClick="sel_Menu( '2', 0 );">Menu-2</a>
  98. <DIV id="menu_2" class="sous_menu">
  99.  <a class="sous_fonc" href="page.php?id_page=2_1" target="right">Produits</a>
  100.  <a class="sous_fonc" href="page.php?id_page=2_2" target="right">Tarifs</a>
  101.  <a class="sous_fonc" href="page.php?id_page=2_1" target="right" onClick="sel_Menu( '2_1', 1 );">Menu-2-1</a>
  102.  <DIV id="menu_2_1" class="sous_menu">
  103.   <a class="sous_fonc" href="page.php?id_page=1_2_1" target="right">Normes</a>
  104.   <a class="sous_fonc" href="page.php?id_page=1_2_2" target="right">Fonctionnement</a>
  105.   <a class="sous_fonc" href="page.php?id_page=1_2_3" target="right">Exemples</a>
  106.  </DIV>
  107. </DIV>
  108. </DIV>
  109. </body>
  110. </html>


 
menu.css ( C'est le même, sauf que j'ai mis un width dans fonc et sous-fonc ):  

Code :
  1. div.menudyn
  2. {
  3. padding: 0px;
  4. padding-top: 4;
  5. padding-bottom: 4;
  6. }
  8. .fonc
  9. {
  10. display: block;
  11. position:relative;
  12. margin:2;
  13. padding:2;
  14. width:200px;
  15. text-decoration: none;
  16. }
  19. .fonc:hover
  20. {
  21. color: #e0e0e0;
  22. background-color: #2D598A;
  23. }
  25. .sous_fonc
  26. {
  27. display: block;
  28. margin:2;
  29. padding:2;
  30. width:200px;
  31. text-decoration: none;
  32. }
  34. .sous_fonc:hover
  35. {
  36. color: #e0e0e0;
  37. background-color: #2D598A;
  38. }
  40. .sous_menu
  41. {
  42. z-index:2;
  43. display: none;
  44. position: relative;
  45. margin:0;
  46. padding:0;
  47. left:20;
  48. }


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 08-12-2003 à 12:08:58    

t'es trop fort [:dawa]
je regarde ca cet aprèm, je galère avec une croute de pc pour le moment

Reply

Marsh Posté le 08-12-2003 à 12:16:41    

J'ai vu :D


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 08-12-2003 à 13:58:59    

voilà j'ai fais ma propre css:

Code :
  1. body {
  2. background-color: #CCCCCC;
  3. }
  5. div.menudyn  {
  6. width: 165px;
  7. display: block;
  8. }
  10. .fonc  {
  11. display: block;
  12. }
  13.  
  14. .fonc:hover  {
  15. background-color: white;
  16. }
  17.  
  18. .sous_fonc  {
  19. display: block;
  20. }
  21.  
  22. .sous_fonc:hover  {
  23. background-color: white; 
  24. }
  26. .sous_menu  {
  27. display: none;
  28. padding-left: 10px;
  29. }
  31. a {
  32. border-top: 1px white solid;
  33. text-decoration: none;
  34. color: black;
  35. font-size: smaller;
  36. }


2 questions:
- j'aimerais que les bordures prennent toute la largeur, est-ce possible? (essayé plusieurs trucs sans succès)
- est-ce possible de faire en sorte que lorsque le pointeur est sur la ligne du menu, ca soit sélectionné (état de mon ancien menu). tandis que maintenant il faut être sur le texte. je crois que c'est la propriété display:block qui permet ceci me trompe-je?
sinon ca marche nickel, t'es trop fort [:darkmavis]

Reply

Marsh Posté le 08-12-2003 à 14:37:47    

1- Toute la largeur à gauche c'est çà ? Heu, je sais pas, je fait des tests...
2- Sous Moz çà marche, mais sous IE, il faut ajouter width=100%; dans a{...}


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 08-12-2003 à 14:46:34    

yes le deuxième problème est réglé!
j'aimerais effectivement que ma ligne aille jusqu'au bord gauche. j'ai essayé padding, margin, left... mais aucun ne semble être d'accord
 
le code corrigé et incriminé:

Code :
  1. ...
  2. .sous_menu  {
  3. display: none;
  4. padding-left: 10px; /*problème*/
  5. }
  7. a {
  8. border-top: 1px white solid;
  9. text-decoration: none;
  10. color: black;
  11. font-size: smaller;
  12. width: 100%;
  13. }


Message édité par urd-sama le 08-12-2003 à 14:47:48
Reply

Marsh Posté le 08-12-2003 à 14:59:32    

1- Heu pour le moment la seule solution que je vois c'est d'enlever padding-left: 10px; de .sous_menu{...} et de générer des <span style="margin-left:0px;"></span> pour le texte des liens avec une valeur en fonction du niveau de profondeur du menu :

Code :
  1. <DIV CLASS="menudyn">
  2. <a class="fonc" href="page.php?id_page=1_0" target="right" onClick="sel_Menu( '1', 0 );"><span style="margin-left:0px;">Menu-1</span></a>
  3. <DIV id="menu_1" class="sous_menu">
  4.  <a class="sous_fonc" href="page.php?id_page=1_1" target="right" onClick="sel_Menu( '1_1', 1 );"><span style="margin-left:10px;">Menu-1-1</span></a>
  5.  <DIV id="menu_1_1" class="sous_menu">
  6.   <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_1', 2 );"><span style="margin-left:20px;">Menu-1-1-1</span></a>
  7.   <DIV id="menu_1_1_1" class="sous_menu">
  8.    <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right"><span style="margin-left:30px;">Norme</span></a>       
  9.    <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right"><span style="margin-left:30px;">Exemples</span></a>     
  10.    <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right"><span style="margin-left:30px;">Fonctionnement</span></a>
  11.   </DIV>
  12.   <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_2', 2 );"><span style="margin-left:20px;">Menu-1-1-2</span></a>
  13.   <DIV id="menu_1_1_2" class="sous_menu">
  14.    <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right"><span style="margin-left:30px;">Norme</span></a>
  15.    <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right"><span style="margin-left:30px;">Exemples</span></a>
  16.    <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_2_1', 3 );"><span style="margin-left:30px;">Menu-1-1-2-1</span></a>
  17.    <DIV id="menu_1_1_2_1" class="sous_menu">
  18.     <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right"><span style="margin-left:40px;">Norme</span></a>
  19.     <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right"><span style="margin-left:40px;">Exemples</span></a>
  20.     <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right"><span style="margin-left:40px;">Fonctionnement</span></a>
  21.    </DIV>
  22.    <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_2_2', 3 );"><span style="margin-left:30px;">Menu-1-1-2-2</span></a>
  23.    <DIV id="menu_1_1_2_2" class="sous_menu">
  24.     <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right"><span style="margin-left:40px;">Norme</span></a>
  25.     <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right"><span style="margin-left:40px;">Exemples</span></a>
  26.     <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right"><span style="margin-left:40px;">Fonctionnement</span></a>
  27.    </DIV>
  28.    <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right"><span style="margin-left:30px;">Fonctionnement</span></a>
  29.   </DIV>
  30.   <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_3', 2 );"><span style="margin-left:20px;">Menu-1-1-3</span></a>
  31.   <DIV id="menu_1_1_3" class="sous_menu">
  32.    <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right"><span style="margin-left:30px;">Norme</span></a>
  33.    <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right"><span style="margin-left:30px;">Exemples</span></a>
  34.    <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right"><span style="margin-left:30px;">Fonctionnement</span></a>
  35.   </DIV>
  36.   <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right"><span style="margin-left:20px;">Fonctionnement</span></a>
  37.  </DIV>
  38.  <a class="sous_fonc" href="page.php?id_page=1_2" target="right"><span style="margin-left:10px;">Fonctionnement</span></a>
  39.  <a class="sous_fonc" href="page.php?id_page=1_2" target="right" onClick="sel_Menu( '1_2', 1 );"><span style="margin-left:10px;">Menu-1-2</span></a>
  40.  <DIV id="menu_1_2" class="sous_menu">
  41.   <a class="sous_fonc" href="page.php?id_page=1_2_1" target="right"><span style="margin-left:20px;">Normes</span></a>
  42.   <a class="sous_fonc" href="page.php?id_page=1_2_2" target="right"><span style="margin-left:20px;">Fonctionnement</span></a>
  43.   <a class="sous_fonc" href="page.php?id_page=1_2_3" target="right"><span style="margin-left:20px;">Exemples</span></a>
  44.  </DIV>
  45.  <a class="sous_fonc" href="page.php?id_page=1_3" target="right"><span style="margin-left:10px;">Exemples</span></a>
  46. </DIV>
  47. <a class="fonc" href="page.php?id_page=2_0" target="right" onClick="sel_Menu( '2', 0 );"><span style="margin-left:0px;">Menu-2</span></a>
  48. <DIV id="menu_2" class="sous_menu">
  49.  <a class="sous_fonc" href="page.php?id_page=2_1" target="right"><span style="margin-left:10px;">Produits</span></a>
  50.  <a class="sous_fonc" href="page.php?id_page=2_2" target="right"><span style="margin-left:10px;">Tarifs</span></a>
  51.  <a class="sous_fonc" href="page.php?id_page=2_1" target="right" onClick="sel_Menu( '2_1', 1 );"><span style="margin-left:10px;">Menu-2-1</span></a>
  52.  <DIV id="menu_2_1" class="sous_menu">
  53.   <a class="sous_fonc" href="page.php?id_page=1_2_1" target="right"><span style="margin-left:20px;">Normes</span></a>
  54.   <a class="sous_fonc" href="page.php?id_page=1_2_2" target="right"><span style="margin-left:20px;">Fonctionnement</span></a>
  55.   <a class="sous_fonc" href="page.php?id_page=1_2_3" target="right"><span style="margin-left:20px;">Exemples</span></a>
  56.  </DIV>
  57. </DIV>
  58. </DIV>


 


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 08-12-2003 à 15:03:52    

c'est ce que je pensais aussi ;)
pour le moment j'y vais comme ca, de toute facon je dois construire le menu de toute pièce alors c'est pas un problème.
un énorme merci à toi pour toute ton aide, tu m'as fait gagner beaucoup de temps!
maintenant je dois traduire une centaines de pages en 3 langues, vive la suisse!

Reply

Marsh Posté le 08-12-2003 à 15:13:59    

ah, par contre y'a un petit problème:
http://www.mangaclub.ch/urd/imagecenter/Perso/88.gif
quand le texte va à la ligne

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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