Probléme pour centrer un menu.

Résolu
yos -  
medoc13 Messages postés 65 Date d'inscription   Statut Membre Dernière intervention   -
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/...
A voir également:

14 réponses

biguiz Messages postés 201 Date d'inscription   Statut Membre Dernière intervention   35
 
Rajoutes des marges automatiques ici :

#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
margin-left:auto;
margin-right:auto;

}
0
xxkirastarothxx Messages postés 380 Date d'inscription   Statut Membre Dernière intervention   40
 
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 ^^
0
yos
 
désolé je suis débutant, je ni arrive pas.
rien ne change quan j'essai...
0
biguiz Messages postés 201 Date d'inscription   Statut Membre Dernière intervention   35
 
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;
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
yos
 
toujour rien...
ça serai possible d'avoir des exemple de menu que je pourai utilisé?
0
Yorundr Messages postés 289 Date d'inscription   Statut Membre Dernière intervention   44
 
Donne ton morceau de code pour voir
0
petinouv Messages postés 662 Date d'inscription   Statut Membre Dernière intervention   82
 
Ton menu est en posision:absolute

dans la ton css, ajoute ça dans #menu :

width:800px;
margin-left:-400px;
left:50%;
0
biguiz Messages postés 201 Date d'inscription   Statut Membre Dernière intervention   35
 
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;
}
0
yos
 
le problém est résolu.
mercie a vous tous.
0
medoc13 Messages postés 65 Date d'inscription   Statut Membre Dernière intervention   21
 
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>
0
biguiz Messages postés 201 Date d'inscription   Statut Membre Dernière intervention   35
 
C'est quoi le #menu .ab ?
0
medoc13 Messages postés 65 Date d'inscription   Statut Membre Dernière intervention   21
 
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>
0
yos
 
merci medoc13.
0
medoc13 Messages postés 65 Date d'inscription   Statut Membre Dernière intervention   21
 
pas de probleme
0