Positionnement

bonjour a tous voila j ai probleme de positionnement de mon menu horizontale qui s affiche correctement sous IE mais pas sous firefox. jetez un oeuil et dites moi ce que vous en pensez
http://michael.peyron.free.fr/index.php
merci d avance

Rebonjour a tous ,
je sais que ce genre de questions doivent vous paraitre un peu "embetantes" mais si quelqun pouvait me mettre sur la voie concernant mon probleme ca serait sympa
cdlt

À priori ça vient des marges par défaut sur les éléments dl. Les marges supérieurs et inférieures sont à 1em dans Firefox, et 0 dans IE.

Donc faire un dl {margin: 10px 0;} ou autre pour homogénéiser tout ça.

Bonjour,

Il y a aussi peut être un problème de positionnement en absolute de ton menu, il n'a aucun parent positionné en relative et se positionne donc par rapport à body (je crois ) ce qui est variable d'un navigateur à l'autre.
Je te conseille de placer ton bloc conteneur en position relative ce qui servira de référence à ton menu pour se positionner avec un top: 186px et left: 0;

merci florent pour ta suggestion mais je viens de tester et ca n a rien donné.
en fait je n utilise l'element dl que pour mon menu ou figure déja ceci

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

mais peut etre que je n ai pas plassé le dl {margin: 10px 0;} au bon endroit ?

merci a toi aussi ghost, mais je viens egallement de tester, j ai mis position:relative; dans mon conteneur mais ca n a rien changé
d autre suggestions peut etre ??
en tout cas merci

Re,

Tu es sûr que ce n'est pas ok ?

	   <style type="text/css">


body
{width: 800px ;
	margin: 0px 0 0 103px;/* On définit les marges haute et basse à 10px et les marges droite et gauche à 0 */
	padding: 0 ;/* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
	text-align: center ;/* On utilise text-align: center ; pour Internet Explorer, c'est la seule façon de centrer les éléments de type block avec ce navigateur */
	line-height:150%;
	font-family: Verdana,Geneva,Arial,Helvetica,"Bitstream Vera Sans",sans-serif;/* On a ajouté de quoi mettre une police de caractère et une couleur de fond */
	background: #fff ;
	font-size: 70%;
	list-style-type:none;
	
}




div#conteneur
{
	width: 800px ;/* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
	margin: 0 auto ;/* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type block (comme les divisions), nous centrons donc cette division */
	text-align: left ;/* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */
	border: 0px solid #ab4 ;/* Une bordure autour de l'ensemble de la page, et couleur blanche pour le fond de celle-ci */
	position: relative;	/*-------------------- modification --------------------------------*/
	background: lime;
}



div#header
{
	height: 186px ;/* On définit la hauteur de la partie header, contenant le titre du site */
	background: red;
	background-repeat:no-repeat;
	z-index:10;

}

.colone_gauche1
{

float:left;


width:600px;

}

.colone_droite1
{
padding-top:20px;
margin-top:0px;

width: 200px;
text-align:right;
background: url() no-repeat;
float:left;

}

#logo
{padding-left:0px;}
div#header a
{
color:#a70800;
background-color:;
}


 
div#contenu
{

	padding: 0 0 0 0px ;
	/* On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu */
}
div#contenu a     /* On met en forme les liens contenu dans la page */
{
	
}


div#contenu a:hover
{
	color:#ce7017;
}
div#contenu h2
{
	border-color:#a70800;
	padding-left: 25px ;
	line-height: 25px ;
	
	background: url(little_apple.gif) no-repeat left bottom ;/* Mise en forme du titre de page, une petite image, on décale le texte en fonction de l'image, on donne un couleur au texte et on met une bordure basse */
	color:#a70800;
	border-bottom: 1px solid #9b2 ;
}
div#contenu p
{
padding-right:10px;
}

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #9b2 ;/* De même que pour le titre h2, à ceci près qu'on ne donne pas d'image décorative cette fois ci */
	border-left: 3px solid #9b2 ;
	color:#a70800;
	
}

div#contenu #h3
{	
	font-family: Georgia,"Times New Roman",Times,serif;
	font-size:1.5em;
	margin: 0 10px 15px 20px;
	padding-left: 5px ;
	border-bottom: 1px solid #9b2 ;/* De même que pour le titre h2, à ceci près qu'on ne donne pas d'image décorative cette fois ci */
	border-left: 3px solid #9b2 ;
	color:#ce7017;
	
}

div#contenu #miniature
{

width:176px;
height:176px;
background: url(images2/miniature.gif ) no-repeat left bottom ;
}
div#contenu #miniature img
{
border:1px solid silver;
}
#description
{
width:80px;
color:#ce7017;
}

#description a
{
color:#ce7017;
}

.colone_gauche
{
padding-top:40px;
float:left;
width: 560px;
}

.colone_gauche a
{
text-decoration:none;
}
.colone_gauche a:hover
{
color:#000000;
}

.colone_gauche img
{
border: 0px;
}
#right
{
text-align:right;
color:#ce7017;
}
#puces
{
line-height:20px;
padding-left:28px;
background:url(images2/puce3.gif) no-repeat;
font-weight:bold;
}
#puces a
{
color:#6c9455;
}

#navigation img
{
border:0px ;
text-decoration:none;
}
#navigation a
{

color: #398fc6;
}

#date_news
{font-size:0.8em;}

#pages_news
{

color:#a70800;
}

img.gauche /* bibliographie image a gauche */
{
margin-right:15px;
float:left;
}


.colone_droite
{
padding-top:65px;
width: 240px;
background: url(images2/bandeau_droit.gif) no-repeat;
float:left;

}
.colone_droite table
{
margin:auto;
}

.colone_droite img
{
border: 1px solid silver;
}
.colone_droite td
{text-align:center;
width:176px;
height:176px;
background: url(images2/miniature2.gif) no-repeat center ;
}



#actualite
{

width:200px;
margin:auto;
background-color:#fff;

}
#actualite a
{
color:#6c9455;
}

 #actualite dt
{
padding-left:6px;
padding-right:6px;
color:#a70800;
background-color:#e2e2e2;
}

 #actualite dd
{
padding-left:4px;
padding-right:4px;
font-size:0.8em;
background-color:#efefef;
}


div#contenu p  /* On rend les paragraphes plus propre, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.5em ;
	font-family: Verdana,Geneva,Arial,Helvetica,"Bitstream Vera Sans",sans-serif;/* On a ajouté de quoi mettre une police de caractère et une couleur de fond */
}








#footer   /* Mise en forme de la partie pied de page, rien d'extra-ordinaire */
{
clear:left;
height:48px;
	margin: 0 ;
padding-right: 75px ;
text-align: right ;
background-color:#fff;
z-index:10;

}
#footer  a
{
color:#a70800;
text-decoration:none;
border-right:1px solid black;
}

pre
{
	overflow: auto ;/* En passant on définit l'overflow de la balise pre à auto pour permettre d'afficher des barres de défilement si le texte contenu dans cette balise est trop grand */
	background: #dea ;/*une couleur de fond, une bordure, la taille de police et un léger espace entre le texte et les bords du pre */
    border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;

}

html pre
{
	width: 636px ;/* On dois donner une largeur au pre à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant un "hack", la combinaison " * html " permet de n'appliquer ce qui suis qu'à Internet Explorer */
}

pre span   /* Couleur de texte des éléments compris dans des span eux mêmes compris dans un pre */
{
	color: #560 ;
}

pre span.comment   /* Couleur différente pour les span.comment, les span utilisés pour les commentaires */
{
	color: #b30000 ;
}

div#ajout-images
{
text-align:center;
}

div#ajout-rubriques
{
text-align:center;
}
#f
	/* ttttttttttttttttttttttttttttttttttttttttttttttttMENUtttttttttttttttttttttttttttttttttttttttttttttttttttttttttt */
	
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}	
	
	#menu {
 /* placement du menu, à modifier selon vos besoins */
 width:810px;
position:absolute;
top:186px;/*------------------------------ modification -------------------------------*/
left:0px; /*------------------------------ modification -------------------------------*/
z-index:100;
 /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
background-color:#fff;
margin: 0; /--------------------- mofification -------------------------------*/
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background-image:url(images2/fond_menu.gif);
border: 1px solid gray;
margin: 1px;

}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;

}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
background-image:url(images2/fond_menu.gif);
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background-image:url(images2/fond_menu_hover.gif);
color:#000;
}

       </style>

Je viens de faire un copier/coller de ce que tu m as envoyé et ca ne change rien, Mais vu que je me connecte du maroc je me demmande si mes modifes se font instantanément a chaque fois; Vois tu un changement?

Re,

Les modifs sont faites, vide le cache de ton navigateur CTRL+F5.
inch'allah

Chez toi c est bon? j ai deja vidé le cache mais ca ne change rien. Je crois que c est mon fournisseur d acces qui me refourgue des pages non actualiséee pour ménager sa bande passante. Du moins j imagine,sinon je ne vois pas pourquoi ca fait ca.

Travaille en local c'est plus simple

Ok merci c est ce que je vais faire; en tout cas merci je crois que je vais y arriver. merci pour ton aide . La il faut que j aille bosser. je te dirais si ca marche des que je m y remet salut.
PROBLEME RESOLU MERCI A TOUS
Modifié par minas (14 Jul 2007 - 12:44)