Comment maîtriser mon menu css correctement ?

Version imprimable

Bonjour à tous,

Je suis en pleine création de mon menu principal en css (c'est mon premier lol :D), 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:

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">  </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>

01/12/2007, 06h04
Velkan.nexus

Personne n'a un petite idée ?

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.
01/12/2007, 09h22
MasterOfChakhaL

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...

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

Code:

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>

01/12/2007, 20h32
Velkan.nexus

Remerciements

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. :D