Partage
  • Partager sur Facebook
  • Partager sur Twitter

Liste déroulante et position absolute

marche pas

ocelote
    6 juillet 2006 à 18:36:14

    bonjour. Mon probleme est simple a expliquer, lorsque j'utilise un menu deroulant placé entre des balise <div> et met position:absolute; dans mon fichier css le menu ne se deroule pas (il reste deroulé)...
    merci pour ceux qui ont une solution o_O
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      7 juillet 2006 à 1:18:02

      montre le code du menu déroulant

      (je pensent pas que le css ou les balises autre ai un rapport avec ton problème !)
      • Partager sur Facebook
      • Partager sur Twitter
      ocelote
        7 juillet 2006 à 2:04:01

        <script type="text/javascript">
        window.onload=montre('smenu1');//prendre le get :pas de get : accueill
        var menuSel=1;
        var hidden=0;

        //affiche le contenu du menu selectionnéé
        function montre(id) {
                for (var i = 1;document.getElementById('smenu'+i); i++) {
                        document.getElementById('smenu'+i).style.display='none';
                }
                smenu(0);//masque l'enventuel rubriue du sous menu du menu couran
                if (id.slice(5,id.length)){//id=0 cache tout
                        document.getElementById(id).style.display='block';
                }
                document.getElementById(id.slice(1,id.length)).style.backgroundImage="url('design/menuI.png')";
                menuSel=id.slice(5,id.length);
        }
        //javascript:setTimeout(smenu(1),10);" onMouseout="javascript:hidden=1;setTimeout(smenu(0),10);
        //affiche la rubrique selectionne
        function smenu(id){
                for (var i = 1;document.getElementById('rs'+i+'menu'+menuSel); i++) {
                        document.getElementById('rs'+i+'menu'+menuSel).style.display='none';
                        document.getElementById('s'+i+'menu'+menuSel).style.marginRight="7px";
                        document.getElementById('s'+i+'menu'+menuSel).style.backgroundImage="url('design/bgMenuI.png')";
                }
                if(id!=0){
                document.getElementById('rs'+id+'menu'+menuSel).style.display='block';
                document.getElementById('s'+id+'menu'+menuSel).style.marginRight="0px";
                document.getElementById('s'+id+'menu'+menuSel).style.backgroundImage="url('design/bgMenuA.png')";
                }
        }

        function ssmenu(id,i){
                document.getElementById('rs'+i+'menu'+menuSel).style.display='block';
                document.getElementById('s'+i+'menu'+menuSel).style.marginRight="0px";
                document.getElementById('s'+i+'menu'+menuSel).style.backgroundImage="url('design/bgMenuA.png')";
                for (var i = 1;document.getElementById('r'+i+id.slice(2,id.length)); i++) {
                        document.getElementById('r'+i+id.slice(2,id.length)).style.backgroundImage="url('design/bgMenuI.png')";
                }
                document.getElementById(id).style.backgroundImage="url('design/bgMenuA.png')";
        }
        function menuss(id){
                for (var i = 1;document.getElementById('r'+i+id.slice(1,id.length)); i++) {
                        document.getElementById('r'+i+id.slice(1,id.length)).style.backgroundImage="url('design/bgMenuI.png')";
                }
                document.getElementById(id).style.display='none';
                document.getElementById(id.slice(1,8)).style.marginRight="7px";
                document.getElementById(id.slice(1,8)).style.backgroundImage="url('design/bgMenuI.png')";
        }
        //etteindre la rubrique
        function rollover(id){
                document.getElementById(id).style.backgroundImage="url('design/menuA.png')";
        }

        function rollout(id){
                document.getElementById(id).style.backgroundImage="url('design/menuI.png')";
        }
        </script>


         <div id="menu">
        <div style="position:absolute; top:144px; left:10px;">
        <center>
                <div id="menu1" style="background-image:url('design/menuI.png');
        width:159px;height:25px;cursor:pointer;"         onMouseover="javascript:rollover('menu1')" onMouseout="javascript:rollout('menu1')" onClick="montre('smenu1')">
                        Cours
                </div>
                <div id="smenu1" style="display:block;width:170px;" onMouseout="javascript:smenu(0);">
                        <label id="s1menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');margin:0px 7px 1px 7px;" onMouseover="javascript:smenu(1);">Programmation</label>
                        <label id="s2menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');margin:0px 7px 1px 7px;" onMouseover="javascript:smenu(2);">sous menu 2</label>
                        <label id="s3menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');margin:0px 7px 1px 7px;" onMouseover="javascript:smenu(3);">sous menu 3</label>

                </div>
        <br>
                <div id="menu2" style="background-image:url('design/menuI.png');
        width:159px;height:25px;cursor:pointer;"         onMouseover="javascript:rollover('menu2')" onMouseout="javascript:rollout('menu2')" onClick="montre('smenu2');">
                        MENU2
                </div>
                <div id="smenu2" style="display:block;width:170px;">
                        <label id="s1menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');margin:0px 7px 1px 7px;" onMouseover="javascript:smenu(1);">sous menu 1</label>
                        <label id="s2menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');margin:0px 7px 1px 7px;" onMouseover="javascript:smenu(2);" >sous menu 2</label>
                        <label id="s3menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');margin:0px 7px 1px 7px;" onMouseover="javascript:smenu(3);" >sous menu 3</label>

                </div>
        <br>
                <div id="menu3" style="background-image:url('design/menuI.png');
        width:159px;height:25px;cursor:pointer;"         onMouseover="javascript:rollover('menu3')" onMouseout="javascript:rollout('menu3')" onClick="montre('smenu3');">
                        MENU3
                </div>
                <div id="smenu3" style="display:block;width:170px;">
                        <label id="s1menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');margin:0px 7px 1px 7px;" onMouseover="javascript:smenu(1);" >sous menu 1</label>
                        <label id="s2menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');margin:0px 7px 1px 7px;" onMouseover="javascript:smenu(2);" >sous menu 2</label>
                        <label id="s3menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');margin:0px 7px 1px 7px;" onMouseover="javascript:smenu(3);" >sous menu 3</label>

                </div>
        </center>
        </div>

        <!-- contenu des sous rubrique du menu 1 -->
        <div  style="position:absolute;top:169px;left:178px;">
                <div id="rs1menu1" style="display:none;width:160px;" onMouseout="javascript:menuss('rs1menu1');">
                        <span id="r1s1menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r1s1menu1',1);" onClick="javascript:document.location.href='http://localhost/DSN/MyWEB/cours/index.php';">C/C++</span>
                        <span id="r2s1menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r2s1menu1',1);">hello2</span>
                        <span id="r3s1menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r3s1menu1',1);">hello3</span>

                        <span id="r4s1menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r4s1menu1',1);">hello4</span>
                        <span id="r5s1menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r5s1menu1',1);">hello5</span>
                        <span id="r6s1menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r6s1menu1',1);">hello6</span>
                </div>
                <div id="rs2menu1" style="display:none;width:160px;margin-top:26px;" onMouseout="javascript:menuss('rs2menu1');">
                        <span id="r1s2menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r1s2menu1',2);">hello</span>
                        <span id="r2s2menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r2s2menu1',2);">hello</span>

                        <span id="r3s2menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r3s2menu1',2);">hello</span>
                        <span id="r4s2menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r4s2menu1',2);">hello</span>
                        <span id="r5s2menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r5s2menu1',2);">hello</span>
                        <span id="r6s2menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r6s2menu1',2);">hello</span>
                </div>
                <div id="rs3menu1" style="display:none;width:160px;margin-top:52px;" onMouseout="javascript:menuss('rs3menu1');">
                        <span id="r1s3menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r1s3menu1',3);">hello</span>

                        <span id="r2s3menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r2s3menu1',3);">hello</span>
                        <span id="r3s3menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r3s3menu1',3);">hello</span>
                        <span id="r4s3menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r4s3menu1',3);">hello</span>
                        <span id="r5s3menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r5s3menu1',3);">hello</span>
                        <span id="r6s3menu1" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');" onMouseover="javascript:ssmenu('r6s3menu1',3);">hello</span>
                </div>

        </div>
        <!-- contenu des sous rubrique du menu 2 -->
        <div style="position:absolute;top:217px;left:180px;">
                <div id="rs1menu2" style="display:none;width:160px;">
                        <span id="r1s1menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r2s1menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r3s1menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r4s1menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>

                        <span id="r5s1menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r6s1menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                </div>
                <div  id="rs2menu2" style="display:none;width:160px;margin-top:26px;">
                        <span id="r1s2menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r2s2menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r3s2menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>

                        <span id="r4s2menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r5s2menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r6s2menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                </div>
                <div id="rs3menu2" style="display:none;width:160px;margin-top:52px;">
                        <span id="r1s3menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r2s3menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>

                        <span id="r3s3menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r4s3menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r5s3menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r6s3menu2" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                </div>
        </div>
        <!-- contenu des sous rubrique du menu 3 -->
        <div style="position:absolute;top:265px;left:180px;">

                <div  id="rs1menu3" style="display:none;width:160px;">
                        <span id="r1s1menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r2s1menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r3s1menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r4s1menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r5s1menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>

                        <span id="r6s1menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                </div>
                <div id="rs2menu3" style="display:none;width:160px;margin-top:26px;">
                        <span id="r1s2menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r2s2menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r3s2menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r4s2menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>

                        <span id="r5s2menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r6s2menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                </div>
                <div id="rs3menu3" style="display:none;width:160px;margin-top:52px;">
                        <span id="r1s3menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r2s3menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r3s3menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>

                        <span id="r4s3menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r5s3menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                        <span id="r6s3menu3" style="display:block; border: 1px solid #BBBBBB;cursor:pointer;background-image:url('design/bgMenuI.png');">hello</span>
                </div>
        </div>
        </div>


        c'est un peu long
        le css qui va avec :
        #menu
        {
        position: absolute;
        margin-left: 280px;
        margin-top: 200px;
        }

        qund j'enleve "position: absolute;" et bien ce menu marche tres bien mais il ne se place pas la ou je souhaite :o ....
        merci
        • Partager sur Facebook
        • Partager sur Twitter
        Anonyme
          7 juillet 2006 à 2:07:58

          désolé mais je n'y comprend rien, tu devrai faire un truc moins compliqué, je suis désole mais j'arrive pas du tout à lire ton code :(
          • Partager sur Facebook
          • Partager sur Twitter
          ocelote
            7 juillet 2006 à 2:09:25

            uhm c'est pas vraiment mon code pour etre franc tu peu peu etre essayé de le copié collé non?
            • Partager sur Facebook
            • Partager sur Twitter
            Gounlaf
            • HTML / CSS
              7 juillet 2006 à 2:58:06

              Là, c'est pas une liste déroulante, pour commencer
              Ensuite, il est répété je ne sais combien de fois dans ton document le meme style ... => tu met tout ca dans une css, avec une class
              Ensuite, on y verra beaucoup plus clair
              • Partager sur Facebook
              • Partager sur Twitter
              Anonyme
                7 juillet 2006 à 5:38:53

                Citation : Gounlaf

                Là, c'est pas une liste déroulante, pour commencer
                Ensuite, il est répété je ne sais combien de fois dans ton document le meme style ... => tu met tout ca dans une css, avec une class
                Ensuite, on y verra beaucoup plus clair



                j'osais pas le dire :p
                tu m'ôtes les mots de la bouche ^^
                • Partager sur Facebook
                • Partager sur Twitter

                Liste déroulante et position absolute

                × 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