28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un problème concernant la propriété de float!

Je fais mon site dans dreamweaver cs3 et quand je vérifie la compatibilité avec les navigateurs, on me donne l'erreur suivante:

a écrit :
Décalage de texte de 3 px
Si des boîtes anonyme ayant du contenu incorporé sont adjacentes à un élément flottant, un espace de 3 pixels apparaît entre les boîtes et le bord de l'élément flottant. Cet espace disparaît lorsque le contenu remplace le flottement, si bien que ce contenu est décalé de trois pixels en direction du flottement. Il peut être difficile de remarquer cet espace lorsque du texte aligné à gauche est adjacent à un élément flottant à droite, mais il existe néanmoins et peut provoquer une "perte de flottement" dans les mises en page peu aérées.



En fait, j'ai un menu horizontale, une image avant et une image après que j'ai mis dans mon conteneur entete. Peut-etre que j'aurais mieux fait de mettre un div juste pour cette parti?

est-ce que vous pouvez m'aider svp!

je vous remercie beaucoup!

voici mon site:http://www.planet-argent.com/

et mon code css:
body {
	background-color: #0268BA;
	background-image: url(images/top-bg.jpg);
	background-repeat:repeat-x;
	margin: 0px; 
	padding: 0px
}
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	color: #FFFFFF;	
}	
#global {
	margin-left: auto;
	margin-right: auto;
	width: 980px;
}	
#vert-entete {
	width: 90%;
	height: 30px;
	border-style: solid;
	border-width:thin;
	background-color: #B0DE27;
	border-color:#7CA800;
	margin-left: auto;
	margin-right: auto;
}	
#entete {
	width: 100%;
}
.img-menuhaut {
float:left;	
}
#menuhaut ul {
	padding:0px;
	margin:0px;
	list-style-type:none;	
}
#menuhaut li {
 float:left; 
 }
#menuhaut ul li a {
	display:block;
	width:116px;
	line-height:48px;
	background:black url(images/menuhaut_01.jpg) repeat-x;
	text-decoration:none;
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: bold;
	height: 48px;
	background-image: url(images/menuhaut_01.jpg);
 }
#menuhaut ul li a:hover {
	background:black url(images/menuhaut_01-over.jpg) repeat-x;
	color:#4D6E05;
}	
#gauche{
	background-image:url(images/coin-page.jpg);
	background-repeat:no-repeat;
	background-position:top right;
	float: left;
	width: 590px;
	height: 1244px;
	margin-left: 68px;
	margin-bottom: 0px;
	background-color:#FFFFFF;
}	
#droit{
	float: left;
	background-image:url(images/menubg.jpg);
	background-repeat: repeat-y;
	width:322px;
	height: 1244px;
	margin-bottom: 0px;

Modifié par kimy (30 Jan 2010 - 16:44)
Ha oui remarque j'avais pas vu la thématique de ton site..tu as raison tu aura majoritairement des visiteurs avec ie 6 voir meme 5 et 5.5...
Donc il va falloir trouver un moyen pour qu'ils puissent avoir leur part du butin Smiley cligne
bprod a écrit :
Ha oui remarque j'avais pas vu la thématique de ton site..tu as raison tu aura majoritairement des visiteurs avec ie 6 voir meme 5 et 5.5...

IE 5 et 5.5, j'en doute. IE6 par contre, c'est fort probable avec encore dans les 6% d'utilisateurs en France en janvier 2010.

Par contre je ne suis pas sûr que le bug en question, le Three Pixel Text Jog comme on l'appelle, pose problème ici. Le mieux à faire est de ne pas se fier uniquement aux avertissements très génériques de Dreamweaver, et de tester par soi-même. Smiley cligne