JeuWeb Créez votre jeu par navigateur !

zneman · (Modification du message : 09-07-2008, 10:44 AM par Sephi-Chan.)

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/exem...smenu3.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/...307es8.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>

thelos · 03-07-2008, 04:33 PM

#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

zneman · 03-07-2008, 04:38 PM

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

emaia · 03-07-2008, 07:28 PM

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.

zneman · 03-07-2008, 08:41 PM

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

emaia · 03-07-2008, 08:45 PM

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 ?

zneman · 03-07-2008, 08:58 PM

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/ca...307rh7.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>

emaia · 03-07-2008, 11:18 PM

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.

emaia · 04-07-2008, 02:12 PM

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

zneman · 04-07-2008, 08:27 PM

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/c...407ag7.png

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

)

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	[REGLE]Positionner un menu déroulant par défaut	Argorate	2	2 038	03-05-2009, 10:28 PM Dernier message: Argorate
	[Résolu][Javascript] Un menu déroulant	Sephi-Chan	26	10 133	27-02-2008, 11:20 PM Dernier message: Sephi-Chan
	[Résolu] Générer un menu déroulant	Cartoristal	19	7 550	25-01-2008, 11:25 AM Dernier message: appzer0
	menu amelioration de personnages [résolu]	blackduty	16	7 682	22-08-2006, 08:15 AM Dernier message: joshua