Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu en CSS

alignement des sous-menus...

Inazad
    3 janvier 2006 à 21:01:31

    Bonjour tout le monde!

    J'ai récemment découvert ce site par un ami et je le trouve super! Bon, venons en au fait:

    J'ai un menu dynamique en CSS / PHP. L'implantation du PHP est pour le menu dans une table bref, ce n'est pas très important. Le problème est que je voudrais que mes sous-menus s'alignent parfaitement sur le côté (voir exemple site 1).

    Site #1

    Voici mon menu (désolé pour l'image, j'avais une panne sèche d'hébergeur, ;) ):

    Image utilisateur

    Ce dernier fonctionne très bien à l'exception de l'alignement des sous-menus:

    Image utilisateur

    Maintenant, voici le code de mon menu (menu.php):

    Le JavaScript:
    <script type="text/javascript">
    <!--
    window.onload=montre;
    function montre(id) {
    var d = document.getElementById(id);
            for (var i = 1; i<=1000; i++) {
                    if (document.getElementById(i)) {document.getElementById(i).style.display='none';}
            }
    if (d) {d.style.display='block';}
    }
    //-->
    </script>


    Le CSS:
    <style type="text/css">

    body {
    padding:0;
    margin:0;
    font-family: verdana, arial, sans-serif;
    font-size: 70%;
    color: black;
    }
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #menu {
    position: absolute;
    top: 1em;
    left: 1em;
    width: 180px;
    }

    #menu dt {
    cursor: pointer;
    background: #A9BFCB;
    height: 20px;
    line-height: 20px;
    margin: 2px 0;
    border: 1px solid gray;
    text-align: left;
    font-weight: bold;
    }

    #menu dd {
    position: absolute;
    z-index: 100;
    left: 8em;
    margin-top: -1.4em;
    width: 10em;
    background: #A9BFCB;
    border: 1px solid gray;
    }

    #menu ul {
    padding: 2px;
    }
    #menu li {
    text-align: center;
    font-size: 85%;
    height: 18px;
    line-height: 18px;
    }
    #menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    }

    #menu li a:hover {
    text-decoration: underline;
    }


    #mentions {
    font-family: verdana, arial, sans-serif;
    position: absolute;
    bottom : 200px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    }
    #mentions a {text-decoration: none;
    color: #222;
    }
    #mentions a:hover{text-decoration: underline;
    }

    </style>


    Enfin, le PHP:

    <?
    include("admin/protec/informations.php3");

    $retour = mysql_query("SELECT * FROM menu");

    echo '<dl id="menu">';
        while($donnees = mysql_fetch_array($retour))
        {
            echo '<dt onmouseover="javascript:montre(\'' . $donnees['id'] . '\');"><a href="#">' . $donnees['nom'] . '</a></dt>';
            echo '<dd id="' . $donnees['id'] . '" onmouseover="javascript:montre(\'' . $donnees['id'] . '\');" onmouseout="javascript:montre();">';
           
                            $menu = $donnees['id'];   
                               echo '<ul>';
                                    $sous_menu = mysql_query("SELECT * FROM sousmenu WHERE menu='$menu'");
                                            while ($dsous_menu = mysql_fetch_array($sous_menu))
                                            {
                                            echo '<li><a href=' . $dsous_menu['lien'] . '>' . $dsous_menu['option'] . '</a></li>';
                                            }
                               echo '</ul>';
                              
             echo '</dd>';
            }
    echo '</dl>';
    mysql_close();
    ?>


    Merci aux prochaines réponses,

    Inazad
    • Partager sur Facebook
    • Partager sur Twitter
    strucky
      3 janvier 2006 à 21:40:04

      Salut,

      Chez moi tout est aligné correctement avec FF et IE.
      • Partager sur Facebook
      • Partager sur Twitter
      Progi1984
      • HTML / CSS
        3 janvier 2006 à 21:47:31

        Idem ! moi aussi !
        • Partager sur Facebook
        • Partager sur Twitter
        Inazad
          4 janvier 2006 à 6:36:53

          Je parle, le menu du Site #1, c'est sûr qu'il est aligné correctement car c'est comme cela que je veux mon menu (mon menu en images..).

          Avez vous pris mon code pour afficher le menu? Sûrement pas...

          Ma question est la suivante:

          Comment faire pour que mes sous-menus s'alignent comme l'exemple du Site #1 ?


          Mon menu est celui que je vous affiche en image... J'aimerais tout simplement aligner mes sous-menus comme celui du Site #1.

          Ça doit juste être une question de JavaScript ou de CSS mais je ne sais pas lequel...

          Merci de m'aider!

          A++
          • Partager sur Facebook
          • Partager sur Twitter
          jp949
            4 janvier 2006 à 6:44:43

            salut essaie ca
            #menu dd {
            position: absolute;
            z-index: 100;
            left: 16em;
            margin-top: -2em;
            width: 10em;
            background: #A9BFCB;
            border: 1px solid gray;
            }
            • Partager sur Facebook
            • Partager sur Twitter
            Inazad
              4 janvier 2006 à 7:04:13

              Merci enfin!

              Tu es un bon samaritain!

              Ou puis-je trouver des tutoriaux sur le CSS??

              Merci encore!

              A++
              • Partager sur Facebook
              • Partager sur Twitter
              jp949
                4 janvier 2006 à 8:13:22

                Je ne connais que " alsacreations " mais c'est surtout la pratique qui permet d' avancer, les tutos c'est bien faut s'en souvenir alors que quand tu t'es retrouivé dans la situation la tu retiens la methode que tu as employé
                • Partager sur Facebook
                • Partager sur Twitter

                Menu en CSS

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur ●
                • Markdown