Page 1 sur 1

Probleme affichage UL LI menu sur opera et firefox.

Posté : 28 déc. 2008, 11:22
par the_grinch
Salut,
Voila mon code css :

Code : Tout sélectionner

#menu_haut { width:850px; height:20px; background-color: #3A3A3A; margin-left:auto; margin-right:auto; border-left: solid #01A9C6 4px; border-right: solid #01A9C6 4px; border-bottom: solid #01A9C6 4px; border-top: solid #01A9C6 3px; } #menu_haut ul { padding: auto; color: #FFF; line-height: 20px; white-space: nowrap; text-align: center; padding-bottom: 10px; } #menu_haut li { list-style-type: none; display: inline; float: left; } #menu_haut a { width:141.7px; height:20px; font-family: "Comic sans ms"; background-color:#3A3A3A; color:#FFF; text-decoration:none; display:block; text-align: center; line-height: 20px; } #menu_haut a:hover { width:141.7px; height:20px; color:#000; text-decoration:underline; background-color: #01D7FB; display:block; text-align: center; line-height: 20px; }
HTML :

Code : Tout sélectionner

<ul id="menu_haut"> <li><a href="index.php">Accueil</a></li> <li><a href="index.php?page=dl">Downloads</a></li> <li><a href="index.php?page=list_serv">Nos serveurs</a></li> <li><a href="index.php?page=tutos">Le&ccedil;ons</a></li> <li><a href="index.php?page=team">La team</a></li> <li><a href="index.php?page=pub">Pub</a></li> </ul>
Or voilà ce que ça fait :
Mince, inversé firefox et opéra sur l'image =), c'est opéra qui me laisse du gris a droite.
Image


Donc j'ai l'impression que Opéra affiche le tout en plus petit et ne respecte pas les tailles des blocks.
J'ai d'abord pensé que c'était un problème de taille de texte mais en fait nan pas du tout.

Merci !

Posté : 28 déc. 2008, 13:12
par Hywan
Hey :),

Comme ça, en lisant ton code en diagonale, je penserais à une interprétation différente des arrondis dans Presto et Gecko (d'ailleurs, on dit Opera et pas Opéra).
Tu utilises des pixels flottants : 141.7px. Essaye d'arriver à des entiers pour voir (142px par exemple).

Édition : au passage, remet les marges et les pas des balises <li> à 0 (une sorte de reset local).

Posté : 28 déc. 2008, 16:18
par Invité
Merci pour ta réponse, en mettant 142px ça fonctionne =) mais faut que je change aussi width a 852px sinon il me saute une ligne.

Comment mettre a 0 les marges ??

Posté : 28 déc. 2008, 16:20
par Victor BRITO
Comment mettre a 0 les marges ??
C'est très simple.

Code : Tout sélectionner

ul, li { margin: 0; /* Pour les marges extérieures */ padding: 0; /* Pour les marges intérieures */ }

Posté : 28 déc. 2008, 16:29
par the_grinch
ok merci, c'est bien ce que j'avais fait :)
ça fonctionne maintenant, merci =)

Posté : 28 déc. 2008, 23:11
par AB
Alors un petit résolu ? Comme je le pressentais dans ton précédent sujet c'était donc bien un problème de code/css :wink:

Posté : 28 déc. 2008, 23:52
par zeus
Modération :
the_grinch, si ta question est résolue, pense à ajouter le tag [Résolu]
pour indiquer aux personnes qui voudront consulter ce sujet qu'il contient une solution.
Tu peux réaliser cette opération en cliquant sur le bouton Image en haut à gauche de ce sujet.