28173 sujets

CSS et mise en forme, CSS3

C'est encore moi...je reviens vers vous pour un nouveau problème avec mon css...
J'ai un menu verticale qui s'affiche correctement sous FF mais pas sous IE.
Voila comment le menu doit être (screen sous FF):
http://img409.imageshack.us/img409/8074/ffkr9.jpg

Et voila le résultat avec IE :
http://img204.imageshack.us/img204/1961/iefx5.jpg

Le code de ma page est :
  <tr>
    <td class="lien_menu"><ul id="menu">
      <li><a href="#">Accueil</a></li>
      <li><a href="#">Actualit&eacute;</a></li>
      <li><a href="#">Classements</a></li>
      <li><a href="#">Photos</a></li>
      <li><a href="#">Podcast</a></li>
      <li><a href="#">Wallpapers</a></li>
      <li><a href="#">Forum</a></li>
    </ul></td>
  </tr>


Et celui de ma page css est :
/*Début Menu header */
*{
padding: 0;
margin: 0;
border: 0;
margin-left: auto;
 margin-right: auto;
}

body {
  background-image: url("fond.gif" );
  background-repeat: repeat;
  background-color: #DEDBDB;
  float: right;
  	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px;
}
ul#menu
{
	list-style-type: none ;
margin: 0;

padding: 0;
}
	
/* Suppression du margin, du padding et des puces du <ul> */
.lien_menu {
	font-family: verdana;
	font-size: 13px;
	font-weight: bold;
}


ul#menu li
{
	vertical-align: baseline;
	float: left;
	
	
}

ul#menu li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 135px ;
	line-height: 23px ;
	color: #000 ;
	text-align: center ;
	text-decoration: none ;
	background: url(IMG/graphisme/bouton_gris.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}

ul#menu li a:hover
{
	background: url(IMG/graphisme/bouton_vert.jpg) no-repeat 0 0px ; 
}


Et si je supprime
margin-left: auto;
margin-right: auto;
le problème du menu de se pose plus. En revanche, le site ne se retrouve plus centrer sous Firefox.
Comment faire ?
Modifié par twin (08 Sep 2007 - 20:13)
et si tu enlèvais les margin-left: auto; margin-right: auto; dans ton * et que tu plaçais ton site dans un div genre:


site{
    margin:0px auto 0px auto;
    padding:0px;
    width:755px;
}


ou alors tu centres ton tableau qui a l'air de te servir de structure de site (berk Smiley ravi )
mageta a écrit :
et si tu enlèvais les margin-left: auto; margin-right: auto; dans ton * et que tu plaçais ton site dans un div genre:


site{
    margin:0px auto 0px auto;
    padding:0px;
    width:755px;
}


ou alors tu centres ton tableau qui a l'air de te servir de structure de site (berk Smiley ravi )


et aussi n'oublie pas d'indiquer des unités à tes mesures; et un float sur une balise body, faudra qu'on m'explique!