28173 sujets

CSS et mise en forme, CSS3

Menu en CSS avec mon site

Bonjour
J'ai mon site http://www.chine-china.com
qui a un menu en haut en CSS comme vous pouvez le voir.

Tout va bien, sauf pour FIREFOX avec qui le menu est décalé de environ 40 pixels sur la droite?

Pourquoi ?

Mon menu utilise dans le CSS
ul {
list-style-type: none;
width: 100%;
margin:0;
height: 29px
}
.menu li {
float: left
}
.menu a {
width: 82px;
height: 22px;
display: block;
padding-top: 5px;
text-align: center;
border: 1px solid #FFF;
text-decoration: none;
color: #42342A;
font-weight: bold;
font-size: 13px;
background: #DEB98C
}
.menuopen a {
width: 86px;
color: #B74A45;
background: #FFF;
}
.menu a:hover {
background: #FFF;
border: 1px solid #FFF;
color: #AD0000
}


et dans mon index.php
<ul class="menu">
	<li class="menuopen"><a href="">Home</a></li>
	<li><a href="">Articles</a></li>
	<li><a href="">Travel</a></li>
	<li><a href="">Country</a></li>
	<li><a href="">Hotels</a></li>
	<li><a href="">Bulletin</a></li>
	<li><a href="">Forums</a></li>
	<li><a href="">Photos</a></li>
	<li><a href="">Links</a></li>
	</ul>
Tu as pensé à remettre à zéro les margin et padding ?

Les navigateurs ont leurs propres paramètres par défaut pour les retraits des listes. Certains utilisent une marge à gauche sur ul, d'autres une marge à gauche sur li, d'autres un padding à gauche sur ul, d'autres un padding à gauche sur li, ou encore une combinaison de paramètres.

Bon, disons qu'en réalité les combinaisons existantes doivent être moins nombreuses que ça (il doit y en avoir deux ou trois différentes), mais on a tout à gagner à utiliser un petit :

ul#menu, ul#menu li {margin: 0; padding: 0;}

(au passage, tu peux utiliser des identifiants plutôt que des classes pour les éléments qui ne se trouveront qu'une seule fois dans la page).
Merci ca marche

Qu'entend tu par

a écrit :
(au passage, tu peux utiliser des identifiants plutôt que des classes pour les éléments qui ne se trouveront qu'une seule fois dans la page).


merci
Sujet clos
Aller à