28173 sujets

CSS et mise en forme, CSS3

[Resolu]Probleme placement mozilla

Bonjour,

j'ai un problème mozilla me met une marge en haut alors que dans ie ça fonctionne.
Est-ce qu'il y a une incompatibilité dans les css que j'utilise?

upload/13183-menu-css.jpg" alt="upload/13183-menu-css.jpgupload/13183-menu-css.jpg" />

voici mon code, je n'y comprends plus rien, Smiley sweatdrop 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css"> 
			div#conteneur{
				width:770px;
				height:600px;
				color:#CCCCFF;
				border: 2px solid #e4d25a ;
				margin:0 0 0 0;
				padding:0 0 0 0;
				}
			
			div#menugauche{
				text-align:left;
				width:309px;
				height:69px;
				display:inline;
				float:left;
				margin:0 0 0 0;
				position:relative;
				padding:0 0 0 0;
				}
				
			dl#menugauche dt{
				text-align: left ;
				list-style-type: none;
				position:relative;
							
			}
			
			dl#menugauche dt a{
				display: block ;
				text-decoration: none ;
				width:inherit;
				text-indent:-5000px;
				
			}
			
			.services{
				background-image: url(../images/s2.png);
				height: 23px;
				}
			.services:hover{
				background-image: url(../images/s1.png);
				}
				
			.produits{
				background-image: url(../images/p2.png); 
				height: 23px;
				}
			.produits:hover{
				background-image: url(../images/p1.png);
				}
			.actualites{
				background-image: url(../images/a2.png); 
				height: 23px;
				}
			.actualites:hover{
				background-image: url(../images/a1.png);
				}
			</style>

</head>

<body>
	<div id="conteneur">
				<div id="menugauche">
				<dl id="menugauche">
					<dt><a class="services" href="1.htm">Services</a></dt>
					<dt><a class="produits" href="2.htm">Produits</a></dt>
					<dt><a class="actualites" href="3.htm">Actualité</a></dt>
				</dl>
			</div>
		</div>
	</body>
</html>


Merci d'avance de votre aide.

Cordialement
Modifié par selinav (13 Jul 2007 - 10:48)
Une piste : ta utilisé deux fois l'id "menugauche". Un id ne peut être utilisé qu'une seule fois Smiley cligne Et on ne met pas "gauche" dans un id ou une classe. Si un jour tu décides de le mettre à droite, ça fera bizarre un menugauche situé à droite Smiley cligne

Utilise genre :
<div id="menuPrincipalWrap">
  <dl id="menuPrincipal">
    ...
merci j'ai réessayé avec le code suivant mais j'obtiens la meme chose :


<style type="text/css"> 
			div#conteneur{
				width:770px;
				height:600px;
				color:#CCCCFF;
				border: 2px solid #e4d25a ;
				margin:0 0 0 0;
				padding:0 0 0 0;
				}
			
			div#menugauche{
				text-align:left;
				width:309px;
				height:69px;
				display:inline;
				float:left;
				margin:0 0 0 0;
				position:relative;
				padding:0 0 0 0;
				}
				
			div#menugauche dl dt{
				text-align: left ;
				list-style-type: none;
				position:relative;
							
			}
			
			div#menugauche dl dt a{
				display: block ;
				text-decoration: none ;
				width:inherit;
				text-indent:-5000px;
				
			}
			
			.services {
				background-color:#FF9900;
				height: 23px;
								}
			.services:hover{
				background-color:#FF9909
				}
				
			.produits{
				background-color:#CCCCCC;
				height: 23px;
				}
			.produits:hover{
				background-color:#999999;
				}
			.actualites{
				background-color:#FF6633; 
				height: 23px;
				}
			.actualites:hover{
				background-color:#FF0033;
				}
			</style>

</head>

<body>
	<div id="conteneur">
				<div id="menugauche">
				<dl>
					<dt><a class="services" href="1.htm">Services</a></dt>
					<dt><a class="produits" href="2.htm">Produits</a></dt>
					<dt><a class="actualites" href="3.htm">Actualité</a></dt>
				</dl>
			</div>
		</div>
	</body>
</html>
et idem avec ta suggestion


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css"> 
			div#conteneur{
				width:770px;
				height:600px;
				color:#CCCCFF;
				border: 2px solid #e4d25a ;
				margin:0 0 0 0;
				padding:0 0 0 0;
				}
			
			div#menugauchewrap{
				text-align:left;
				width:309px;
				height:69px;
				display:inline;
				float:left;
				margin:0 0 0 0;
				position:relative;
				padding:0 0 0 0;
				}
				
			dl#menugauche dt{
				text-align: left ;
				list-style-type: none;
				position:relative;
							
			}
			
			dl#menugauche dt a{
				display: block ;
				text-decoration: none ;
				width:inherit;
				text-indent:-5000px;
				
			}
			
			.services {
				background-color:#FF9900;
				height: 23px;
								}
			.services:hover{
				background-color:#FF9909
				}
				
			.produits{
				background-color:#CCCCCC;
				height: 23px;
				}
			.produits:hover{
				background-color:#999999;
				}
			.actualites{
				background-color:#FF6633; 
				height: 23px;
				}
			.actualites:hover{
				background-color:#FF0033;
				}
			</style>

</head>

<body>
	<div id="conteneur">
				<div id="menugauchewrap">
				<dl id="menugauche">
					<dt><a class="services" href="1.htm">Services</a></dt>
					<dt><a class="produits" href="2.htm">Produits</a></dt>
					<dt><a class="actualites" href="3.htm">Actualité</a></dt>
				</dl>
			</div>
		</div>
	</body>
</html>


pouvez-vous essayer le code sur votre poste pour voir si ça marche, svp?
Merci
Bonjour,

Est-ce qu'on pourrait voir une page en ligne? Ce serait plus simple pour constater le problème de visu et en identifier la cause.

Par ailleurs, tu as bien mis les marges du dl utilisé à zéro? Au passage, c'est un contresens d'utiliser un dl ici. Ton menu n'est pas une liste de définitions. Utilises plutôt une liste non ordonnée (élément ul, avec des items de liste li).
Ch'uis con, c'est tout simple Smiley lol C'est la marge par défaut de <dl>...

dl {
  margin: 0;
}


Souvent les espaces de ce genre sont des styles par défaut...
selinav a écrit :
pour les ul et li, ça me décalait la position finale meme avec la propriété
liste-style-position ....

Ben oui, il fallait remettre les marges et padding de ul à zéro (ou aux valeurs voulues).
ul#navigation {margin: 0; padding: 0;}


Mais si vraiment tu n'aimes pas les ul+li, utilise des div pour les éléments de ton menu, plutôt qu'une liste de définitions qui n'a strictement rien à faire là. Smiley cligne
Sujet clos
Aller à