Comment maîtriser mon menu css correctement ?

**Velkan.nexus** · 30/11/2007, 09h48

Bonjour à tous,

Je suis en pleine création de mon menu principal en css (c'est mon premier lol

), le problème c'est que j'arrive pas à le maîtriser !!!.

Ce menu est apellé dans une pseudo-frame et je souhaiterais donc le centrer horizontalement et verticalement. Mais lui il ne veut pas !!!.

Je vous remercie pour votre aide et vous dépose le code ci-dessous.

Velkan.

Code :

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
 
<style type="text/css">
<!--
ul {
margin:0;
padding:0;
font:"Times New Roman", Times, serif;
vertical-align:middle;
}
 
li {
float:left;
}
 
li a {
display:block;
width:auto;
height:auto;
border:1px solid #660000;
color:#000099;
margin:0 3px;
padding:3px;
text-decoration:none;
text-align:center;
}
 
li a:hover, li a:focus {
color:#660000;
background-image:url(images/images_et_fonds/image.png);
}
-->
</style>
</head>
<body>
<ul>
<li><a href="lien_1">Lien 1</a></li>
<li><a href="lien_2">Lien 2</a></li>
<li><a href="lien_3">Lien 3</a></li>
<li><a href="lien_4">Lien 4</a></li>
<li><a href="lien_5">Lien 5</a></li>
<li><a href="lien_6">Lien 6</a></li>
</ul>

**Velkan.nexus** · 01/12/2007, 06h04

Bonjour à tous,

N'ayant pas de réponses après une vingtaine de visualisations, je je demande si mon message est clair est compréhenssible.

Dois-je le reformuler ?

Velkan.

**MasterOfChakhaL** · 01/12/2007, 09h22

Salut,

Qu'est-ce que tu entends par pseudo-frame ? ta page finale est constituée de plusieurs fichier que tu inclus ?
Centrer verticalement et horizontalement... Ok, mais par rapport à quoi ?

Pour le centrage horizontal, il n'y a pas vraiment de difficulté ( cf. FAQ CSS)
En ce qui concerne le centrage vertical, c'est un peu plus compliqué. Par exemple, si tu maitrises la hauteur de l'élément à centrer ainsi que du conteneur, c'est beacoup plus simple que si tu ne peux présumer de ces valeurs...

Le plus simple serait que tu fournissent un lien où nous pourrions observer en live ton problème...

**oblik** · 01/12/2007, 13h55

Tu met un div conteneur centré et tu met les li en display:inline;

Code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>Test</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<style type="text/css">
 
 
<!--
 
#conteneur {
text-align:center;
border:1Px solid red;
display:table;
width:600px;
margin:0 auto;
}
 
 
ul {
margin:0 auto;
padding:0;
font:"Times New Roman", Times, serif;
vertical-align:middle;
}
 
li {
display:inline;
}
 
li a {
width:100px;
height:auto;
border:1px solid #660000;
color:#000099;
margin:0 3px;
padding:3px;
text-decoration:none;
text-align:center;
}
 
li a:hover, li a:focus {
color:#660000;
background-image:url(images/images_et_fonds/image.png);
}
-->
</style>
</head>
<body>
<div id="conteneur">
<ul>
<li><a href="lien_1">Lien 1</a></li>
<li><a href="lien_2">Lien 2</a></li>
<li><a href="lien_3">Lien 3</a></li>
<li><a href="lien_4">Lien 4</a></li>
<li><a href="lien_5">Lien 5</a></li>
<li><a href="lien_6">Lien 6</a></li>
</ul>
</div>
</body>
</html>

**Velkan.nexus** · 01/12/2007, 20h32

Bonsoir à tous,

Petit message pour vous remerciez de votre aide mais aussi pour vous indiquer que ce petit menu fonctionne à présent à merveille.

Encore merci et bonne continuation.

Velkan.

Comment maîtriser mon menu css correctement ?

CSS

Discussions similaires

Partager

Partager