Menu horizontal centré [Résolu/Fermé]

Signaler
Messages postés
2
Date d'inscription
mercredi 27 février 2013
Statut
Membre
Dernière intervention
28 février 2013
-
Messages postés
2105
Date d'inscription
samedi 28 juin 2008
Statut
Membre
Dernière intervention
26 mars 2020
-
Bonjour,

j'essaye de faire depuis quelque temps un menu centré mais je n'arrive pas à ce qu'il soit en même temps centré et horizontal.

Voici mes code:
Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>accueil</title>
<link rel="stylesheet" type="text/css" href="./design/design.css" />
</head>

<body>
<ul id="menu">
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 1</a></li>
</ul>
</body>
</html>

Css:

@charset "utf-8";
/* CSS Document */

body{
background-color:#2E1A03;
}

#menu ul li{
list-style:none;
border-top:#999 solid 1px;
display:inline;
margin: 0 auto;
float:none;
}

#menu {
list-style:none;
background-color:#2E1A03;
width:100%;
height:100px;
margin:0 auto;
}

#menu ul{

}

#menu li a {
display:block;
line-height:100px;
color:#fff;
font-size:100px;
font-weight:bold;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 20px 0 20px;
cursor:pointer;
}

#menu li a:hover {
background-color:#FF8000;
}




3 réponses

Messages postés
2105
Date d'inscription
samedi 28 juin 2008
Statut
Membre
Dernière intervention
26 mars 2020
554
Bonjour,

Si je comprends bien, tu désires que tes liens soient un à côté de l'autre horizontalement et non pas un en-dessous de l'autre?
Messages postés
2105
Date d'inscription
samedi 28 juin 2008
Statut
Membre
Dernière intervention
26 mars 2020
554
Rajoute ce que j'ai mis en gras:

#menu li a {
float:left;
width:250px;

display:block;
line-height:100px;
color:#fff;
font-size:100px;
font-weight:bold;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 20px 0 20px;
cursor:pointer;
}

Note: Tu peux modifier la valeur de 250px en fonction de la largeur que tu veux donner à chaque élément de tes liens.
Messages postés
2
Date d'inscription
mercredi 27 février 2013
Statut
Membre
Dernière intervention
28 février 2013

C'est bon grâce a toi j'ai trouvé merci :)
Messages postés
2105
Date d'inscription
samedi 28 juin 2008
Statut
Membre
Dernière intervention
26 mars 2020
554
L'as-tu rajouté au bon endroit? Car de mon côté, ça fonctionne bien sous Firefox et IE.
Messages postés
2105
Date d'inscription
samedi 28 juin 2008
Statut
Membre
Dernière intervention
26 mars 2020
554
Good! Ça fait plaisir :)