JeuWeb - Crée ton jeu par navigateur
[Résolu] Menu déroulant horizontal - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu] Menu déroulant horizontal (/showthread.php?tid=2700)

Pages : 1 2

[Résolu] Menu déroulant horizontal - zneman - 03-07-2008

Bonjour !
Ca fait longtemps que je ne suis pas venu demander conseil ici moi Big Grin
Bref... Today my probleme is on my deroulant menu.. (quelle maîtrise de l'anglais hein ?! Big Grin).

Je supprime les menus des côtés pour les mettre dans un menu "déroulant" horizontal..
Quand je dis "déroulant", c'est en fait un menu sur une ligne...
CF: http://css.alsacreations.com/xmedia/exemples/deroulant/cssmenu3.htm

Petit problème: je ne peux passer mon cadre ou se trouve le menu en "position: absolute" comme dit dans le tuto, sous peine que mon cadre passe au dessus de mon cadre du dessous... (pas top Sad).

Je vous montre donc mon problème:
http://img391.imageshack.us/img391/3466/capturemagusworldv30307es8.png

C'est moche hein ?! Big Grin

Bref.. il faut que j'arrive à placer tout ce petit menu au centre... et... J'y arrive pas -_-'

Voila donc mon code html:

Code PHP :
<?php 

<div id="menu_bas">

<dl>



        <dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>

            <dd id="smenu1">

                <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>

    </dl>

    

    <dl>            

        <dt onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>

            <dd id="smenu2">

                <ul>

                    <li><a href="#">Sous-menu 2.1</a></li>

                    <li><a href="#">Sous-menu 2.2</a></li>



                </ul>

            </dd>

    </dl>

    

    <dl>    

        <dt onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>

            <dd id="smenu3">

                <ul>

                    <li><a href="#">Sous-menu 3.1</a></li>

                    <li><a href="#">Sous-menu 3.2</a></li>

                    <li><a href="#">Sous-menu 3.3</a></li>

                    <li><a href="#">Sous-menu 3.4</a></li>

                    <li><a href="#">Sous-menu 3.5</a></li>

                </ul>

            </dd>

    </dl>



    

    <dl>    

        <dt onmouseover="montre('smenu4');"><a href="#">Menu 4</a></dt>

            <dd id="smenu4">

                <ul>

                    <li><a href="#">Sous-menu 4.1</a></li>

                    <li><a href="#">Sous-menu 4.2</a></li>

                    <li><a href="#">Sous-menu 4.3</a></li>



                </ul>

            </dd>

    </dl>

</div>

Et monde code Css:

Code PHP :
<?php 

/* Cadre menus horizontaux */



#menu_bas { margin-left:10px; margin-bottom: 20px; width:852px; height:100px; background-color: #eae4b2; border: 1px solid #383836; float: inherit; text-align:center;}

.menu_bas_texte { padding:5px; color: #000000; font-size:12px; font-family: Arial, "Arial Black", "Times New Roman", Times, serif; }

.menu_bas_texte a { font-size: 11px; COLOR: #9e790a; font-family : Verdana; text-decoration:none} 

#menu_bas dl {float: left; }

#menu_bas dd {float:left;}

#menu_bas li {display: inline;}

#menu_bas a {text-decoration: none;color: #000;background: #eae4b2;}



#smenu1, #smenu2, #smenu3, #smenu4 {position: absolute; left: 0; font-size: 0.7em; border-top: 1px solid gray; width: 852px; }



/* Le corps de la page */



#corps { margin-left:10px; margin-bottom: 20px; width:852px; background-color: #eae4b2; border: 1px solid #383836; float: inherit; }

#corps h5 { text-align: center; font-family: Arial, "Arial Black", "Times New Roman", Times, serif; width:852px; height:40px; background-image: url("images/titre_cadre.png"); background-repeat:no-repeat; margin-bottom:10px; margin-top:0px; padding-top:5px; }

.corps_texte { padding:5px; color: #000000; font-size:12px; font-family: Arial, "Arial Black", "Times New Roman", Times, serif; }

.corps_texte a { font-size: 11px; COLOR: #9e790a; font-family : Verdana; text-decoration:none}

Vous l'aurez remarqué, je ne suis pas un virtuose du Css Tongue

Merci d'avance de votre aide Wink

Zneman

RE: Menu déroulant horizontal.. - thelos - 03-07-2008

#menu_bas {
margin-left:auto;
margin-right:auto;
margin-bottom: 20px;
width:852px;
height:100px;
background-color: #eae4b2;
border: 1px solid #383836;
float: inherit;
text-align:center;}

Centrage automatique grâce aux margin, essaie de voir le résultat ça doit pas être trop mal Wink

RE: Menu déroulant horizontal.. - zneman - 03-07-2008

J'avais déjà testé mais le résultat est le même Sad

RE: Menu déroulant horizontal.. - emaia - 03-07-2008

Salut,
J'ai essayé de te refaire le code, en espérant que cela va te plaire :
Code :
<!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>Menu horizontal d&eacute;roulant sur une ligne en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
    for (var i = 1; i<=4; i++){
        document.getElementById("sousmenu"+i).style.display = "none";
    }
    document.getElementById("sousmenu"+id).style.display = "block";
}
//-->
</script>
<style type="text/css">

body {margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;}

#menu {
position : absolute;
left: 50px;
top: 20px;
}

#sousmenu1, #sousmenu2, #sousmenu3, #sousmenu4 {
font-size: 0.7em;
border-top: 1px solid gray;
width: 400px;
display: none;
}

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


</style>

</head>

<body>

<div id="menu">
    <div><a href=# onmouseover="montre('1')">MENU 1</a> <a href=# onmouseover="montre('2')">MENU 2</a> <a href=# onmouseover="montre('3')">MENU 3</a> <a href=# onmouseover="montre('4')">MENU 4</a></div>
    <div id="sousmenu">
        <div id="sousmenu1">tes liens 1 ici</div>
        <div id="sousmenu2">tes liens 2 ici</div>
        <div id="sousmenu3">tes liens 3 ici</div>
        <div id="sousmenu4">tes liens 4 ici</div>
    </div>
</div>

</body>
</html>

Cordialement, emaia.

RE: Menu déroulant horizontal.. - zneman - 03-07-2008

Merci Emaia mais malheureusement, le position absolute n'est pas compatible avec mon design où j'y ai beaucoup de float...
J'ai réussi à centrer les sous menu mais je n'arrive toujours pas à centrer les menus principaux.. Sad

RE: Menu déroulant horizontal.. - emaia - 03-07-2008

AH, mais ton problème vient du position: absolute; du div "menu" ?
Si c'est le cas, il me semble que tu peux l'enlever, non ?

RE: Menu déroulant horizontal.. - zneman - 03-07-2008

Même en l'enlevant ça ne marche pas j'ai l'impression:
Voila ce que j'ai réussi à faire:

http://img79.imageshack.us/img79/7384/capturemagusworldv30307rh7.png

Mes sous menu sont centrés mais non mes menus Sad

Voila le code:

page html:

Code PHP :
<?php 

<!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" >

<head>

    <title>Magus World V3</title>

    <link rel="stylesheet" media="screen" type="text/css" title="design" href="style.css" />

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <meta http-equiv="Content-Language" content="fr" />

    <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>

    </head>

<body>

 

       <!-- L'en-tête -->

 

       <div id="header">           

       </div>

 

       <!-- menus du haut -->

       

       <div id="menus_haut">

        <div id="texte_menu_haut">

      <table width="870" height="16"><tbody><tr>

      <td width="58"></td>

      <td align="center" height="18" width="80" background="images/fond_icone_clan.png" class="texte_menu_haut"><a href="http://themagusworld.com/clan.php">Clans</a></td>

      <td width="90"></td>

      <td align="center" height="18" width="96" background="images/fond_icone_classement.png" class="texte_menu_haut"><a href="http://themagusworld.com/batailles.php">Classement</a></td>

      <td width="215"></td>

      <td align="center" height="18" width="80" background="images/fond_icone_chat.png" class="texte_menu_haut"><a href="http://themagusworld.com/batailles.php">Chat</a></td>

      <td width="101"></td>

      <td align="center" height="18" width="114" background="images/fond_icone_bataille.png" class="texte_menu_haut"><a href="http://themagusworld.com/batailles.php">Partir en guerre</a></td>

      </tr></tbody></table>    

         </div>

       </div>

       

<div id="ensemble_corps_menu">



       

       <div id="ressources">

        <div id="ressources_texte">

      <table width="460" height="16"><tbody><tr>

      <td width="68"></td>

      <td align="center" height="18" width="75" class="texte_ressources">0</td>

      <td width="26"></td>

      <td align="center" height="18" width="96" class="texte_ressources">0</td>

      <td width="22"></td>

      <td align="center" height="18" width="81" class="texte_ressources">0</td>

      <td width="60"></td>

      </tr></tbody></table>  

         </div>

       </div>

 

<div id="menu_bas">

<div id="cadre_cont_menu">

<dl>



        <dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>

            <dd id="smenu1">

                <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>

    </dl>

    

    <dl>            

        <dt onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>

            <dd id="smenu2">

                <ul>

                    <li><a href="#">Sous-menu 2.1</a></li>

                    <li><a href="#">Sous-menu 2.2</a></li>



                </ul>

            </dd>

    </dl>

    

    <dl>    

        <dt onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>

            <dd id="smenu3">

                <ul>

                    <li><a href="#">Sous-menu 3.1</a></li>

                    <li><a href="#">Sous-menu 3.2</a></li>

                    <li><a href="#">Sous-menu 3.3</a></li>

                    <li><a href="#">Sous-menu 3.4</a></li>

                    <li><a href="#">Sous-menu 3.5</a></li>

                </ul>

            </dd>

    </dl>



    

    <dl>    

        <dt onmouseover="montre('smenu4');"><a href="#">Menu 4</a></dt>

            <dd id="smenu4">

                <ul>

                    <li><a href="#">Sous-menu 4.1</a></li>

                    <li><a href="#">Sous-menu 4.2</a></li>

                    <li><a href="#">Sous-menu 4.3</a></li>



                </ul>

            </dd>

    </dl>

</div>

</div>



 

       <!-- Le corps -->

 

       <div id="corps">

           <h5>Information sur Magus World</h5>

              <div class="corps_texte">

<fieldset style="width:350px; float:left;"><legend><b>Informations</b></legend>

là je mets mon texte etc etce cte....c vgvszg fsg qf qb fqz f bfzej; bgbejgfbbq rje gg q ggeg  e egv eve ve ve ve là je mets mon texte etc etce cte....c vgvszg fsg qf qb fqz f bfzej; 

</fieldset>

<fieldset style="width:400px; float:right;"><legend><b>Informations</b></legend>

 mon texte etc etce cte....c vgvszg fsg qf qb fqz f bfzej; bgbejgfbbq rje gg q ggeg  e egv eve ve ve ve là je mets mon texte etc etce cte....c vgvszg fsg qf qb fqz f bfzej; bgbejgfbbq rje gg q ggeg  e egv eve ve ve ve là je mets mon texte etc etce cte....c vgvszg fsg qf qb fqz f bfzej; bgbejgfbbq rje gg q ggeg  e egv eve ve ve ve là je mets mon texte etc etce cte....c vgvszg fsg qf qb fqz f bfzej; bgbejgfbbq rje gg q ggeg  e egv eve ve ve ve là je mets mon texte etc etce cte....c vgvszg fsg qf qb fqz f bfzej; bgbejgfbbq rje gg q ggeg  e egv eve ve ve ve 

</fieldset>

<fieldset style="width:400px; float:right;"><legend><b>Informations</b></legend>

 mon texte etc etce cte....c vgvszg fsg qf qb fqz f bfzej; bgbejgfbbq rje gg q ggeg  e egv eve ve ve ve là je mets mon texte etc etce cte....c vgvszg fsg qf qb fqz f bfzej; bgbejgfbbq rje gg q ggeg  e egv eve ve ve ve 

</fieldset>

              </div>

       </div>



 

       <!-- Le pied de page -->

 

       <div id="pied_de_page">

       </div>

    

    </div>



 

   </body>

</html>


Ma page CSS:

Code PHP :
<?php 

body { width: 900px; margin: auto; margin-top: 20px; margin-bottom: 20px; background-color:#000000; }

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



/* Bannière de Magus */



#header { width: 900px; height: 173px; background-image: url("images/banniere.png"); background-repeat: no-repeat; }



/* Les menus du haut: Classement, chat, Clan et bataille */



#menus_haut { width: 900px; height: 77px; background-image:url("images/sous_banniere.png"); background-repeat:no-repeat; }

#texte_menu_haut { padding-top:22px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; }

.texte_menu_haut a { color:#000000; text-decoration:none; }



/* Cadre qui regroupe les menus et le corps */

  

#ensemble_corps_menu { margin-left:13px; background-color:#cbbd81; width:872px; float:left; }

  



/* Le cadre des ressources */



#ressources { width:467px; height:80px; background-image:url("images/ressources.png"); background-repeat:no-repeat; margin-left:200px; margin-bottom:20px; }

#ressources_texte { padding-top:19px; }

.texte_ressources { color:#FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:9px; }



/* Cadre d'informations */



#cadre_infos { width:550px; height:30px; margin-left:155px; margin-bottom:10px; background-color: #eae4b2; border: 1px solid #383836; font-family: Arial, "Arial Black", "Times New Roman", Times, serif; font-size:10px; }



/* Cadre menus horizontaux */



#menu_bas { margin-left:10px; margin-bottom: 20px; width:852px; height:35px; background-color: #eae4b2; border: 1px solid #383836; float: inherit; text-align:center;}

.menu_bas_texte { padding:5px; color: #000000; font-size:12px; font-family: Arial, "Arial Black", "Times New Roman", Times, serif; }

.menu_bas_texte a { font-size: 11px; COLOR: #9e790a; font-family : Verdana; text-decoration:none} 

#menu_bas dl {float: left;}

#menu_bas dd {float:left;}

#menu_bas li {display: inline;}

#menu_bas a {text-decoration: none;color: #000;background: #eae4b2;}

#smenu1, #smenu2, #smenu3, #smenu4 {position: absolute; left: 0; font-size: 0.7em; border-top: 1px solid gray; width: 852px; }

#cadre_cont_menu { position:absolute;}



/* Le corps de la page */



#corps { margin-left:10px; margin-bottom: 20px; width:852px; background-color: #eae4b2; border: 1px solid #383836; float: inherit; }

#corps h5 { text-align: center; font-family: Arial, "Arial Black", "Times New Roman", Times, serif; width:852px; height:40px; background-image: url("images/titre_cadre.png"); background-repeat:no-repeat; margin-bottom:10px; margin-top:0px; padding-top:5px; }

.corps_texte { padding:5px; color: #000000; font-size:12px; font-family: Arial, "Arial Black", "Times New Roman", Times, serif; }

.corps_texte a { font-size: 11px; COLOR: #9e790a; font-family : Verdana; text-decoration:none} 



/* Le pied de page*/



#pied_de_page { background-image:url("images/pied_de_page.png"); background-repeat:no-repeat; width:872px; height:61px; margin-top:0px; float:left;}



/* Style des formulaires etc... */



input.champsTexte{font-family:Arial,Verdana,Helvetica; font-size:12px; width:120px; color:#000000; background-color:#cbbd81;}

input.champsTexte2{font-family:Arial,Verdana,Helvetica; font-size:12px; width:30px; color:#000000; background-color:#cbbd81;}

input.champsTexte3{font-family:Arial,Verdana,Helvetica; font-size:12px; width:90px; color:#000000; background-color:#cbbd81;}

input.champsTexte4{background:#9DF2CE; border:outset #9DF2CE;}

input.champsTexte5{font-family:Arial,Verdana,Helvetica; font-size:12px; width:50px; color:#000000; background-color:#cbbd81;}

input.submit{font-family:Arial,Verdana,Helvetica; font-size:12px; width:30px; color:#000000; background-color:#cbbd81;}

input.submit2{font-family:Arial,Verdana,Helvetica; font-size:12px; width:80px; color:#000000; background-color:#cbbd81;}

input.submit3{font-family:Arial,Verdana,Helvetica; font-size:12px; width:120px; color:#000000; background-color:#cbbd81;}

input.submit4{font-family:Arial,Verdana,Helvetica; font-size:12px; width:50px; color:#000000; background-color:#cbbd81;}

.select {background-color: #cbbd81; font-family:Arial,Verdana,Helvetica; color:#000000;}



.Style1 {font-size: 11px; COLOR: #CCBF97; font-family : Verdana;} /*texte doré*/

.Style2 {font-size: 11px; COLOR: #566160; font-family : Verdana;} /*texte orange*/

.Style3 {font-size: 12px; COLOR: #EDB868; font-weight:bold; font-family : Verdana;} /*Titre orange*/

.Style4 {font-size: 11px; COLOR: #443329; font-family : Verdana;} /*texte marron (parchemin)*/

.menu1 { font-size: 11px; COLOR: #9e790a; font-family : Verdana; text-decoration:none}


RE: Menu déroulant horizontal.. - emaia - 03-07-2008

Salut,
j'ai repris tout ton code et il me semble avoir réussi Smile :
Dans le CSS :
Code :
#sousmenu1, #sousmenu2, #sousmenu3, #sousmenu4 {
font-size: 0.7em;
border-top: 1px solid gray;
width: 100%;
display: none;
}

Dans le html (à la place de ton ancien menu), dans le div "cadre_cont_menu" :
Code :
<div style="text-align: center ">
    <div style="text-align: center "><a href=# onmouseover="montre('1')">MENU 1</a> <a href=# onmouseover="montre('2')">MENU 2</a> <a href=# onmouseover="montre('3')">MENU 3</a> <a href=# onmouseover="montre('4')">MENU 4</a></div>
    <div id="sousmenu" style="text-align:center ">
    <div id="sousmenu1">tes liens 1 ici</div>
    <div id="sousmenu2">tes liens 2 ici</div>
    <div id="sousmenu3">tes liens 3 ici</div>
    <div id="sousmenu4">tes liens 4 ici</div>
    </div>
</div>

Dans le javascript (à la place de l'ancienne fonction montre() ) :
Code :
window.onload=montre;
function montre(id) {
    for (var i = 1; i<=4; i++){
        document.getElementById("sousmenu"+i).style.display = "none";
    }
    document.getElementById("sousmenu"+id).style.display = "block";
}

Voila, en espérant que ça fonctionne Smile
Cordialement, emaia.

RE: Menu déroulant horizontal.. - emaia - 04-07-2008

Au fait, pourrais-tu me dire si ce dernier code fonctionne ? merci.
Cordialement, emaia.

RE: Menu déroulant horizontal.. - zneman - 04-07-2008

Bonsoir !
Tout d'abord, merci à toi Emaia pour ton aide =)
Je n'ai pu te le dire avant, pas là de la journée Big Grin
Je suis resté hier jusqu'à 2h du matin sur mon script et j'ai décidé de tout refaire donc en utilisant ta méthode Big Grin
Après quelques modifications/améliorations et ajout pour que ce soit compatible IE et FF, j'ai enfin réussi Big Grin

Voila donc ce que ca me donne:

http://img399.imageshack.us/img399/706/capturemagusworldv30407ag7.png

Comment trouvez vous au passage ? =) (le design n'est pas terminé là Big Grin)