Bonjour,
Je me suis servi du menu déroulant du tutoriel alsacreation:
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
Mais je le voudrais centrer, pour l'instant la seule méhtode que j'ai trouvé pour le centrer est de lui donner toute la largeur du corps du site (largeur fixe de 800 px).
Etant donné qu'il n'y a que 4 boutons dans ce menu, leur largeur est bcp importante.
Quelqu'un verrait une façon de resserer tout cela ?
Voici les portions de code concernée:
html:
CSS:
Merci d'avance, je continue de chercher de mon coté
Modifié par xis (11 Oct 2007 - 16:25)
Je me suis servi du menu déroulant du tutoriel alsacreation:
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
Mais je le voudrais centrer, pour l'instant la seule méhtode que j'ai trouvé pour le centrer est de lui donner toute la largeur du corps du site (largeur fixe de 800 px).
Etant donné qu'il n'y a que 4 boutons dans ce menu, leur largeur est bcp importante.
Quelqu'un verrait une façon de resserer tout cela ?
Voici les portions de code concernée:
html:
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="">Menu 2</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
[...]
CSS:
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
[...]
Merci d'avance, je continue de chercher de mon coté
Modifié par xis (11 Oct 2007 - 16:25)