Posez votre question Signaler

Probléme pour centrer un menu. [Résolu]

yos - Dernière réponse le 8 août 2008 à 18:05
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/...
Lire la suite 

Probléme pour centrer un menu »

14 réponses
Réponse
+0
moins plus
Rajoutes des marges automatiques ici :

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

}
Ajouter un commentaire
Réponse
+0
moins plus
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 ^^
Ajouter un commentaire
Réponse
+0
moins plus
désolé je suis débutant, je ni arrive pas.
rien ne change quan j'essai...
Ajouter un commentaire
Réponse
+0
moins plus
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;
Ajouter un commentaire
Réponse
+0
moins plus
toujour rien...
ça serai possible d'avoir des exemple de menu que je pourai utilisé?
Ajouter un commentaire
Réponse
+0
moins plus
Donne ton morceau de code pour voir
Ajouter un commentaire
Réponse
+0
moins plus
Ton menu est en posision:absolute

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

width:800px;
margin-left:-400px;
left:50%;
Ajouter un commentaire
Réponse
+0
moins plus
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;
}
Ajouter un commentaire
Réponse
+0
moins plus
le problém est résolu.
mercie a vous tous.
Ajouter un commentaire
Réponse
+0
moins plus
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 http://css.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="http://www.alsacreations.com/">Alsacréations</a><br />
<a href="http://css.alsacreations.com/...">Explications / Explanations</a>
</p>
</div>
Ajouter un commentaire
Réponse
+0
moins plus
C'est quoi le #menu .ab ?
Ajouter un commentaire
Réponse
+0
moins plus
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>
Ajouter un commentaire
Réponse
+0
moins plus
merci medoc13.
Ajouter un commentaire
Réponse
+0
moins plus
pas de probleme
Ajouter un commentaire
Ce document intitulé « probléme pour centrer un menu. » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?