28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je viens poster sur ce fameux forum qu'est alsacreations suite à maintes recherches sur le net concernant les bugs IE (guillotine, peekabu, et autres).

J'ai essayé d'isoler mon problème. Je pense que ça vient de la mise en forme. Pourtant j'ai testé tous les attributs de position, de margin, et padding (j'en oublie?)

Le problème est due à un espacement visible entre le div "contenu" et les 2 divs "footer gauche" et "footer droit", alors que mes margin et padding sont à 0(cf images plus bas). Cet espacement ne ressemble pas au bug IE que j'ai pu voir sur plusieurs site (notamment le fameux www.positioniseverything.com)



je vous joins mon XHTML:

<!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" lang="fr" xml: lang="fra">
<head>

<title>blatitre</title>
<meta name="author" content="bla"/>
<meta name="description" content="blabla"/>
<meta name="keywords" content="blabla" />
<meta name="robots" content=all />
<meta http-equiv="robots" content=all />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en-us"/>
<link href="rougegorge.css" media="screen" rel="stylesheet" type="text/css"/>

</head>

<body>

<!--global-->
<div id="rgorgeglobal">

	<!--header-->
	<div id="rgorgeheader">
	</div>
	<!--fin header-->
	
	<!--titre-->
	<div id="rgorgetitregauche">
	</div>
	<div id="rgorgetitredroit">	
	</div>
	<!--fin titre-->
	
	<!--contenu-->
	<div id="rgorgecontenufond">
		
		<div id="rgorgecontenugauche">
		salut salut salut etc...
		</div>
		<div id="rgorgecontenudroit">
		salut salut salut salut etc...
		</div>
	</div>
	<!--fin contenu-->
	
	<!--clearfloats pour écarter le footer-->
	<div class="clearfloats"><!--  --></div>
	
	<!--footer-->
	<div id="rgorgefootergauche">
	footer gauche
	</div>
	<div id="rgorgefooterdroite">
	footer droit	
	</div>
	<!--fin footer-->

</div>
<!--fin global-->

</body>
</html>


ma CSS:

/*Style de base et initialisation des marges*/
body {background:#52635e;}
* {margin:0; padding:0;}


/*contenantglobal*/
div#rgorgeglobal {
	width: 746px;
	margin-left:auto;
	margin-right:auto;
}
 
 
 /*header*/
div#rgorgeheader {
	width: 746px; height: 85px;
	background: url(rougegorge/rougegorge01.jpg) no-repeat;
}
 
 
 /*titre*/ 
div#rgorgetitregauche {
	width: 223px; height: 63px; 
	background: url(rougegorge/rougegorge02.jpg) no-repeat;
	float: left;
}

div#rgorgetitredroit {
	width: 523px; height: 63px;
	background: url(rougegorge/rougegorge03.jpg) no-repeat;
	float: left;
}
 
 
  /*contenu*/ 
div#rgorgecontenufond {
	width: 746px; min-height: 300px;
	float: left;
	clear: both;
	background: url(rougegorge/rougegorge04.jpg);
}

div#rgorgecontenugauche {
	width: 142px; min-height: 300px;
	float: left;
	margin: 0 10px auto 40px;
}
 
div#rgorgecontenudroit {
	width: 405px; min-height: 300px;
	float: right;
	margin: -30px 10px auto 40px;
	position: relative;
}


  /*footer*/ 
div#rgorgefootergauche {
	width: 248px; height: 52px;
	float: left;
	clear: left;
	background: url(rougegorge/rougegorge05.jpg);
}

div#rgorgefooterdroite {
	width: 498px; height: 52px;
	float: right;
	background: url(rougegorge/rougegorge06.jpg);
}

div.clearfloats {clear: both;}


sous firefox 1.5 ça donne:
upload/6175-firefox1-5.jpg

sous IE 6 ça donne:
upload/6175-ie6.jpg

si quelqu'un avait une solution à mon problème ou une piste pour m'aiguiller ca m'enleverait une grosse épine du pied!

meri bcp Smiley biggrin
Modifié par ironm4n (20 Apr 2006 - 17:48)
pour plus de clarté je post 2 images qui montre les bordures des div

en jaune: div#rgorgeglobal
en rouge: div#rgorgecontenufond
en bleu: div#rgorgefootergauche
en vert: div#rgorgefooterdroit


sous firefox 1.5 (le résultat qui me convient, car le footergauche colle le div contenufond)
upload/6175-firefox1-5b.jpg

sous IE comme par magie un "magnifique" écartement apparait et hop!!! Smiley eek
upload/6175-ie6bis.jpg
Modérateur
bonjour,

sans trop creuser dans tes choix pour les regles css a appliqué, je me pose quelque questions, tout est-il vraiment necessaire ?

par exemple dans : div#rgorgecontenufond , que vient faire un float:left; a cet endroit, quelle utilités, car avec juste le code html et css , mais sans les images , il semble vraiment inutile.

++
effectivement je m'en suis aperçu pendant que je postais que ces float:left n'étaient pas nécessaire. Je les ai oublié en testant certainement.

Cependant ça n'a pas de rapport avec mon problème et ne le résoud pas.
Je pense que le problème vient peut être du div "rgorgeglobal" (en bordure jaune). Mais je vois pas quoi mettre comme attribut (le plus rageant c'est que ça marche sur firefox

Smiley fache )
Modifié par ironm4n (19 Apr 2006 - 21:45)
C'est marrant, quand je vois ce genre de choses d'habitude je pense à un problème de fusion des marges... mais vu que c'est Firefox qui aurait tendance à fusionner les marges à tout va, ça m'étonne que le problème se pose avec IE uniquement.
Modérateur
a écrit :
Cependant ça n'a pas de rapport avec mon problème et ne le résoud pas.


et pourtant chez moi le float en moins fait bien disparaitre cete marge d'1 em en trop,

une variante du bug des 3 px d'ie , cette "espece de caractere fantome" passerait t-il a la ligne ? non , serieusement:

voici ma page d'essai avec le float en commentaire, test puis sort le des commentaires le :float:left; et observe le resultat la marge reapparait:) .

<!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" lang="fr" xml: lang="fra">
<head>
<title>blatitre</title>
<meta name="author" content="bla"/>
<meta name="description" content="blabla"/>
<meta name="keywords" content="blabla" />
<meta name="robots" content=all />
<meta http-equiv="robots" content=all />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en-us"/>
<style type="text/css"/>
/*Style de base et initialisation des marges*/
body {background:#52635e;}
* {margin:0; padding:0;}
/*contenantglobal*/
div#rgorgeglobal {
	width: 747px;
	margin-left:auto;
	margin-right:auto;
}
 /*header*/
div#rgorgeheader {
	width: 746px; height: 85px;
	background: url(rougegorge/rougegorge01.jpg) no-repeat;
}
 /*titre*/ 
div#rgorgetitregauche {
	width: 223px; height: 63px; 
	background: url(rougegorge/rougegorge02.jpg) no-repeat;
	float: left;
}
div#rgorgetitredroit {
	width: 523px; height: 63px;
	background: url(rougegorge/rougegorge03.jpg) no-repeat;
	float: left;
}
  /*contenu*/ 
div#rgorgecontenufond {
	width: 743px; min-height: 300px;
_height:300px; /* remis pour simuler un contenu */
	/* float: left;  LE FAUTIF */
	clear: both;
	background: url(rougegorge/rougegorge04.jpg);
}
div#rgorgecontenugauche {
	width: 142px; min-height: 300px;
_height:300px;
	float: left;
	padding-left:40px; /* a propos, un padding-left limite le defaut des marge exterieurs gauches sur les flottants dans IE */
	margin: 0 10px auto 0px;
}
div#rgorgecontenudroit {
	width: 405px; min-height: 300px;
_height:300px;
	float: right;
	margin: -30px 10px auto 40px;
	position: relative;
}
  /*footer*/ 
div#rgorgefootergauche {
	width: 248px; height: 52px;
	float: left;
	clear: left;
	background: url(rougegorge/rougegorge05.jpg);
}
div#rgorgefooterdroite {
	width: 498px; height: 52px;
	float: right;
	background: url(rougegorge/rougegorge06.jpg);
}
div.clearfloats {clear: both;}
div {border:1px solid #000;border-left:0;border-right:0;} /* pour visualiser l'emplacement des divs a defauts d'images de fonds */
</style>
</head>
<body>
<!--global-->
<div id="rgorgeglobal">
	<!--header-->
	<div id="rgorgeheader">
	</div>
	<!--fin header-->
	<!--titre-->
	<div id="rgorgetitregauche">
	</div>
	<div id="rgorgetitredroit">	
	</div>
	<!--fin titre-->
	<!--contenu-->
	<div id="rgorgecontenufond">
		<div id="rgorgecontenugauche">
		<p>salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...</p>
		</div>
		<div id="rgorgecontenudroit">
		<p>salut salut salut salut etc...</p>
		</div>
	</div>
	<!--fin contenu-->
	<!--clearfloats pour écarter le footer-->
	<div class="clearfloats"><!--  --></div>
	<!--footer-->
	<div id="rgorgefootergauche">
	footer gauche
	</div>
	<div id="rgorgefooterdroite">
	footer droit	
	</div>
	<!--fin footer-->
</div>
<!--fin global-->
</body>
</html>


Tu as ce bug de marge gauche exterieur "doublé" dans IE aussi ... j'ai passé cette marge exterieur en marge interieur, sans les images je ne sais pas quelle valeur est la bonne , 20, 40 ou 80 px , a toi de corriger pour la bonne valeur.

++
argh le serpent commence à se mordre la queue!

merci beaucoup pour ton aide gcyrillus, tu as mis le doigt sur le problème!
Ce que tu dis marche parfaitement, mais ça explique aussi la présence du float:left dans le div contenufond.
En effet ce div accueille une image en background qui se répète et fais une mise en page fluide qui s'aggrandit en fonction du contenu (les "salut").

Si tu précise min-height: 300px; dans le div contenufond, du coup l'image
rougegorge04.jpg se répète seulement sur 300px de haut, et si mon contenugauche ou contenudroit dépasse ces 300px, l'image en background suit pas!

je sais pas si je suis trés clair.

En gros, soit j'ai une image de background qui se répète seulement sur un bout de ma page en hauteur (les 300px en min-height)
Soit je met ce float:left dans le div contenu et ma mise en page a un trou avant le footer!

coincé!

Comment garder cette mise en page fluide (avec background qui se répète jusqu'au footer)?

merci bien pour ton aide! Smiley smile



PS: pour les marges pour le contenu je pensais faire un padding comme tu dis, mais je voulais déja resoudre ce problème de mis en page. désolé de ne pas l'avoir expliqué!
Modérateur
ok , je commence a comprendre ton probleme,

en fait , ton conteneur ne s'etire pas(dans firefoxe, ?), pour palier a tes soucis, essai en enlevant le float et le min-height, et ajoute un overflow:hidden (alternative a un element supplementaire placer en dernier et en clear:both, alternative qui peut "bugger" dans opera par exemple), cela devrait permettre de le rendre extensible (englobant ces flottants).
L'elements en clear:both, reste la solution la plus fiable a mon avis.

modif de la page d'essai avec l'elemnt en clear:





<!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" lang="fr" xml: lang="fra">
<head>
<title>blatitre</title>
<meta name="author" content="bla"/>
<meta name="description" content="blabla"/>
<meta name="keywords" content="blabla" />
<meta name="robots" content=all />
<meta http-equiv="robots" content=all />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en-us"/>
<style type="text/css"/>
/*Style de base et initialisation des marges*/

body {background:#52635e;}

* {margin:0; padding:0;}

/*contenantglobal*/
div#rgorgeglobal {
	width: 747px;
	margin-left:auto;
	margin-right:auto;
}

 /*header*/

div#rgorgeheader {
	width: 746px; height: 85px;
	background: url(rougegorge/rougegorge01.jpg) no-repeat;
}
 /*titre*/ 
div#rgorgetitregauche {
	width: 223px; height: 63px; 
	background: url(rougegorge/rougegorge02.jpg) no-repeat;
	float: left;
}

div#rgorgetitredroit {
	width: 523px; height: 63px;
	background: url(rougegorge/rougegorge03.jpg) no-repeat;
	float: left;
}
  /*contenu*/ 

div#rgorgecontenufond {
	width: 746px; 
	/* float: left;  LE FAUTIF */
	clear: both;
	background: url(rougegorge/rougegorge04.jpg) red;
}

div#rgorgecontenugauche {
	width: 142px; 
	float: left;
	padding-left:40px;
	margin: 0 10px auto 0px;
}
div#rgorgecontenudroit {
	width: 405px; 
	float: right;
	margin: -30px 10px auto 40px;
	position: relative;
}
  /*footer*/ 
div#rgorgefootergauche {
	width: 248px; height: 52px;
	float: left;
	clear: left;
	background: url(rougegorge/rougegorge05.jpg);
}

div#rgorgefooterdroite {
	width: 498px; height: 52px;
	float: right;
	background: url(rougegorge/rougegorge06.jpg);
}


div.clearfloats {clear: both;}
div {border:1px solid #000;border-left:0;border-right:0;}
div.clear {clear:both;height:1px;overflow:hidden;}
</style>
</head>
<body>
<!--global-->
<div id="rgorgeglobal">
	<!--header-->
	<div id="rgorgeheader">
	</div>
	<!--fin header-->
	<!--titre-->
	<div id="rgorgetitregauche">
	</div>
	<div id="rgorgetitredroit">	
	</div>
	<!--fin titre-->
	<!--contenu-->
	<div id="rgorgecontenufond">
		<div id="rgorgecontenugauche">
		<p>salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...
salut salut salut etc...</p>
		</div>
		<div id="rgorgecontenudroit">
		<p>salut salut salut salut etc...</p>
		</div>
<div class="clear">	<!--clear pour étirer le conteneur-->   </div>
	</div>
	<!--fin contenu-->
	<!--clearfloats pour écarter le footer-->
	<div class="clearfloats"><!--  --></div>
	<!--footer-->
	<div id="rgorgefootergauche">
	footer gauche
	</div>
	<div id="rgorgefooterdroite">
	footer droit	
	</div>
	<!--fin footer-->
</div>
<!--fin global-->
</body>
</html>


finalement , c'etait un souci bien "classique" , ou bien ça n'est pas ça ?

++
merci à tous les deux de vous préoccuper de mon problème, et de passer du temps dessus.

gcyrillus >Et ben non c'est pas ça, j'ai essayé avec tes attributs overflow sur une classe "clear" mais ça ne marche toujours pas. Sur firefox le div contenufond n'englobe plus les
deux autres div contenugauche et contenudroit, du coup le background disparait totalement. Sur quel navigateur tu as testé ton overflow ? ça m'intrigue. J'ai l'impression que overflow s'applique uniquement si on a un contenu dans le div. Sur le code que je joins, j'ai enlevé ta classe .clear et j'ai intégré l'attribut overflow dans la classe que j'avais créé .clearfloats ; si ça pose un problème dis le moi, je le rectifierais.

mpop > j'ai regardé tes liens forts intéressants, mais je n'ai pas trouvé de solution à mon problème. Sur le lien que tu donnes http://www.test.blog-and-blues.org/haslayout/index.html ce qui se rapproche le plus de mon problème est la partie:
"Décalage d'une position relative dotée de layout jouxtant un flottant"
mais je ne pense pas que ce soit mon cas car je n'ai pas défini le div contenufond sur relative.

Cette histoire m'embête. Une solution serait de faire une feuille de style pour chaque navigateur avec une détection via PHP, mais ça me parait lourd pour ce problème qui doit pas être si compliqué.

Si vous voulez visualiser le site, je l'ai mis en ligne www.archigraff.com
Par la même occasion si vous observez d'autres bugs sur d'autres navigateurs ça m'intéresse également (je n'ai que firefox et IE)



je vous joins les codes correspondants à ce que j'ai mis en ligne

CSS:

/*Style de base et initialisation des marges*/
body {background:#52635e;}
* {margin:0; padding:0;}


/*contenantglobal*/
div#rgorgeglobal {
	width: 746px;
	margin-left:auto;
	margin-right:auto;
}
 
 
 /*header*/
div#rgorgeheader {
	width: 746px; height: 85px;
	background: url(rougegorge/rougegorge01.jpg) no-repeat;
}
 
 
 /*titre*/
div#rgorgetitregauche {
	width: 223px; height: 63px; 
	background: url(rougegorge/rougegorge02.jpg) no-repeat;
	float: left;
}

div#rgorgetitredroit {
	width: 523px; height: 63px;
	background: url(rougegorge/rougegorge03.jpg) no-repeat;
	float: left;
}
 
 
  /*contenu*/ 
div#rgorgecontenufond {
	width: 746px;
	clear: both;
	background: url(rougegorge/rougegorge04.jpg);
}

div#rgorgecontenugauche {
	width: 142px;
	float: left;
	padding-left:40px;
	margin: 0 10px 0px 40px;
}
 
div#rgorgecontenudroit {
	width: 405px;
	float: right;
	margin: -30px 10px 0px 40px;
	position: relative;
}


  /*footer*/
div#rgorgefootergauche {
	width: 248px; height: 52px;
	float: left;
	clear: left;
	background: url(rougegorge/rougegorge05.jpg);
}

div#rgorgefooterdroite {
	width: 498px; height: 52px;
	float: right;
	background: url(rougegorge/rougegorge06.jpg);
}

div.clearfloats {clear: both; height:0px; overflow:hidden;}


XHTML:

<!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" lang="fr" xml: lang="fra">
<head>

<title>blablatitre</title>
<meta name="author" content="Archigraff"/>
<meta name="description" content="Portfolio & Weblog de Simon MAZEROL, consacr&eacute; &agrave; l'Architecture, l'Infographie 2D/3D et le Webdesign "/>
<meta name="keywords" content="blabla" />
<meta name="robots" content=all />
<meta http-equiv="robots" content=all />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en-us"/>
<link href="rougegorge.css" media="screen" rel="stylesheet" type="text/css"/>

</head>

<body>

<!--global-->
<div id="rgorgeglobal">

	<!--header-->
	<div id="rgorgeheader">
	</div>
	<!--fin header-->
	
	<!--titre-->
	<div id="rgorgetitregauche">
	</div>
	<div id="rgorgetitredroit">	
	</div>
	<!--fin titre-->
	
	<!--contenu-->
	<div id="rgorgecontenufond">
		
		<div id="rgorgecontenugauche">
		salut salut salut salut salut salut salut salut salut salut salut salut salut salut salut salut salut salut salut<br />
		salut salut etc...
		</div>
		<div id="rgorgecontenudroit">
		salut salut salut etc...
		</div>
	</div>
	<!--fin contenu-->
	
	<!--clearfloats pour écarter le footer-->
	<div class="clearfloats"><!--  --></div>
	
	<!--footer-->
	<div id="rgorgefootergauche">
		footer gauche
	</div>
	<div id="rgorgefooterdroite">
		footer droit
	</div>
	<!--fin footer-->

</div>
<!--fin global-->

</body>
</html>



merci à vous pour votre patience! Smiley smile
Aprés avoir posté, j'ai trouvé une solution peut-être du bricolage mais bon ça marche sur firefox 1.5 netscape 7.0 et IE 6

j'ai rajouté le float:left; que j'avais enlevé au code suivant:

div#rgorgecontenufond {
	width: 746px;
	float: left;
	clear: both;
	background: url(rougegorge/rougegorge04.jpg);
}


j'ai mis à jour ce code sur www.archigraff.com

J'avance petit à petit mais c'est déjà un grand pas de fait.
En revanche je viens de tester sur opera 8.5 et ça n'affiche plus le background Smiley fache

Vous avez une idée??

EDIT: c'est bon ça marche sur opera 8.5 aussi. Il fallait le temps que ça se mette à jour Smiley biggrin . Trop content.

PROBLEME RESOLU!!!!!

Je profites de ce post, pour demander à ceux qui passent si vous pouvez tester la mise en pagepour voir s'il n'y a pas de problème d'affichage sur d'autres navigateurs (principalement les gens sous mac, IE MAC, safari, etc... , ayant testé 4 navigateurs sur PC)

merci beaucoup!!
Modifié par ironm4n (20 Apr 2006 - 11:25)
Sur Konqueror (linux) j'ai ça :
http://files.covertprestige.info/screens/web/archigraff-konq.jpg
Tout va bien, mais je ne m'explique pas ces deux bordures…

Sous Firefox, tout va bien, sauf qu'on observe le même décalage du texte. Ça ne devrait pas être compliqué à corriger, je pense.

Enfin, pour tes prochains tests, tu peux toujours utiliser du faux-texte pour remplir tes blocs :
http://www.lorem-ipsum.info/generator3

En tout cas, félicitations pour le design, j'aime beaucoup. C'est là que je me rends compte que je ne suis pas graphiste pour deux sous Smiley sweatdrop
merci bcp mpop Smiley biggrin ,

les 2 bordures red et blue vont disparaitre, je les ai mise juste pour pouvoir caler correctement le contenu par rapport au graphisme.

Ce qui comptait pour moi c'etait surtout de bien mettre d'abord en place le fond, maintenant j'ai tout le contenu qui m'attend!

merci aussi pour le générateur de texte, c'est vrai que ça simplifie la tâche. Je connaissais pas.

Encore merci à vous deux pour votre aide précieuse et j'espères que ce post servira à d'autres personnes qui recontreront le même problème!

à bientôt Smiley cligne