28219 sujets

CSS et mise en forme, CSS3

Div à 50%

Bonjour,

J'ai un petit soucis de mise en forme avec des divs avec une mise en page à 100% de largeur.

Ceci est juste une page de test, qui fonctionne bien sous Firefox mais pas sur IE.
Donc je mets le code ici, pour tester céer une page et copier ce code dedans et dites moi s'il y a une solution pour que ce qui fonctionne sur Firefox puisse fonctionner sur IE aussi.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitionnal.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Untitled Document</title>
	</head>
	<body style="margin:0px;padding:0px;">
		<div style="float:right;background:#ccff00;width:300px;">droite</div>
		<div style="margin-right:320px;margin-left:10px;">
			<div style="float:left;padding:0px;margin:0px;width:50%;background:#cc0000;">gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche</div>
			<div style="margin:0px;padding:0px;margin-left:50%;background:#ffcc00;">centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre</div>
			<div style="clear:both;"></div>
		</div>	
	</body>
</html>


Merci
En faite, le résultat de la mise en page sous Firefox est impeccable mais sur IE non.

Sous IE :
upload/11589-ie.gif

Sous Firefox :
upload/11589-firefox.gif

Je ne comprends pas pkoi Smiley decu
Salut,

2 de tes blocs n'ont aucune dimension, chaque navigateur interprète ça comme il peut, coup de bol pour FF qui fait ce que tu attends !
drazielus a écrit :
Merci,
Mais quelle solution faire, car j'ai tourné çà dans tous les sens et e ne vois pas comment faire.

Dans tous les sens? J'en doute un peu!
Modifié par Hermann (26 Mar 2007 - 19:59)
Sinon, je crois que le doctype utilisé est faux.

Doctype trouvé sur le site du W3C :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

Doctype utilisé pour ta page :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/transitionnal.dtd">


En tout cas, l'URL de la DTD est fausse. Essayez de charger la page suivante pour voir :
http://www.w3.org/TR/html4/transitionnal.dtd

C'est peut-être une cause de rendu en mode Quirks ?
Merci çà fonctionne bien.
Même si çà reste un contournement du bug Smiley cligne

Christian Le Bouler a écrit :
Salut,

petite astuce méthodologique Smiley cligne

Propriété float + IE = problèmes dus à la présence/non présence du haslayout en vue !!!

Donc lecture et marquage de page obligés:

http://www.test.blog-and-blues.org/haslayout/trad_temp.html


Sinon, ajouter zoom:1; au conteneur des blocs gauche et centre


<div style="margin-right:320px;margin-left:10px; zoom:1;">
drazielus a écrit :

Même si çà reste un contournement du bug Smiley cligne



très intéressant comme remarque Smiley rolleyes

Bon, maintenant, une fois que tu auras externalisé tes styles, à tout le moins du body (tout dans le <head> entre <style type="text/css"></style>), voire même du document html lui même (fichier.css lié via la balise <link />). Il vaudra mieux placer la propriété zoom dans une css limitée à IE grâce aux commentaires conditionnels.
Christian Le Bouler a écrit :


très intéressant comme remarque Smiley rolleyes

Bon, maintenant, une fois que tu auras externalisé tes styles, à tout le moins du body (tout dans le <head> entre <style type="text/css"></style>), voire même du document html lui même (fichier.css lié via la balise <link />). Il vaudra mieux placer la propriété zoom dans une css limitée à IE grâce aux commentaires conditionnels.


Je sais bien que je dois mettre en css externe, j'avais précisé que cette page était une page de test.

Merci pour les conseils.
Sujet clos
Aller à