Centrer un menu
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Centrer un menu
Bonjour,
phpbb2
http://funnycraft.forumpro.fr
bonjour, je suis sur le pion de crée une page html. Et voila mon problème, en ajoutant mon menu. Je voudrait que mon menu se trouve au centre de la page, je n'y arrive pas voila mon code et le lien de la page.
lien: http://funnycraft.forumpro.fr/h5-page-d-accueil
Merci, pour votre aide.
phpbb2
http://funnycraft.forumpro.fr
bonjour, je suis sur le pion de crée une page html. Et voila mon problème, en ajoutant mon menu. Je voudrait que mon menu se trouve au centre de la page, je n'y arrive pas voila mon code et le lien de la page.
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
/* menu */
ul#menu0
{
top: 0px;
margin:0;
padding:0;
list-style-type:none;
width:650px;
position:fixed;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background-color: black;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
border-radius: 0px 0px 15px 15px;
}
ul#menu0 li
{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu0 li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}
ul#menu0 li a:hover
{
color: red;
height:22px;
}
ul#menu0 li a.current
{
display:inline;
height:22px;
float:left;
margin:0;
}
</style>
<title>Funnycraft- Accueil </title>
</head>
<body><div><center>
<ul id='menu0'>
<li class="button"><a class='current' href='http://funnycraft.forumpro.fr/' >Accueil</a></li>
<li class="button"><a href='http://funnycraft.forumpro.fr/forum' >Forum</a></li>
<li class="button"><a href='#' >Commande</a></li>
<li class="button"><a href='#' >Dynmap</a></li>
<li class="button"><a href='http://funnycraft.forumpro.fr/?pid=5' >Team Speak 3</a></li>
<li class="button"><a href='http://funnycraft.forumpro.fr/h4-dons' >Dons</a></li>
<li class="button"><a href='#Prochainement disponible'>Contact</a></li>
</ul></center>
</div>
<div class="Accueil">
</div>
</body>
</html>
lien: http://funnycraft.forumpro.fr/h5-page-d-accueil
Merci, pour votre aide.
Dernière édition par mimi-76- le Sam 28 Avr 2012 - 16:46, édité 1 fois
Re: Centrer un menu
Bonjour,
pour avoir le menu centré dans la page, vous devez enlever la position fixed de votre menu et mettre des marges automatiques. Vous aurez donc ceci :
Et vous pouvez retirer la balises center dans votre html
pour avoir le menu centré dans la page, vous devez enlever la position fixed de votre menu et mettre des marges automatiques. Vous aurez donc ceci :
- Code:
ul#menu0
{
top: 0px;
margin:auto;
padding:0;
list-style-type:none;
width:650px;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background-color: black;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
border-radius: 0px 0px 15px 15px;
}
Et vous pouvez retirer la balises center dans votre html
Re: Centrer un menu
Bonjour, je voudrait que mon menu soit coller en haut du navigateur.
Re: Centrer un menu
Ok donc si tu souhaites garder la position fixe de ton menu, la solution à laquelle je pense est celle-ci :
- Code:
ul#menu0
{
top: 0px;
margin:0 -325px; /* on applique une marge négative de la moitié de la largeur du menu*/
left:50%; /* on positionne le menu à la moitié de l'écran */
padding:0;
position:fixed;
list-style-type:none;
width:650px;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background-color: black;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
border-radius: 0px 0px 15px 15px;
}
Re: Centrer un menu
Merci, sa fonctionne actuellement.
Sujets similaires
» centrer le menu
» centrer mon menu
» Centrer le menu
» Centrer le menu
» Faire un sous menu sur un bouton menu
» centrer mon menu
» Centrer le menu
» Centrer le menu
» Faire un sous menu sur un bouton menu
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum