28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

j'ai un soucis d'affichage d'un menu sur mon site, sous ie et sous firefox il ne s'affiche pas de la même façon, cf les screen ci dessous :

http://timpisteur.com/screen/ie.gif
et
http://timpisteur.com/screen/ff.gif

je ne sais pas trop à quoi c'est du Smiley confus , voila mon code :


   	  <div class="menu">
              <ul id="navigation">
                  <li><a href="javascript:;">accueil</a></li>
                  <li><a href="javascript:;">news</a></li>
                  <li><a href="javascript:;">membres</a></li>
                  <li><a href="javascript:;">blogs</a></li>
                  <li><a href="javascript:;">photos</a></li>
                  <li><a href="javascript:;">vidéos</a></li>
                  <li><a href="javascript:;">itrace tv</a></li>
                  <li><a href="javascript:;">agenda</a></li>
                  <li><a href="javascript:;">annuaire</a></li>
                  <li><a href="javascript:;">rss</a></li>
              </ul>
      </div>


et pour le css :


.menu {
	width: 1002px;
	float: left;
	background-image: url(../../style/images/bg_menu.gif);
	background-repeat: no-repeat;
	height: 53px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 12px;
}
#navigation {
	padding-top:0px;
	padding-left: 15px;
}
#navigation a{
	color: #000000;
	text-decoration: none;
}
#navigation a:hover{
	color: #FFFFFF;
	text-decoration: none;
}
#navigation li {
	display: inline;
	margin-right: 25px;
}


quelqu'un peut m'aider svp ?
en remerciant d'avance la personne qui pourra m'aider.

Cordialement.
Modifié par timpisteur (22 Oct 2008 - 14:33)
Bonjour.

Tout d'abord, pour ton background (même s'il ne pose pas de problèmes) écris plutôt ceci:
background: red url(../../style/images/bg_menu.gif) top left no-repeat;


Pour ce qui est de la position de ton texte, tu n'as pas spécifié les marges extérieures (margin)

Ensuite, si dans <div class="menu">...</div> il n'y a que ton menu, tu peux te passer du div. Supprime ton div, et déplace le contenu de .menu { ... } vers #navigation { ... }

Et enfin, si tu as des caractères accentuées dans ta page (comme le "é" de vidéo) pense à les remplacer par leur entité html, car chez moi, par exemple, ça m'affiche un carré noir Smiley biggol
Calak a écrit :
Et enfin, si tu as des caractères accentuées dans ta page (comme le "é" de vidéo) pense à les remplacer par leur entité html, car chez moi, par exemple, ça m'affiche un carré noir Smiley biggol

C'est juste que l'encodage n'est pas déclaré (et que ton navigateur est configuré pour prendre de l'UTF-8 par défaut, je dirais). Il faut déclarer l'encodage (ISO-8859-1 ou UTF-8 pour les principales options), pas encoder toutes les pages en ASCII. Smiley cligne