Menu horizontal centré

Résolu/Fermé

wipsy96 Messages postés 2 Date d'inscription mercredi 27 février 2013 Statut Membre Dernière intervention 28 février 2013 - 27 févr. 2013 à 21:41
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 - 28 févr. 2013 à 21:35

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;
}

A voir également:

Center horizontal css
Control center 4 - Télécharger - Divers Utilitaires
Copytrans control center - Télécharger - Divers Utilitaires
Catalyst control center - Télécharger - Pilotes & Matériel
Family center - Guide
Catalyst control center launcher ✓ - Forum Logiciels

3 réponses

Réponse 1 / 3

GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
27 févr. 2013 à 22:35

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?

Réponse 2 / 3

GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
Modifié par GrifOli le 27/02/2013 à 23:13

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.

Réponse 3 / 3

wipsy96 Messages postés 2 Date d'inscription mercredi 27 février 2013 Statut Membre Dernière intervention 28 février 2013
Modifié par wipsy96 le 28/02/2013 à 21:32

C'est bon grâce a toi j'ai trouvé merci :)

GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
28 févr. 2013 à 21:31

L'as-tu rajouté au bon endroit? Car de mon côté, ça fonctionne bien sous Firefox et IE.

GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
28 févr. 2013 à 21:35

Good! Ça fait plaisir :)

Discussions similaires

A quoi sert ETDctrl ? Peut-on le supprimer ?

trait horizontal avec du css

ETD Control Helper dans System32 - Dois-je le supprimer ?

CodeMeter Runtime c'est quoi????

Soulager Windows au Demarrage