Centrer une div dans un li

**baouk2000** · 11/03/2009, 20h41

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 :

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

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 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
 
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;
}

**Alt157** · 11/03/2009, 20h55

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 :

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

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

**Poulpynette** · 12/03/2009, 10h24

Il me semble qu'en CSS c'est "text-align: center;" et non "align" tout court.

**keskidi** · 12/03/2009, 17h08

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 :

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

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 :

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

1
2
3
ul#tabnav li {
    display: block;
 . . .

**Alt157** · 12/03/2009, 18h18

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 ;

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 )

**baouk2000** · 12/03/2009, 19h58

salut merci pour votre aide, j'ai pu resoudre le probleme en mettant au lieu de "align: center", la commande "float: center".

**Alt157** · 12/03/2009, 20h02

Bonsoir,

float: center

Cela n'existe pas normalement....

**Macmillenium** · 12/03/2009, 22h30

Bonsoir,

Envoyé par Alt157

Code :

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

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)

**Poulpynette** · 13/03/2009, 09h34

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

Je n'ai jamais eu de problèmes avec la notation à 3 caractères ...

Zut alors !

**HiRoN** · 13/03/2009, 10h52

Envoyé par Poulpynette

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

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 ?

**Alt157** · 16/03/2009, 19h18

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

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.

Cordialement

Centrer une div dans un li

HTML

Discussions similaires

Partager

Partager