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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [JVS] pb de largeur d'un menu dynamique, svp aidez moi !!

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[JVS] pb de largeur d'un menu dynamique, svp aidez moi !!

n°1521972
kick591
qui ne tente rien n'a rien ;-)
Posté le 28-02-2007 à 21:15:03  profilanswer
 

Salut à tous !
Je sollicite vos compétences, chers ami(e)s harwarior(esse)s  
En effet, j'ai créé un menu dynamique à l'aide du javascript, jusque là, tout va bien, sauf que le menu n'occupe pas tte la largeur de la fenêtre, ce qui est tout de même embettant, surtout esthétiquement parlant.
Je souhaiterai donc, aggrandir la largeur du menu, pr qu'il occupe la totalité de la largeur de la fenêtre (100% donc )
Voici le code du fichier "menu.php", on ne sait jamais, cela est p-e utile.
 

Code :
  1. <head>
  2. <link href="styles/menu.css" rel="stylesheet" type="text/css" />
  3. <script type="text/javascript">
  4. <!--
  5. window.onload=montre;
  6. function montre(id) {
  7. var d = document.getElementById(id); largeurmenu = 230;
  8. for (var i = 1; i<=10; i++) {
  9.  if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  10. }
  11. if (d) {d.style.display='block';}
  12. }
  13. //-->
  14. </script>
  15. </head>
  16. <body>
  17. <div id="menu" align="center">
  18. <dl>
  19. <dt onMouseOver="javascript:montre();><a href="news.php" title="Retour à l'accueil"><center>ACCUEIL</center></a></dt>
  20. </dl>
  21. <dl>
  22. <dt onMouseOver="javascript:montre('smenu1')"><center>RECHERCHE</center></dt>
  23. <dd id="smenu1">
  24. <ul>
  25. <li><a  href="sous menus/recherche1.php">recherche par artistes</a></li>
  26. <li><a  href="sous menus/recherche2.php">recherche par album</a></li>
  27. </ul>
  28. </dd>
  29. </dl>
  30. <dl>
  31. <dt onMouseOver="javascript:montre();"><a href="forum.php"><center>FORUM</center></a></dt>
  32. </dl>
  33. <dl>
  34. <dt onMouseOver="javascript:montre('smenu3');"><center>CHRONIQUE</center></dt>
  35. <dd id="smenu3">
  36. <ul>
  37. <li><a href="sous menus/chronique1.php">Interviews</a></li>
  38. <li><a  href="sous menus/chronique2.php">Articles</a></li>
  39. </ul>
  40. </dd>
  41. </dl>
  42. <dl>
  43. <dt onMouseOver="javascript:montre('smenu4');"><center>LIENS</center></dt>
  44. <dd id="smenu4">
  45. <ul>
  46. <li><a href= href="sous menus/lien1.php">sur la zik' !</a></li>
  47. <li><a href= href="sous menus/lien2.php">autres que musicaux</a></li>
  48. </ul>
  49. </dd>
  50. </dl>
  51. </div>
  52. </body>


 
D'avance, je vous remercie
Kick591


Message édité par kick591 le 01-03-2007 à 21:10:07
mood
Publicité
Posté le 28-02-2007 à 21:15:03  profilanswer
 

n°1521980
kick591
qui ne tente rien n'a rien ;-)
Posté le 28-02-2007 à 21:55:31  profilanswer
 

et voici le document menu.css :  

Code :
  1. body {
  2. margin: 0;
  3. padding: 0;
  4. background: white;
  5. font: 80% verdana, arial, sans-serif;
  6. }
  7. dl, dt, dd, ul, li {
  8. margin: 0;
  9. padding: 0;
  10. list-style-type: none;
  11. }
  12. #menu {
  13. position: absolute; /* placement du menu, à modifier selon vos besoins */
  14. top: 0;
  15. left: 0;
  16. z-index:100;
  17. width: 100%; /* correction pour Opera */
  18. }
  19. #menu dl {
  20. float: left;
  21. width: 12em;
  22. }
  23. #menu dt {
  24. cursor: pointer;
  25. text-align: center;
  26. font-weight: bold;
  27. background: #ccc;
  28. border: 1px solid gray;
  29. margin: 1px;
  30. }
  31. #menu dd {
  32. display: none;
  33. border: 1px solid gray;
  34. }
  35. #menu li {
  36. text-align: center;
  37. background: #fff;
  38. }
  39. #menu li a, #menu dt a {
  40. color: #000;
  41. text-decoration: none;
  42. display: block;
  43. height: 100%;
  44. border: 0 none;
  45. }
  46. #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
  47. background: #eee;
  48. }
  49. #site {
  50. position: absolute;
  51. z-index: 1;
  52. top : 70px;
  53. left : 10px;
  54. color: #000;
  55. background-color: #ddd;
  56. padding: 5px;
  57. border: 1px solid gray;
  58. }


Message édité par kick591 le 28-02-2007 à 22:18:22
n°1521984
gooopil
pfiew
Posté le 28-02-2007 à 22:08:06  profilanswer
 

Commence par mettre des balises code pour que ça soit un peu lisible...

n°1521985
kick591
qui ne tente rien n'a rien ;-)
Posté le 28-02-2007 à 22:09:39  profilanswer
 

bin elle sont mises non ?
Sinon, on ne parle p-e pas de la même chose...

n°1521986
gooopil
pfiew
Posté le 28-02-2007 à 22:10:46  profilanswer
 

[ code ] [ /code ] sans les espaces et ton code à l'intérieur :)

n°1521988
kick591
qui ne tente rien n'a rien ;-)
Posté le 28-02-2007 à 22:12:22  profilanswer
 

bin j'ai mis, dans le premier document les balises <head> et <body>, ça ne suffit pas à votre compréhension ?

n°1521993
gatsu35
Blablaté par Harko
Posté le 28-02-2007 à 22:15:44  profilanswer
 

on parle des balises code en BBcode du forum afin d'afficher ton code source plus lisiblement :o

n°1521994
kick591
qui ne tente rien n'a rien ;-)
Posté le 28-02-2007 à 22:16:23  profilanswer
 

j'ai honte, excusez moi....
Voilà, c'est modifié, merci de la remarque ...
Personne n'a d'idée ?


Message édité par kick591 le 28-02-2007 à 22:26:40
n°1522051
mIRROR
Chevreuillobolchévik
Posté le 01-03-2007 à 03:17:09  profilanswer
 

ca fait mal aux yeux ton truc le link en dehors du head  
ton menu dans un span [:dawak]
donc tu commences par enlever ton span qui sert a rien (surtout que son style n est pas défini) puis apres on voit

n°1522181
kick591
qui ne tente rien n'a rien ;-)
Posté le 01-03-2007 à 12:34:20  profilanswer
 

voilà, c'est fait
Personne ne peut m'aider ?  :sarcastic:  

Message cité 1 fois
Message édité par kick591 le 01-03-2007 à 21:11:25
mood
Publicité
Posté le 01-03-2007 à 12:34:20  profilanswer
 

n°1699093
novice064
Posté le 07-03-2008 à 18:36:09  profilanswer
 

kick591 a écrit :

voilà, c'est fait
Personne ne peut m'aider ?  :sarcastic:  


J'ai modifié ton code en intégrant ton menu dans un tableau.

Code :
  1. <html>
  2. <head>
  3. <link href="styles/menu.css" rel="stylesheet" type="text/css" />
  4. <script type="text/javascript">
  5. <!--
  6. window.onload=montre;
  7. function montre(id) {
  8. var d = document.getElementById(id); largeurmenu = 230;
  9. for (var i = 1; i<=10; i++) {
  10. if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  11. }
  12. if (d) {d.style.display='block';}
  13. }
  14. //-->  
  15. </script>
  16. </head>
  17. <body>
  18. <div id="menu" align="center">
  19. <table id="ssmenu" CELLSPACING=0 CELLPADDING=0 >
  20. <tr valign="top">
  21. <td>
  22. <dl>
  23. <dt onMouseOver="javascript:montre(); ><a href="news.php" title="Retour à l'accueil">ACCUEIL</a></dt>
  24. </dl>
  25. </td>
  26. <td>
  27. <dl>
  28. <dt onMouseOver="javascript:montre('smenu1')">RECHERCHE</dt>
  29. <dd id="smenu1">
  30. <ul>
  31. <li><a  href="sous menus/recherche1.php">recherche par artistes</a></li>
  32. <li><a  href="sous menus/recherche2.php">recherche par album</a></li>
  33. </ul>
  34. </dd>
  35. </dl>
  36. </td>
  37. <td>
  38. <dl>
  39. <dt onMouseOver="javascript:montre();"><a href="forum.php">FORUM</a></dt>
  40. </dl>
  41. </td>
  42. <td>
  43. <dl>
  44. <dt onMouseOver="javascript:montre('smenu3');">CHRONIQUE</dt>
  45. <dd id="smenu3">
  46. <ul>
  47. <li><a href="sous menus/chronique1.php">Interviews</a></li>
  48. <li><a  href="sous menus/chronique2.php">Articles</a></li>
  49. </ul>
  50. </dd>
  51. </dl>
  52. </td>
  53. <td>
  54. <dl>
  55. <dt onMouseOver="javascript:montre('smenu4');">LIENS</dt>
  56. <dd id="smenu4">
  57. <ul>
  58. <li><a href= href="sous menus/lien1.php">sur la zik' !</a></li>
  59. <li><a href= href="sous menus/lien2.php">autres que musicaux</a></li>
  60. </ul>
  61. </dd>
  62. </dl>
  63. </td>
  64. </tr>
  65. </table>
  66. </div>
  67. </body>
  68. </html>


 
le fichier menu.css change légèrement
 

Code :
  1. body {
  2. margin: 0;
  3. padding: 0;
  4. background: white;
  5. font: 80% verdana, arial, sans-serif;
  6. }
  7. dl, dt, dd, ul, li {
  8. margin: 0;
  9. padding: 0;
  10. list-style-type: none;
  11. }
  12. #ssmenu {
  13. width:100%;
  14. }
  15. #ssmenu td {
  16. width:20%; /* 20 = 100/(nb de colonnes) */
  17. }
  18. #menu {
  19. position: absolute; /* placement du menu, à modifier selon vos besoins */
  20. top: 0;
  21. left: 0;
  22. z-index:100;
  23. width: 100%; /* correction pour Opera */
  24. }
  25. #menu dl {
  26. float: left;
  27. width: 12em;
  28. }
  29. #menu dt {
  30. cursor: pointer;
  31. text-align: center;
  32. font-weight: bold;
  33. background: #ccc;
  34. border: 1px solid gray;
  35. margin: 1px;
  36. }
  37. #menu dd {
  38. display: none;
  39. border: 1px solid gray;
  40. }
  41. #menu li {
  42. text-align: center;
  43. width:100%; /* DEBUG IE 5.01*/
  44. background: #fff;
  45. }
  46. #menu li a, #menu dt a {
  47. color: #000;
  48. text-decoration: none;
  49. display: block;
  50. height: 100%;
  51. border: 0 none;
  52. }
  53. #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
  54. background: #eee;
  55. }
  56. #site {
  57. position: absolute;
  58. z-index: 1;
  59. top : 70px;
  60. left : 10px;
  61. color: #000;
  62. background-color: #ddd;
  63. padding: 5px;
  64. border: 1px solid gray;
  65. }


Testé sur IE 5.01, 5.5, 6.0, 7.0 et mozilla 5.0


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

  [JVS] pb de largeur d'un menu dynamique, svp aidez moi !!

 

Sujets relatifs
[Résolu] Créer un site dynamique rapidement et simplement[PHP] création dynamique de menu SELECT ?
script qui fonctionne 1 fois sur 2, aidez moi ! :([CSS] Largeur mini de page pour positionner barre verticale à droite
Formulaire dynamique HELP ![C] Question sur l'allocation dynamique
Problème avec tableau dynamique à deux dimensionsmenu à plusieurs niveaux
Plus de sujets relatifs à : [JVS] pb de largeur d'un menu dynamique, svp aidez moi !!

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.090 secondes

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