Discussion :

[prgasp77]

Bonjour à tous,
Mon souhait est de centrer le menu déroulant de cette page http://eternity.lpo.free.fr/site_xhtml/ dont voici la feuille de style http://eternity.lpo.free.fr/site_xhtml/style/menus.css.

Le code xhtml du menu est celui-ci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
      <div id="menu">
      <dl>
         <dt onmouseover="montre('smenu1');"><a href="/site_xhtml/index.php?js=no">Menu 1</a></dt>
            <dd id="smenu1">
 
               <ul>
                  <li><a href="/site_xhtml/index.php#1.1">Sous-Menu 1.1</a></li>
                  <li><a href="/site_xhtml/index.php#1.2">Sous-Menu 1.2</a></li>
                  <li><a href="/site_xhtml/index.php#1.3">Sous-Menu 1.3</a></li>
                  <li><a href="/site_xhtml/index.php#1.4">Sous-Menu 1.4</a></li>
                  <li><a href="/site_xhtml/index.php#1.5">Sous-Menu 1.5</a></li>
 
               </ul>
            </dd>
      </dl>
      <dl>
         <dt onmouseover="montre();"><a href="/site_xhtml/index.php#2">Menu 2</a></dt>
      </dl>
      <dl>
         <dt onmouseover="montre('smenu2');"><a href="/site_xhtml/index.php?js=no">Menu 3</a></dt>
 
            <dd id="smenu2">
               <ul>
                  <li><a href="/site_xhtml/index.php#3.1">Sous-Menu 3.1</a></li>
                  <li><a href="/site_xhtml/index.php#3.2">Sous-Menu 3.2</a></li>
                  <li><a href="/site_xhtml/index.php#3.3">Sous-Menu 3.3</a></li>
               </ul>
            </dd>
 
      </dl>
 
      </div>

Pour l'instant, j'ai tenté un text-align: center sur #menu, j'ai aussi tenté de mettre #menu dans un autre div, mais il en "sort" (à cause du float: left de menu surement).

Je m'en remet donc à vous en éspérant que vous saurez trouver une solution. Merci de votre aide.

[gibigue]

Etant donné que ton menu est en position absolue, tu peux utiliser un centrage avec les marge negatives.

Ton code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#menu {
   position: absolute;
   top: 450px;
   z-index:100;
   margin-left: auto;
   margin-right: auto;
}

A remplacer par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
#menu {
   position: absolute;
   top: 450px;
   z-index:100;
/* modifications */
   left: 50%;
   margin-left: -9em; /* voir explication */
}

Le margin-left: -9em; s'explique par le fait que tu as 3 dl de 6em donc un #menu qui fait une largeur de 18em. On divise 18 par 2 pour centrer le menu.

[prgasp77]

Merci.