Partage
  • Partager sur Facebook
  • Partager sur Twitter

petit probleme de cadre en CSS

<div></div>

Christopher
  • HTML / CSS
    17 décembre 2005 à 14:12:25

    salut les zér0,

    j'essaye de faire un menu dynamique en CSS/Java, mais j'ai un petit probleme, mes cadres de sous menu son recouvert par les cadres de mes menus !

    comment faire !

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

    <style type="text/css">
    <!--

    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    #menu {
    position: absolute;
    top: 1em;
    left: 1em;
    width: 10em;
    }

    #menu dt {
    cursor: pointer;
    background: #A9BFCB;
    height: 20px;
    line-height: 20px;
    margin: 2px 0;
    border: 1px solid gray;
    text-align: center;
    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;
    }

    /* ajout de menu ici */

    #menu1,#menu2,#menu3 {
    position: absolute;
    width: 10em;
    z-index: 500;
    }

    /* Emplacement des cadres menus */
    /* ajout de menu ici */

    #menu1 {
    top:0px;
    left: 0px;
    }

    #menu2 {
    top:21px;
    left: 0px;
    }

    #menu3 {
    top:42px;
    left: 0px;
    }

    #mentions {
    font-family: verdana, arial, sans-serif;
    position: absolute;
    bottom : 100px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    }

    #mentions a {text-decoration: none;
    color: #222;
    }

    #mentions a:hover{text-decoration: underline;
    }

    -->
    </style>

    </head>
    <body>

    <!-- Menu  -->

    <dl id="menu">

            <div id="menu1">
                    <dt onmouseover="javascript:montre('smenu1');"><a href="#">Menu 1</a></dt>
                            <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
                                    <ul>
                                            <li><a href="#">Sous-Menu 1.1</a></li>
                                            <li><a href="#">Sous-Menu 1.2</a></li>
                                            <li><a href="#">Sous-Menu 1.3</a></li>
                                    </ul>
                            </dd>
                            </div> 
                           
                    <div id="menu2">       
                    <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Menu 2</dt>
                            <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
                                    <ul>
                                            <li><a href="#">Sous-Menu 2.1</a></li>
                                            <li><a href="#">Sous-Menu 2.2</a></li>
                                    </ul>
                            </dd>   
                    </div>

                    <div id="menu3">
                    <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Menu 3</dt>
                            <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
                                    <ul>
                                            <li><a href="#">Sous-Menu 3.1</a></li>
                                            <li><a href="#">Sous-Menu 3.1</a></li>
                                    </ul>
                            </dd>
                    </div>

    </dl>

    </body>
    </html>
    • Partager sur Facebook
    • Partager sur Twitter

    petit probleme de cadre 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