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

pb de largeur d'un menu dynamique, svp aidez moi !! [JVS] - HTML/CSS - Programmation

Marsh Posté le 28-02-2007 à 21:15:03    

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
Reply

Marsh Posté le 28-02-2007 à 21:15:03   

Reply

Marsh Posté le 28-02-2007 à 21:55:31    

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
Reply

Marsh Posté le 28-02-2007 à 22:08:06    

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

Reply

Marsh Posté le 28-02-2007 à 22:09:39    

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

Reply

Marsh Posté le 28-02-2007 à 22:10:46    

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

Reply

Marsh Posté le 28-02-2007 à 22:12:22    

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

Reply

Marsh Posté le 28-02-2007 à 22:15:44    

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

Reply

Marsh Posté le 28-02-2007 à 22:16:23    

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
Reply

Marsh Posté le 01-03-2007 à 03:17:09    

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

Reply

Marsh Posté le 01-03-2007 à 12:34:20    

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
Reply

Marsh Posté le 01-03-2007 à 12:34:20   

Reply

Marsh Posté le 07-03-2008 à 18:36:09    

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

Reply

Sujets relatifs:

Leave a Replay

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