Centrer les li (inline) à l'interieur d'une ul (barre navigation)

coldragon · 25/02/2011, 00h17

Bonjour a tous,
Je debute en css et j'ai suivis le tutoriel suivant : Transformer une liste en barre de navigation (Resultat du tutoriel) et j'aimerais centrer toute la partie "li" inclus dans les ul d'ID "nav", de façon a obtenir les menu au millieu de la ligne foncé. J'ai essayer en ajoutant la propriété margin:auto a #nav li et cela na pas fonctionné, est-ce-du au fait que ce soit une "inline" ? (Suite au changement pour les aligner (display: inline)).

Edit : Ou ne devrais-je pas les placer dans une div (a l'interieur de <ul>) et centrer cette div avec le margin ? Je vais essayer
Edit2 : Bah nan sa marche pas

Et j'ai essayer position: absolute + top:auto ou left:auto et rien a faire

)
Cordialement Coldragon et merci d'avance

ornitho13 · 25/02/2011, 09h21

Salut,

tu as 2 solutions :
- soit tu utilises comme tu voulais faire la position absolue avec top et left à 50% et margin-left et margin-top égalant une valeur négative équivalent à la moitié de la largeur et de la hauteur de ton élément à centrer ( voir cette discussion : Centrage d'un DIV imbriqué)
- soit tu rajoutes un peu de padding-top au conteneur de ton élément à centrer

coldragon · 26/02/2011, 15h32

Merci

J'ai essayer et pas vraiment reussis après j'ai peux être pas été assés précis sur ce que je voulait obtenir, alors j'ai fait un magnifique montage paint (:3) pour illustrer ce que j'aimerais rendre. Ou alors j'ai pas reussis avec vos indications, je vais réésayer.

Et merci encore

Cordialement Coldragon

ornitho13 · 26/02/2011, 21h53

Peux tu donner ton code HTML et CSS ?

coldragon · 26/02/2011, 23h24

Voici mon code css et au cas ou le html ^^

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
#nav
{
    text-align:center;
    margin:0;
    padding:0;
    background: #3265ff;
    float:left;
    width:100%;
    border: 1px solid #42432d;
    border-width: 1px 0;
}
 
#nav li
{
    display: inline;
    padding:0;
}
 
#nav a:link, #nav a:visited
{
    float:left;
    color: #000;
    background-color: #b3a340;
    padding:20px 40px 10px 20px;
    width:auto;
    border-right: 1px solid #23684d;
    text-decoration: none;
    font: bold 1em/1em Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    text-shadow: 2px 2px 2px #555;
 
}
 
#nav li:first-child a
{
    border-left: 1px solid #42432d;
}
 
#nav a:hover
{
    color:#fff;
    background:#6463a4;
}
 
#nav a:active 
{
   background:#e35a00;
   color:#fff;
}
 
#home #nav-home a:hover, #about #nav-about a:hover, #archive #nav-archive a:hover, 
#lab #nav-lab a:hover, #reviews #nav-reviews a:hover, #contact #nav-contact a:hover 
{
  background:#a12b22;
}
 
#home #nav-home a, #about #nav-about a, #archive #nav-archive a, #lab #nav-lab a, 
#reviews #nav-reviews a, #contact #nav-contact a 
{
  background:#a91b51;
  color:#fff;
  text-shadow:none;
}
 
#header
{
    background-color: #493d6f;
    width: auto;
    height: 150px;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title></title>
    <link  rel="stylesheet" href="style.css">
</head>
<body id="home">
    <div id="header">
 
    </div>
    <ul id="nav">
        <li id="nav-home"><a href="#">Accueil</a></li>
        <li id="nav-about"><a href="#">A propos</a></li>
        <li id="nav-archive"><a href="#">Archives</a></li>
        <li id="nav-lav"><a href="#">Laboratoire</a></li>
        <li id="nav-reviews"><a href="#">Critiques</a></li>
        <li id="nav-contact"><a href="#">Contact</a></li>
    </ul>
</body>
</html>

Merci encore =)

ornitho13 · 26/02/2011, 23h45

Si tu veux centrer ton menu, il faut lui spécifier une largeur et utiliser le margin, exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
#nav
{
   text-align:center;
   margin:0px auto;
   padding:0;
   background: #3265ff;
   border: 1px solid #42432d;
   border-width: 1px 0;
   width:900px;
}

coldragon · 26/02/2011, 23h58

Merci cela fonctionne ! =)

Edit : Par contre je n'arrive plus a avoir le fond :s et le border dépasse, n'y aurait t'il pas autre chose a faire ?

25/02/2011, 00h17	#1
coldragon Invité de passage Inscription : février 2011 Messages : 4 Détails du profil Informations forums : Inscription : février 2011 Messages : 4 Points : 0 Points : 0	Centrer les li (inline) à l'interieur d'une ul (barre navigation) Bonjour a tous, Je debute en css et j'ai suivis le tutoriel suivant : Transformer une liste en barre de navigation (Resultat du tutoriel) et j'aimerais centrer toute la partie "li" inclus dans les ul d'ID "nav", de façon a obtenir les menu au millieu de la ligne foncé. J'ai essayer en ajoutant la propriété margin:auto a #nav li et cela na pas fonctionné, est-ce-du au fait que ce soit une "inline" ? (Suite au changement pour les aligner (display: inline)). Edit : Ou ne devrais-je pas les placer dans une div (a l'interieur de <ul>) et centrer cette div avec le margin ? Je vais essayer Edit2 : Bah nan sa marche pas Et j'ai essayer position: absolute + top:auto ou left:auto et rien a faire ) Cordialement Coldragon et merci d'avance
	00

25/02/2011, 09h21	#2
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Salut, tu as 2 solutions : - soit tu utilises comme tu voulais faire la position absolue avec top et left à 50% et margin-left et margin-top égalant une valeur négative équivalent à la moitié de la largeur et de la hauteur de ton élément à centrer ( voir cette discussion : Centrage d'un DIV imbriqué) - soit tu rajoutes un peu de padding-top au conteneur de ton élément à centrer
	10

26/02/2011, 21h53	#4
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Peux tu donner ton code HTML et CSS ?
	00

26/02/2011, 23h58	#7
coldragon Invité de passage Inscription : février 2011 Messages : 4 Détails du profil Informations forums : Inscription : février 2011 Messages : 4 Points : 0 Points : 0	Merci cela fonctionne ! =) Edit : Par contre je n'arrive plus a avoir le fond :s et le border dépasse, n'y aurait t'il pas autre chose a faire ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email