18041 sujets

Questions générales et questions de débutants

3 Problèmes et conseils

Bonjour,

Je viens de réaliser pour la énième fois un gabarit de page pour m'entrainer avec les css mais je n'arrive pas exactement à ce que je veux et toujours cette fichue différence de rendu entre IE et FF Smiley confus

En gros mes 3 problèmes :

- les blocs float qui flottent différemment à cause du 2x20px
- mon float gauche qui empiète sur le footer
- un centrage apparemment pas judicieux si j'en crois certains posts.

Voici mon code

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
html, body {
	margin:0px; 
	padding:0px;
	height:100%;
	width:100%;
}

#maxi{
	margin:0px;
	padding:0px;
	background-color:#333C00;
	width:100%;
	height:100%;
	border:0px;
	text-align:center;
	
}

#header{
	margin:0px auto;
	padding:0px;
	background-color:#FF0;
	width:760px;
	border:0px;
}
#page{
	margin:0px auto;
	padding:0px;
	background-color:#BB0;
	height:400px;
	width:760px;
	border:0px;
}
#gauche{
	float:left;
	margin-top:20px;
	margin-left:20px;
	width:200px;
	height:200px;
	padding:0px;
	border:0px;
}
#droite{
	float:right;
	margin-top:20px;
	margin-right:20px;
	width:200px;
	height:200px;
	padding:0px;
	border:0px;
}

#footer {
	background-color:#F00;
	width:760px;
	clear:both;
	margin:0px auto;
	padding:0px;
	border:0px;
}
</style>
</head>

<body>
<div id="maxi">
<div id="header">le header</div>
<div id="page">
    <div id="gauche"> je suis un floatant gauche je suis un floatant gauche je 
      suis un floatant gauche je suis un floatant gauche je suis un floatant gauche 
      je suis un floatant gauche je suis un floatant gauche je suis un floatant 
      gauche je suis un floatant gauche je suis un floatant gauche je suis un 
      floatant gauche je suis un floatant gauche je suis un floatant gauche je 
      suis un floatant gauche je suis un floatant gauche je suis un floatant gauche 
      je suis un floatant gauche je suis un floatant gauche je suis un floatant 
      gauche je suis un floatant gauche je suis un floatant gauche je suis un 
      floatant gauche je suis un floatant gauche je suis un floatant gauche je 
      suis un floatant gauche </div>
    <div id="droite">droite droite droitedroite droite droitedroite droite droitedroite 
      droite droitedroite droite droitedroite droite droitedroite droite droitedroite 
      droite droitedroite droite droitedroite droite droitedroite droite droitedroite 
      droite droitedroite droite droitedroite droite droitedroite droite droitedroite 
      droite droitedroite droite droitedroite droite droitedroite droite droitedroite 
      droite droitedroite droite droitedroite droite droitedroite droite droitedroite 
      droite droitedroite droite droite</div>
</div>
<div id="footer">le footer</div>
</div>
</body>
</html>


Je suis preneur et avide de toute correction et commentaire merci Smiley cligne

Qui que tu sois tu me seras d'une grande aide Smiley biggrin

HD
Bonjour,

Virer le prologue XML qui fait passer IE en mode Quirks (bug d'IE6), et qui de toute façon est inutile ici vu que tu ne fais pas du XML mais du HTML (pour simplifier).

Qu'est-ce que ça donne alors?

PS: et attention au Doubled Margin Bug (que tu mentionnes toi-même, d'ailleurs)! Il y a un correctif simple pour ce bug d'IE6, je te laisse chercher ça.
Modifié par Florent V. (01 Apr 2008 - 14:48)
Merci FV ! Les problèmes du mode quirks et de la double marge (display:inline sur le float) sont résolus.
Pour le centrage, hormis un tableau, il existe les valeurs négatives mais j'apparente ca à de la bidouille donc je préfère utiliser un text-align pour IE et un margin auto, c'est comme ca qu'il faut faire ?
Sinon le contenu de mon float gauche empiète toujours sur mon footer dans FF malgré un clear:both; sur le footer...Que faire ?

Merci à toi

HD
Modifié par Hell doc (01 Apr 2008 - 17:19)
Hell doc a écrit :
donc je préfère utiliser un text-align pour IE et un margin auto, c'est comme ca qu'il faut faire ?

Marges automatiques seulement, et ça marche très bien.
L'utilisation de text-align n'est nécessaire que si on souhaite obtenir le même centrage dans IE 5.x. Et IE 5.x est mort bien que pas tout à fait enterré. Smiley cligne

Hell doc a écrit :
Sinon le contenu de mon float gauche empiète toujours sur mon footer dans FF malgré un clear:both; sur le footer

Tu n'aurais pas farci ton code de hauteurs fixes (height: 200px, height: 400px, height: 100%, etc.), par le plus grand des hasards? J'ai l'impression que si. Smiley smile Le problème pourrait venir de là.
Sinon, je demande à voir la page.
Merci de ton soutien et de prendre du temps pour mes p'tits problèmes.
En effet, cette histoire de hauteur est en cause. Cependant quand je ne définis pas de hauteur dans le div conteneur des 2 floats sous FF (cette fois lol) la couleur de fond n'apparait plus... Smiley confus

HD
Merci de ton intervention mais le problème c'est que : et mon conteneur de float et mon footer ont un background si tu regardes bien dans mon premier post.

#page{
	margin:0px auto;
	padding:0px;
	background-color:#BB0;

et 

#footer {
	clear:both;
	background-color:#F00;


Smiley sweatdrop
Bonjour,

Si la largeur de ton site est fixe (ou tout au moins celle d'une partie du site), tu peux utiliser une background-image de 1px de haut, qui contienne les deux couleurs (par exemple, le menu fait 100px, tu mets 100px en verts puis le reste en blanc), et tu la positionnes du côté où la largeur est fixe, avec un repeat-y. Il faudra faire attention à l'interprétation des couleurs en fonction du type de fichier. Je crois que Safari (et IE) restituent mal les couleurs des PNG.

Voilà !
Sujet clos
Aller à