28172 sujets

CSS et mise en forme, CSS3

[Resolu]Probleme placement de <div> sous firefox 3.5.2 ? (ça m'

Bonjour,

Voila j'ai un probleme de placement de <div> sous firefox, le hic c'est que ça marche sous les autre navigateur (testé sous: IE8, opera 9.64 et safari 4) et ça marche, pourtant firefox gere bien les CSS et je vois pas ou ça cloche.

en fait j'ai trois <div> avec une id differente pour chacune une en haut, au centre et en bas
sous firefox la <div> du bas est collé a celle du haut et non celle du centre alors que sur les autre navigateur il les place comme il faut voici le code

<div id="conteneur_haut"></div>

<div id="conteneur_centre">

	<div id="menu"> 
		<ul>
		<li><a href="#" title="">L'appartement</a></li>
		<li><a href="#" title="">Visite guidée</a></li>
		<li><a href="#" title="">Plan d'accés</a></li>
		<li><a href="#" title="">Contact</a></li>
		<li><a href="#" title="">Liens</a></li>
		</ul>
	
	</div>


</div>

<div id="conteneur_bas">
	<ul>
	<li><a href="#" title="">acceuil</a></li>
	<li><a href="#" title="">contact</a></li>
	<li><a href="#" title="">plan du site</a></li>
	</ul>
</div>


#conteneur_haut { background-image:url(images/conteneur_haut.png);
	background-repeat:no-repeat;
	background-position:0 0;
	width:1000px;
	height:20px;
	margin:149px auto 0 auto; padding:0;

}


#conteneur_centre {background-image:url(images/conteneur_centre.png);
	background-position:0 0;
	background-repeat:repeat-y;
	min-height:400px;
	width:1000px;
	margin:0 auto; padding:0;
}


#conteneur_bas { background-image:url(images/conteneur_bas.png);
	background-repeat:no-repeat;
	background-position:0 0;
	margin:0 auto; padding:0;
	width:1000px;
	height:30px;

}


Voila donc si quelqu'un a une astuce ou vois le probleme... moi j'y vois plus rien tellement j'ai cherché

Merci a tous d'avance
Modifié par shinje (10 Aug 2009 - 21:46)
Salut,

As-tu une url ou on pourrait voir cette page?
(ou peux-tu poster le code complet, déclarations et headers inclus?)
Comme c'est en phase de projet je vous donne la feuille CSS et le code complet de la page.



body { background-color: #00004B;
	margin:0; padding:0;
	
	background-image: url(images/fond_head.png);
	background-repeat:no-repeat;
	background-position:center top;
	
	font-size:100%;

}


/*------------------------------------------------conteneur---------------------------------------------------------------*/

#conteneur_haut { background-image:url(images/conteneur_haut.png);
	background-repeat:no-repeat;
	background-position:0 0;
	width:1000px;
	height:20px;
	margin:149px auto 0 auto; padding:0;

}

/*..........................................................................................................................*/

#conteneur_centre {background-image:url(images/conteneur_centre.png);
	background-position:0 0;
	background-repeat:repeat-y;
	min-height:400px;
	width:1000px;
	margin:0 auto; padding:0;
}

#conteneur_centre p {margin:120px 65px 0 65px; padding:0;
	font-family:"Times New Roman", Times, serif;
	font-size:1.2em;
}


#conteneur_centre dl dt { margin:20px 80px; padding:0;

font-family:"Times New Roman", Times, serif;
	font-size:1.2em;
}

#conteneur_centre dd {margin:0 95px; padding:0;
	line-height:1.35em;
	font-size:1.1em;
}

/*.............................................................................................................................*/

#conteneur_bas { background-image:url(images/conteneur_bas.png);
	background-repeat:no-repeat;
	background-position:0 0;
	margin:0 auto; padding:0;
	width:1000px;
	height:30px;

}

/*..........................................................................................................................*/

#conteneur_centre_acceuil {background-image: url(images/conteneur_centre_acceuil.png);
	background-position:0 0;
	background-repeat:repeat-y;
	min-height:400px;
	width:1000px;
	margin:0 auto; padding:0;
}

#conteneur_centre_acceuil p {margin:120px 65px 0 65px; padding:0;
	font-family:"Times New Roman", Times, serif;
	font-size:1.2em;
}
	
	

/*------------------------------------------------------------Menu---------------------------------------------------------------*/

#menu { background-image:url(images/bouton1.png);
	background-position:0 0;
	background-repeat:repeat-x;
	margin:0; padding:0;
	height:40px;
	width:1000px;
}

#menu ul {display:block;
	margin:0 0 0 8px; padding:0;
	height:40px;
	list-style:none;
}

#menu a { display:block;
	float:left;
	height:40px;
	width:180px;
	line-height:40px;
	text-align:center;
	text-decoration:none;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:1.2em;
	font-weight:bold;
	color:#00004B;
}


#menu a:focus {background-image:url(images/bouton2.png);
	color:#FFFFFF;
}
 
#menu  a:hover {background-image:url(images/bouton2.png);
	color:#FFFFFF;
}



/*------------------------------------------------------------pied de page---------------------------------------------------------------*/

#conteneur_bas ul {width:200px;
	height:30px;
	margin:0 auto;
	padding:2px 0;
}

#conteneur_bas li {display:inline;
	list-style:none;
	margin:0;
	padding: 0 5px;
	font-size:0.7em;
	text-decoration:none;
}

#conteneur_bas a {
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	text-align:center
	text-decoration:none;
}

#conteneur_bas a:focus {text-decoration: overline;
}

#conteneur_bas a:hover {text-decoration: overline;
}


la page HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Acceuil-Location saisonniére Biarritz</title>
	<meta name="author" content="" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="subject" content="" />
	<meta name="copyright" content="" />
	<meta name="geography" content="France" />
	<meta name="robots" content="index, follow" />
	<meta name="identifier-url" content="" />
	<meta name="date-creation-yyyymmdd" content="" />
	
	<meta name="DC.Description" content="" />
	<meta name="DC.Subject" lang="fr" content="" />
	<meta name="DC.Title" content="" />
	<meta name="DC.Identifier" content="" />
	<meta name="DC.Language" content="fr" />
	
	
<link rel="stylesheet" href="location_btz_v2.css" />

</head>
<body>

<div id="conteneur_haut"></div>

<div id="conteneur_centre_acceuil">
<!-- -----------------------------------------------------------Menu Principal------------------------------------- -->
	<div id="menu"> 
		<ul>
		<li><a href="#" title="">L'appartement</a></li>
		<li><a href="#" title="">Visite guidée</a></li>
		<li><a href="#" title="">Plan d'accés</a></li>
		<li><a href="#" title="">Contact</a></li>
		<li><a href="#" title="">Liens</a></li>
		</ul></div>
		


	
	</div>


<!-- ------------------------------------------------------pied de page--------------------------------------------- -->
<div id="conteneur_bas">
	<ul>
	<li><a href="#" title="">acceuil</a></li>
	<li><a href="#" title="">contact</a></li>
	<li><a href="#" title="">plan du site</a></li>
	</ul>
</div>



</body>
</html>
Il te manque un ";" dans la css
#conteneur_bas a { 
    font-family:Arial, Helvetica, sans-serif; 
    color:#FFFFFF; 
    text-align:center /* POINT VIRGULE */
    text-decoration:none; 
}


Il ne faut pas mettre tous ces trais dans tes commentaires:
<!-- ---------truc----------- -->

ca contrarie le validateur html...

Sinon, chez moi, avec firefox 3.5.2, le
résultat est celui attendu... non??

exemple ici :

http://www.alternative.ch/nathan/alsa1/
Modifié par Nathan- (10 Aug 2009 - 14:42)
Bonjour shinje,

Serais-t-il possible d'avoir accès aux différents images qui composent ton design ?
c'est vrai que ça marche chez toi Nathan-, il faudrait que je puisse envoyer toute les image mais ça va pas etre facile, mais ce serait bizare que ça vienne de la? enfin defois plus rien ne m'etonne quand on programme...

Sinon, je vais enlever tous ces traits en fait c'est pour les voir facilement car avec dreamweaver le contraste entre les commentaires et le code est minime (enfin pour moi qui suis daltonien...)

Merci a tous en tous cas
Hello,

shinje a écrit :
avec dreamweaver le contraste entre les commentaires et le code est minime (enfin pour moi qui suis daltonien...)
Même sans être daltonien c'était également mon avis... heureusement il est possible dans les préférences de modifier les couleurs par défaut. Smiley cligne
J'ai trouvé en fait Nathan tu avais raison firefox n'as pas supporter les grande ligne de mes commentaires!!!

merci a vous tous encore Smiley biggrin

Et je ne savais pas que dans Dreamweaver on pouvait modifié les couleurs j'ai pas été assé curieux (pour une fois) je vais vite changre ce contraste alors merci
Sujet clos
Aller à