28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous.

Comme des images valent mieux que des explications, voilà le problème que je rencontre avec IE :

sous FF, pas de problème
upload/6534-CaptureFF.jpg

sous IE, problème !
upload/6534-CaptureIE.jpg

le code HTML :


<html>
	<head>
		<link href="test.css" media="screen" rel="Stylesheet" type="text/css" />	
	</head>
	<body>
	<div id="conteneur">	
		<div id="menu">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut</p>

		</div>
		<div id="parag">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
			dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
			nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
			vel illum dolore eu feugiat nulla
			 facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit a
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
			dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
			nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
			vel illum dolore eu feugiat nulla
			 facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit a
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
			dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
			nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
			vel illum dolore eu feugiat nulla
			 facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit a</p>	
		</div>
	</div>
	</body>
</html>


Le code CSS :

#conteneur
{
width: 620px;
margin: 0 auto;
background-color: yellow;
}

#menu
{
float: left;
width: 120px;
background-color: blue;
margin: 0px;
padding: 0px;
}

#parag
{
margin-left: 120px;
width: 500px;
background-color: red;
}


Remarque : je VEUX voir le fond jaune du div conteneur.

Quelqu'un aurait une solution pour éviter ce décalage ?

Merci d'avance.
Salut,

essaie de rajouter display:inline; sur le flottant pour corriger un défaut de IE.
tu peux aussi masquer les débordements sur les deux divs: overflow:hidden

Si ça ne change rien essaie d'inverser l'ordre d'affichage des divs et de changer le flottant en non-flottant et vice-versa
Bonjour,
la marge gauche de #paraph ne te sert a rien puisque le bloc menu est
flottant à gauche, ce qui signifie que paraph devrait se placer à sa droite
s'il a suffisamment d'espace.
Tu as dû faire une confusion avec un menu en position:absolute.
Modifié par Hermann (02 Mar 2007 - 19:28)
Hermann a écrit :
la marge gauche de #paraph ne te sert a rien puisque le bloc menu est flottant à gauche, ce qui signifie que paraph devrait se placer à sa droite s'il a suffisamment d'espace.

Faux.
Le menu flottant ne repoussera pas le bloc, mais uniquement son contenu de type en-ligne (ici, le texte). Une fois le flottant fini, le reste du texte viendra se placer en dessous du flottant.

La marge à gauche de div#parag est donc utile (à noter qu'on aurait pu se passer de marge, et utiliser à la place un contexte de formatage bloc). Par contre, la largeur fixe pour div#parag est à la fois inutile et dangereuse. La supprimer aussi sec.


Ah, tant que j'y suis : la largeur fixe sur div#parag confère le layout à ce bloc. Le flottant, pour sa part, déclenche un bug joliment nommé le Three Pixel Text Jog, ou décalage de trois pixel du texte jouxtant un flottant. Mais à cause du layout sur div#parag, le décalage de trois pixels est appliqué au bloc div#parag dans son ensemble et pas juste au texte qu'il contient. div#parag a donc besoin, à ce moment là, de 623px de large pour tenir (500+120+3), ce qui n'est pas évident dans un bloc de 620px de large. Donc tout fout le camp. Smiley cligne
Florent V. a écrit :

Faux.
Le menu flottant ne repoussera pas le bloc, mais uniquement son contenu de type en-ligne (ici, le texte). Une fois le flottant fini, le reste du texte viendra se placer en dessous du flottant.
La marge à gauche de div#parag est donc utile (à noter qu'on aurait pu se passer de marge, et utiliser à la place un contexte de formatage bloc).

Aiee, je suis encore tombé dans le piège!
Merci pour ce petit éclaircissement, je n’ai pas encore bien assimilé ce
comportement même si je l’ai pourtant déjà rencontré lors de l’application
d’un background sur le bloc non flottant.
J’avais résolu ça par un overflow:auto (un cas de contexte de formatage a
priori) et j’ajout d’une propriété conférant le layout pour IE.
Modifié par Hermann (03 Mar 2007 - 01:16)