28173 sujets

CSS et mise en forme, CSS3

Bonjours a tous,

J'ai fait mon site en HTML et CSS, sous internet explorer, tout se positionne bien.

Mais une fois que je pass sous firefox, mes bouton son decaller d'1 cm.

J'ai bon chercher je ne trouve, donc si vous voulez bien m'aider se serais bien gentil Smiley cligne


Le code HTML

				<div class="menu2">
					<ul id="menu">
						<li><a href="historique.html" class="Style1"> Historiques</a></li>
					  <li><a href="contacts.html" class="Style1">Contacts</a></li>
						<li><a href="Programme 2006" class="Style1">Contacts</a></li>
						<li><a href="formulaires inscriptions" class="Style1">Formulaires</a></li>
					  <li><a href="liens.html" class="Style1">Liens</a></li>
					</ul>
				</div>




Le code CSS



.menu2 {
	background: url('menu.jpg');
	height: 433px;
	width: 207px;
	margin-top: 20px;
	margin-left: 10px;
	float: left;
	}


ul#menu
{
	margin-top: 46px;
	margin-left: 0px;	
	list-style-type: none;
}

ul#menu li
{
	margin: 0 0 45px 0 ; /* l'espace entre les boutons*/
	padding: 0 ;

}

ul#menu li a
{
	display: block ;
	width: 207px ;
	line-height: 32px ;
	color: #000 ;
	text-indent: 50px ; /* On décale le texte de 40px du bord gauche */

	text-decoration: none ;
	background: url('bouton.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('bouton2.jpg');
}


merci bcp !
Bonjour Mamdien,
Est-il possibile de voir un exemple en ligne? Ca aide beaucoup pour se faire une idée du problème.

Merci d'avance,
Aymeric
Salut

Dans ton style ul#menu rajoute

padding:0px;

IE met des margin aux liste alors que FF met des padding

A+
Modifié par gege71 (07 May 2006 - 00:33)
Hello Mamdien,

Au passage, l'élément center que tu utilises dans ta page est déprécié, même s'il reste acceptable en XHTML 1.0 transitionnel (par contre en strict, ça passe pas).

Il y a d'autres moyens de center des éléments, en utilisant uniquement les CSS.
Bonjours a tous,
deja merci de votre aide Smiley smile

J'ai rajouter de padding 0 et il n'a plus de probleme.

Sinon mpop je suis debutant dans le domaine, si tu sais me dire la commande a taper pour CENTRER dans le css serais bien gentil.

Merci encore.
Il y a deux types de centrage en CSS :
– le centrage du texte et des éléments en-ligne (images) ;
– le centrage des blocs.

Pour le centrage du texte, il faut appliquer text-align: center; au bloc qui contiendra le texte.
Pour le centrage d'un bloc, il faut utiliser les marges automatiques.