Centrer une div dans un li

Version imprimable

salut j'ai cherche une façon de centrer une div dans une li, j'ai essayé le "align: center; " mais cela n'a pas marché.( du coté centrer une div dans une autre div cela marche). voila mon code html et css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head><link rel="stylesheet" type="text/css" href="css/menu.css"></head>
<body>
 <table>
  <tr>
   <td>
<ul id="tabnav">
<li >
<div>blabla</div>
</li>
</ul>
   </td>
  </tr>
 </table>
</body></html>

code css:

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
 
ul#tabnav {
    font: bold 16px verdana, arial, sans-serif;
    list-style-type: none;
    padding-bottom: 24px;
    border-bottom: 1px solid #6c6;
    margin: 0;
}
 
ul#tabnav li {
    float: left;
    height: 21px;
	WIDTH:190px;
    background-color: #00FFFF;
    margin: 2px 2px 0 2px;
   /* border: 1px solid #6c6;*/
 
-moz-border-bottom-colors: #FFFFFF  #00CCCC  #00FFFF;
-moz-border-top-colors: #FFFFFF  #00CCCC  #00FFFF;
-moz-border-left-colors: #FFFFFF  #00CCCC  #00FFFF;
-moz-border-right-colors:#FFFFFF  #00CCCC  #00FFFF;
}
 
 
ul#tabnav li.active {
    border-bottom: 1px solid #fff;
    background-color: #FFFF99;
	color:#FF0000;
}
 
#tabnav div {
	align: center;
    float: left;
    display: block;
    color: #666;
    text-decoration: none;
    padding: 4px;
}
 
#tabnav div:hover {
background-color:#00CCCC;
}
 
#tabnav li {
 
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
}

11/03/2009, 20h55
Alt157
Bonsoir,

Je ne comprends déjà pas quelque chose dans ton code tu dis que <li> est inline dans ton css et dedans tu lui mets un block... ?

De plus le :hover sur un div passe sur Firefox mais pas sur IE.

sinon si tu veux centrer une div tu n'as qu'a faire :
Code:

1 2 3 4 5 6 7 8 9 10 11 #tabnav div { align: center; display: block; color: #666; text-decoration: none; margin: auto; left: 50%; width: LARGEURpx; }
J espere avoir bien compris la question...
12/03/2009, 10h24
Poulpynette

Il me semble qu'en CSS c'est "text-align: center;" et non "align" tout court.
12/03/2009, 17h08
keskidi
Citation:
Envoyé par Alt157

Bonsoir,

Je ne comprends déjà pas quelque chose dans ton code tu dis que <li> est inline dans ton css et dedans tu lui mets un block... ?

De plus le :hover sur un div passe sur Firefox mais pas sur IE.

sinon si tu veux centrer une div tu n'as qu'a faire :

Code:

1 2 3 4 5 6 7 8 9 10 11 #tabnav div { align: center; display: block; color: #666; text-decoration: none; margin: auto; left: 50%; width: LARGEURpx; }

J espere avoir bien compris la question...
Remarque, ça peut se faire aussi
Code:

1 2 3 ul#tabnav li { display: block; . . .
12/03/2009, 18h18
Alt157

Bonjour,

oui Poulpynette, désolé pour l'erreur j'ai fait un copier coller de son code en ajoutant simplement les lignes et j'avais pas vu le align :center ; :oops:

Maintenant que je regarde je précise également que cela ne coute pas grand chose d'ajouter trois 6 à la ligne : color: #666; ce qui permet que cela s'affiche bien sur tous les navigateurs ( jamais testé mais parait que sur certains cela ne passe pas toujours bien bien )
12/03/2009, 19h58
baouk2000

centrer une div ds une li

salut merci pour votre aide, j'ai pu resoudre le probleme en mettant au lieu de "align: center", la commande "float: center".
12/03/2009, 20h02
Alt157

Bonsoir,

float: center 8O

Cela n'existe pas normalement....
12/03/2009, 22h30
Macmillenium
Bonsoir,
Citation:
Envoyé par Alt157

Code:

1 2 3 4 5 #tabnav div { left: 50%; }
Petite remarque au passage, la propriété left ne peut s'appliquer qu'aux éléments positionnés (relative, absolute, fixed et static) ;)
13/03/2009, 09h34
Poulpynette

Citation:

Envoyé par Alt157

Maintenant que je regarde je précise également que cela ne coute pas grand chose d'ajouter trois 6 à la ligne : color: #666; ce qui permet que cela s'affiche bien sur tous les navigateurs ( jamais testé mais parait que sur certains cela ne passe pas toujours bien bien )

Alors là j'apprends un truc 8O
Je n'ai jamais eu de problèmes avec la notation à 3 caractères ...

Zut alors !
13/03/2009, 10h52
HiRoN

Citation:

Envoyé par Poulpynette

Citation:

Envoyé par Alt157 :
Maintenant que je regarde je précise également que cela ne coute pas grand chose d'ajouter trois 6 à la ligne : color: #666; ce qui permet que cela s'affiche bien sur tous les navigateurs ( jamais testé mais parait que sur certains cela ne passe pas toujours bien bien )

Alors là j'apprends un truc 8O
Je n'ai jamais eu de problèmes avec la notation à 3 caractères ...

Zut alors !

C'est aussi la première fois que j'entends cela.
Un lien pour argumenter ?
16/03/2009, 19h18
Alt157

Bonsoir à tous,

Désolé de remonter ce topic pour ce que j'ai à dire... Mais cela fait quelques jours que je ne suis pas venu sur le forum :roll:

J'avais lu cette histoire sur le net, comme quoi cela pouvait poser des problèmes sur de vieux navigateurs donc j'ai pris l'habitude de mettre les 6 mais je n'ai jamais testé... Donc voilà... c'était surement un fake et cela fait plus de deux ans que je fais gaffe à cela pour rien lol Désolé tout le monde pour cette mauvaise information. :oops:

Cordialement