Probléme pour centrer un menu.
Résolu
Bonjour, a tous
je voudrai savoir s'il serai possible de centre le menu déroulant de la page si dessou?
http://radservebeer.free.fr/...
je voudrai savoir s'il serai possible de centre le menu déroulant de la page si dessou?
http://radservebeer.free.fr/...
Configuration: Windows XP Internet Explorer 7.0
14 réponses
-
Rajoutes des marges automatiques ici :
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
margin-left:auto;
margin-right:auto;
} -
tu met tout entre balise <center> ton code </center>
sinon tu definis un margin:auto dans le css, et le tour est joué ;)
Réponse à ta question: Oui ^^ -
désolé je suis débutant, je ni arrive pas.
rien ne change quan j'essai... -
J'ai reessayé et effectivement ça ne marche pas, alors que ça devrait...
Ca doit bien être possible, ça marche sur mes sites en faisant ainsi... Essayes peut etre de rajouter une largeur au menu :
width: ???px; -
toujour rien...
ça serai possible d'avoir des exemple de menu que je pourai utilisé? -
Donne ton morceau de code pour voir
-
Ton menu est en posision:absolute
dans la ton css, ajoute ça dans #menu :
width:800px; margin-left:-400px; left:50%;
-
Si si finalement ça marche bien chez moi !
Dans le code css "menu" de la page, effaces et remplaces par ça :
#menu {
margin-left:auto;
margin-right:auto;
top: 0;
left: 0;
z-index:100;
width: 800px;
} -
le problém est résolu.
mercie a vous tous. -
bon je sais pas si ça va t'aider mais je te met les css avec une petite modif
<style type="text/css">
<!--
/* CSS issu des tutoriels https://www.alsacreations.com/ */
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 {
margin: 0px auto;
width: 790px;
height: 20px;
}
#menu .ab {
position: absolute;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
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;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
margin: 20px auto;
color: #000;
background-color: #ddd;
border: 1px solid gray;
text-align: center;
}
#site a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
ainsi qu'une partie du html
<div id="menu">
<div class="ab">
<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" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<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>
<li>
<a href="#">Sous-Menu 1.4</a></li>
<li>
<a href="#">Sous-Menu 1.5</a></li>
<li>
<a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">
Menu 2
</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li>
<a href="#">Sous-Menu 2.1</a></li>
<li>
<a href="#">Sous-Menu 2.2</a></li>
<li>
<a href="#">Sous-Menu 2.3</a></li>
<li>
<a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">
Menu 3
</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<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="javascript:montre('smenu4');">
Menu 4
</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<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>
<div id="site">
<ul>
<li><a href="../../../index.html">Back</a></li>
</ul>
<h1>Menu horizontal déroulant en CSS</h1>
<p>
Testé sous (tested under) Internet Explorer, Netscape, Mozilla, Opera et Firebird
</p>
<p>
Il vous suffit d'adapter le code source de cette page à vos besoins.
</p>
<p>
Raphaël GOETTER<br />
<a href="https://www.alsacreations.com/">Alsacréations</a><br />
<a href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Explications / Explanations</a>
</p>
</div> -
C'est quoi le #menu .ab ?
-
c'est la class d'un div que j'ai rajouté; reprend le code que j'ai collé et remplace celui que tu as la partie css, etpourle html met le entre les balise <body> html </body>
-
merci medoc13.
-
pas de probleme