Augmenter la taille des cellules dans un tableau css.

**Velkan.nexus** · 04/12/2007, 10h03

Bonjour à tous,

Je suis en train de finaliser mon premier petit menu css, et je me trouve face à un problème.

Le centrage de mon texte dans mes cellules est parfait mais ce que je n'arrive pas à faire est centrer les cellules verticalement et horizontalement dans le tableau.

Je dépose le code source ci-dessous :

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
62
 
<style type="text/css">
<!-- 
#conteneur_menu_principal {
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#353028;
text-align:center;
vertical-align:middle;
border:1px solid red;
width:1076px;
height:30px;
display:table;
}
 
ul {
margin:0px 0px;
padding:0px;
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#353028;
text-align:center;
vertical-align:middle;
}
 
li {
display:inline;
}
 
li a {
font-family:"Times New Roman", Times, serif;
font-size:12px;
height:30px;
color:#353028;
text-align:center;
vertical-align:middle;
border:1px solid #660000;
margin:3px 3px;
padding:7px;
}
 
li a:hover, li a:focus {
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#a24437;
text-align:center;
vertical-align:middle;
text-decoration:underline;
background-image:url(images/images_et_fonds/image.png);
}
-->
</style>
 
</head>
 
<body>
 
<div id="conteneur_menu_principal">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>

Je vous remercie de bien vouloir être critique sur mon code car j'ai certainement placer quelques balises proablement obsolètes sans m'en rendre compte.

Vous remerçiant par avance.

Velkan.

**Velkan.nexus** · 04/12/2007, 10h58

Re-bonjour,

Je viens d'avoir une petite idée !!!

Au lieu de centrer verticalement les cellules dans le tableau, je pourais tout simplement augmenter la hauteur des cellules et l'égalée à celle du tableau, par conséquent, le texte déjà centré verticalement seras correctement placé !!!

Seul problème, c'est que j'ai beau modifier mes hauteurs de cellules, cela ne change rien, elle ne grandissent pas en hauteur.

Je vous remercie pour vos multiples suggestions.

Velkan.

**BnA** · 04/12/2007, 11h40

Salut!

Envoyé par Velkan.nexus

les cellules dans le tableau

Et ton tableau, il est où??

**MasterOfChakhaL** · 04/12/2007, 11h50

Envoyé par BnA

Et ton tableau, il est où??

Il est dans le display: table.
Cela dit, je ne suis pas sur que cette propriété soit bien implémentée (surtout IE)
Dans ce cas, le vertical-align ne peut plus fonctionner (car spécifique aux tableaux).

Si tes items ne contiennent qu'une ligne de texte, tu peux fixer le line-height à la hauteur voulue, ton texte sera alors centré verticalement.
Sinon, tu peux appliquer un padding-top et padding-bottom, par contre là, tu ne peux plus garantir que tout tes items aient la même hauteur...

**Velkan.nexus** · 04/12/2007, 12h44

Bonjour à tous,

Tout d'abord merci pour vos réponses, je viens de réorganiser ma feuille de style css et indiqué les hauteurs pour le tableau et ses cellules.

Le problème n'est plus le centrage horizontal mais verticale.

Je dépose le code modifié ci-dessous :

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
62
63
 
<style type="text/css">
<!-- 
#conteneur_menu_principal {
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#353028;
text-align:center;
vertical-align:middle;
margin:0px;
padding:0px;
height:30px;
width:1076px;
display:table;
}
 
ul {
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#353028;
text-align:center;
vertical-align:middle;
margin:0px;
padding:0px;
height:30px;
width:1076px;
}
 
li {
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#353028;
text-align:center;
vertical-align:middle;
height:30px;
margin:0px;
padding:0px;
display:inline;
}
 
li a {
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#353028;
text-align:center;
vertical-align:middle;
height:30px;
display:inline;
border:1px solid #660000;
}
 
li a:hover, li a:focus {
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#a24437;
text-align:center;
vertical-align:middle;
height:30px;
text-decoration:underline;
background-image:url(images/images_et_fonds/menu_principal.png);
}
-->
</style>

Au niveau de l'affichage dans mon navigateur, les bordures du "#conteneur_menu_principal" ont la bonne hauteur, en revanche les hauteurs des cellules ne respectent pas les 30px.

Comment puis-je m'y prendre pour augmenter la hauteur de ces cellules (height est bien spécifié mais pas appliqué) ?

Une fois les cellules à la bonne hauteur, le texte devrais ce centrer horizontalement et verticalement automatiquement puisque ses attribus sont spécifiés.

Merci pour toutes vos suggestions.

Velkan.

Augmenter la taille des cellules dans un tableau css.

Tableau en CSS

Discussions similaires

Partager

Partager