menu qui se superpose

menu qui se superpose - HTML/CSS - Programmation

Marsh Posté le 17-07-2006 à 10:59:40    

bonjour,
j'ai un problème avec mon menu et ça doit être la CSS.
J'ai 6  onglets dans mon menu. Quand la page est maximisé, y a aucun problème.Mais quand je minimise la page (restaurer), les onglets se superposesnt (3 onglets en haut et 3 en bas).
 
voilà le code html:
 

Code :
  1. <div id="menu">
  3.      <dl>
  4.       <dt onmouseover="javascript:montre(\'smenu1\');">Gestion documentaire</dt>
  5.        <dd id="smenu1" onmouseover="javascript:montre(\'smenu1\');" onmouseout="javascript:montre(\'\');">
  6.         <ul>
  8.          <li> <a href="creer_fiche.php"><b>C</b>r&eacute;er une fiche</a></li>
  9.          <li><a href="#"><b>E</b>xport vers AD VITAM</a></li> <!-- cette ligne doit disparitre dans 6 mois!-->
  10.          <li><a href="recherche_av.php"><b>R</b>echercher un document</a></li>
  12.         </ul>
  13.        </dd>
  14.      </dl>
  16.      <dl>
  17.       <dt onmouseover="javascript:montre(\'smenu3\');"><a href="#">Gestion de mes alertes</a></dt>
  18.      </dl>
  20.      <dl>
  21.       <dt onmouseover="javascript:montre(\'smenu5\');">Utilisateurs</dt>
  22.        <dd id="smenu5" onmouseover="javascript:montre(\'smenu5\');" onmouseout="javascript:montre(\'\');">
  23.         <ul>
  24.          <li><a href="#"><b>L</b>iste des utilisateurs</a></li>
  25.          <li><a href="#"><b>C</b>r&eacute;er un utilisateur</a></li>
  26.         </ul>
  27.        </dd>
  28.      </dl>
  30.      <dl>
  31.       <dt onmouseover="javascript:montre(\'smenu4\');">Statistiques</dt>
  32.        <dd id="smenu4" onmouseover="javascript:montre(\'smenu4\');" onmouseout="javascript:montre(\'\');">
  33.         <ul>
  34.          <li><a href="#"><b>C</b>lassement par type de document</a></li>
  35.          <li><a href="#"><b>C</b>lassement par sous-type de document</a></li>
  36.          <li><a href="#"><b>C</b>lassement par activit&eacute;</a></li>
  37.          <li><a href="#"><b>C</b>lassement par activit&eacute; avec une r&eacute;partition par sous-type de document</a></li>
  38.          <li><a href="#"><b>C</b>lassement par pays</a></li>
  39.         </ul>
  40.        </dd>
  41.      </dl>
  43.      <dl>
  44.       <dt onmouseover="javascript:montre(\'smenu2\');">Historique des actions</dt>
  45.        <dd id="smenu2" onmouseover="javascript:montre(\'smenu2\');" onmouseout="javascript:montre(\'\');">
  46.         <ul>
  47.          <li><a href="#"><b>H</b>istorique des suppresions de formulaires</a></li>
  48.          <li><a href="#"><b>H</b>istorique des alertes</a></li>
  49.         </ul>
  50.        </dd>
  51.      </dl>
  53.      <dl>
  54.       <dt onmouseover="javascript:montre(\'smenu6\');">Administration du site</dt>
  55.        <dd id="smenu6" onmouseover="javascript:montre(\'smenu6\');" onmouseout="javascript:montre(\'\');">
  56.         <ul>
  57.          <li><a href="#"><b>G</b>estion des menus d&eacute;roulants</a></li>
  58.         </ul>
  59.        </dd>
  60.      </dl>
  62.     </div>


 
 
et voici la 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, li,ul {
  8.    margin: 0;
  9.    padding: 0;
  10.    list-style-type: none;
  11.    font-size: x-small;
  12.    }
  13.    #menu {
  14.    position: absolute;
  15.    top: 0;
  16.    left: 10%;
  17.    z-index:100;
  18.    width: 100%;
  19.    }
  20.    #menu dl {
  21.    float: left;
  22.    width: 12em;
  23.    margin: 0 1px;
  24.    }
  25.    #menu dt {
  26.    font-size: small;
  27.    cursor: pointer;
  28.    text-align: center;
  29.    font-weight: bold;
  30.    background: #ccc;
  31.    border: 1px solid gray;
  32.    height: 40px;
  33.    }
  34.    #menu dd {
  35.    border: 1px solid gray;
  36.    }
  37.    #menu li {
  38.    text-align: center;
  39.    background: #fff;
  40.    }
  41.    #menu li a, #menu dt a {
  42.    color: #000;
  43.    text-decoration: none;
  44.    display: block;
  45.    height: 100%;
  46.    border: 0 none;
  47.    font-size: small;
  48.    }
  49.    #menu li span, #menu dt span{
  50.    font-size: small;
  51.    }
  52.    #menu li a:hover, #menu dt a:hover  /* Quand le visiteur pointe sur le lien */
  53.    {
  54.    background: #eee;
  55.    text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
  56.    color: green; /* Le lien sera écrit en vert quand on pointera dessus */
  57.    }
  59.    #site {
  60.    position: absolute;
  61.    z-index: 1;
  62.    top : 70px;
  63.    left : 10px;
  64.    color: #000;
  65.    background-color: #ddd;
  66.    padding: 5px;
  67.    border: 1px solid gray;
  68.    }
  70.    a {
  71.    text-decoration: none;
  72.    color:black;
  73.    color: #222;
  74.    }


 
quelqu'un peut m'aider?

Reply

Marsh Posté le 17-07-2006 à 10:59:40   

Reply

Marsh Posté le 17-07-2006 à 12:35:48    

La structure HTML de ton menu est inutilement trop lourde !
 

Code :
  1. <dl id="menu">
  2. <dt>...</dt>
  3. <dd>...</dd>
  5. <dt>...</dt>
  6. <dd>...</dd>
  8. <dt>...</dt>
  9. <dd>...</dd>
  11. <dt>...</dt>
  12. <dd>...</dd>
  13. </dl>


est plus simple et tout aussi correct !
 
Inutile de faire un "<b>X</b>" pour mettre la premiere lettre en gras.
a:first-letter { font-weight: bold; }
Pourra faire la meme chose ! A tester sur IE6 cependant ... possible que ca ne fonctionne pas.
 
Dans tes evenements (onmouseover et compagnie) inutile de preceder ton code de "javascript:" et inutile egalement d'echapper le simple quote '.
 
Pour ce qui est du probleme qui t'amene a creer le topic ... je n'ai pas regardé ^^ dsl [:petrus75]

Reply

Marsh Posté le 17-07-2006 à 13:23:18    

merci quand meme pour les conseils :)

Reply

Sujets relatifs:

Leave a Replay

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