Probléme pour centrer un menu.
Résolu
yos
-
medoc13 Messages postés 65 Date d'inscription Statut Membre Dernière intervention -
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/...
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:
- Probléme pour centrer un menu.
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
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;
}
#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 ^^
sinon tu definis un margin:auto dans le css, et le tour est joué ;)
Réponse à ta question: Oui ^^
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;
Ca doit bien être possible, ça marche sur mes sites en faisant ainsi... Essayes peut etre de rajouter une largeur au menu :
width: ???px;
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ton menu est en posision:absolute
dans la ton css, ajoute ça dans #menu :
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;
}
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;
}
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>
<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>