28221 sujets

CSS et mise en forme, CSS3

Problème de layout: interprétation différente Firefox et IE

Salut,

Je veux faire un truc tres simple, disons
- mettre toto en haut a gauche de ma page
- mettre tutu en haut a droite
- avoir du texte au dessous de tout ca

Moi, chuis bete, je fais une div float gauche, une div float droite et une div avec une marge top de 50 px.
C'est tout beau avec IE mais incroyable sous firefox, les float sont A L'INTERIEUR du div de texte Smiley eek Smiley eek

J'ai trouve des solutions de contournement, mais j'ai peur de passer a cote d'une notion foncdamentale, alors si une bonne ame peut m'expliquer .

Voici mon code, tres court:

page.html

<!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">
	<head>
		<title>test js carnet 3</title>
		<meta http-equiv="Content-Type" content="application/xhtml+xml ; charset=UTF-8"/>
		<link rel="stylesheet" type="text/css" href="./conf/stylesheet/template_courant/styles.css" media="screen" title="Defaut"/>
	</head>
	<body>
		<div class="floatgauche">
			TOTO
                        TEXTE DU BLOC FLOTTANT HAUT GAUCHE
		</div>
		<div class="floatdroit">
                        TUTU
			TEXTE DU BLOC FLOTTANT HAUT DROIT
		</div>	
		<div id="cadreprincipal">
			TEXTE DU BLOC PRINCIPAL 
			- TEXTE DU BLOC PRINCIPAL 
			- TEXTE DU BLOC PRINCIPAL 
			- TEXTE DU BLOC PRINCIPAL 
			- TEXTE DU BLOC PRINCIPAL -
		</div>
</body>
</html>


et styles.css

* {margin:0;}

div#cadreprincipal{
margin-top:45px;
}

.floatdroit{
float:right;
}

.floatgauche{
float:left;
}


Merci!
Modifié le 29 Jan 2005 - 15:40
Bonjour et bienvenue à toi sur ce forum,

As-tu pensé à lire le post épinglé en tête du forum: Méthodologie à lire avant de poster dans ce salon il y a un moyen d'isoler les problèmes de mises en page. Cela permettra surtout de trouver la nature du problème, car je crains que ton titre ne sois pas adapter à la situation et qu'il ne faille le modifier. Smiley cligne N'oublie pas que la recherche est ton amie également. Smiley cligne

Je te conseille un peu de lecture sur les positionnements, en partculier float sur openweb: http://openweb.eu.org/articles/initiation_float/
Tu noteras la présence de la propriété width.
Modifié le 29 Jan 2005 - 15:21
Administrateur
a écrit :
Avant que je ne me jette par la fenetre
Humm voici un titre très explicite qui va certainement faciliter les recherches futures Smiley murf
Ok ok, j'ai change mon titre, je m'excuse, je dois craquer Smiley smile ; meme si j'ai du mal a trouver quelque chose de tres explicite pour mon sujet.
Pourquoi est-ce que je devrais mettre une "width" sachant qu'a l'interieur j'ai du contenu en-ligne, donc normalement la boite s'adapte au contenu non?

Il y a quelque chose qui m'echappe.

Edit: il y a vraiment quelque chose qui doit m'echapper, j'ai beau specifier des largeurs a mes boites, ca me donne exactement le meme resultat, snif.

Sylvain
Modifié le 29 Jan 2005 - 15:36
Administrateur
Désolé si tu me trouves désagréable et chipoteur mais :
- si tu as fait l'effort d'éditer ton titre (et je t'en remercie), pourquoi n'as-tu pas pris le temps d'écrire "problème" plutôt que "pbm" ?? Smiley lol
Ton clavier manque de touches ? Tu es atteint de "SMS-ïte" ? Smiley biggrin
Ok, ok (bis), pas sur la tête, j'ai rechangé mon titre et je l'ai même enrichi en agents informatisants (tant que j'y étais Smiley smile , on ne pourra pas dire que je n'essaie de me racheter.
Cela dit, je fais une certaine différence (pour ne pas dire une différence certaine) entre abréviations et écriture SMS. Mais bon, c'est hors sujet et histoire de chipoter aussi.

Sylvain.
1. Un élément qui devient flottant devient du même coup un élément bloc
2. Un élément flottant quin'a pas de largeur implicité (une image en a une) doit avoir une largeur explicite
3. dans tous les cas, ton contenu va effectivement venir se "glisser" dans l'espace laissé disponible par tes deux éléments flottants (sauf si tu spécifie pour tous deux des width: 50%, auquel cas il n'y a plus de place Smiley cligne ) : c'est fait pour ça, justement.

Pour éviter que ton contenu ne puisse venir se placer dans l'espace disponible à côté du flottant qui le précède, il faut agir sur sa propriété clear. Voir l'article cité par Raphaël. Ici, un clear:both sera tout indiqué.

Sinon, tu pourrais enlever le <meta http-equiv="Content-Type"
content="application/xhtml+xml"/> ? Il me fait très très mal aux yeux (il n'a aucun sens).
Merci de votre réponse!
Je m'en veux d'insister, mais je ne comprends pas:

Je pars des principes suivants:
-mes boites flottantes doivent se placer selon leur conteneur, ici body
-ma boite "cadreprincipal", dont la marge haute est de 50px, doit se decaler de 50px par rapport a sa boite englobante (body aussi)

Je ne vois pas pourquoi mes float se positionnent par rapport a cadreprincipal, cette boite n'etant pas leur conteneur.

a écrit :

Sinon, tu pourrais enlever le <meta http-equiv="Content-Type"
content="application/xhtml+xml"/> ? Il me fait très très mal aux yeux (il n'a aucun sens).


Pouvez-vous m'expliquer? Je me suis base sur ce passage du w3c:
http://www.w3.org/TR/xhtml-media-types/#application-xhtml-xml

Merci encore.
Sylvain
sylv1 a écrit :

Je ne vois pas pourquoi mes float se positionnent par rapport a cadreprincipal, cette boite n'etant pas leur conteneur.


Reprenons.

Tes 3 <div> se placent selon le mécanisme du flux (les deux flottants se placent en flux, puis flottent, ce qui est simplement un comportement spécifique dans le flux).

Que fait le moteur CSS ?

1. Il aborde le contenu HTML dans l'ordre de l'arbre du document. Il commence donc par <div class="floatgauche">. Il se dit: ok, je le place le plus à gauche possible dans son conteneur, autrement dit dans le body, et je lui donne la largeur indiquée. Je marque sur mon post-it : ne pas oublier que le contenu qui suit a le droit de se placer à côté, et non en-dessous.
2. Il passe ensuite à <div class="floatdroit">. Il lit ta CSS, et se dit ok, je le place le plus à droite possible dans son conteneur avec sa largeur indiquée... Ah, attention : j'ai noté sur mon post-it que la boîte précédente était flottante, et donc que je dois le placer dans l'espace laissé libre à côté de celle-ci. Et je renote sur mon post-it que, s'il reste de la place à côté de floatdroit, l'élément suivant peut s'y mettre.
3. Il aborde ensuite <div id="cadreprincipal">. Il se dit: reste-t-il de la place ? Oui. alors je l'enfonce dans l'espace laissé libre ci-dessus

sylv1 a écrit :


Sinon, tu pourrais enlever le <meta http-equiv="Content-Type"
content="application/xhtml+xml"/> ? Il me fait très très mal aux yeux (il n'a aucun sens).


Pouvez-vous m'expliquer? Je me suis base sur ce passage du w3c:
http://www.w3.org/TR/xhtml-media-types/#application-xhtml-xml


Oui. Un document XHTML1.0 devrait être servi avec ce type de contenu. Servi, c'est à dire que le serveur devrait envoyer cette méta-donnée via un en-tête HTTP content-type. Un en-tête HTTP, pas une balise <meta> Smiley cligne

La méta-donnée est certes tout à fait logique, pour la forme, lorsqu'elle accompagne l'en-tête HTTP. Mais elle ne sert à rien toute seule. Elle n'est pas exploitée dans ce cas par les navigateurs actuels, et n'empêche pas ton document d'être traité en tant que text/html.

En fait, en imaginant un navigateur qui en tiendrait compte, elle ne serait exploitée que lorsque le document a été enregistré localement par un utilisateur, et consulté à partir de là, donc sans envoi d'en-tête HTTP par le serveur d'origine.

Bref... Sous la forme où tu l'emploies, elle est inutile et te donne l'illusion de faire du "vrai" XHTML. Autant s'en passer et assumer tranquillement le fait de faire du XHTML qui est en réalité du HTML... mal écrit Smiley cligne
Modifié le 29 Jan 2005 - 16:39
Merci pour l'explication sur la balise meta, je pensais bien faire... (de la meme maniere que la balise avec le charset est lue, je pensais que celle-ci servait aussi).

Concernant mon probleme de CSS, merci aussi, je me demande quand meme si vous voyez de quoi je veux parler, je mets donc une copie d'ecran obtenue avec Firefox (j'ai ajoute une bordure a cadreprincipal et un fond aux float).
Votre deroulement de l'activite du moteur CSS n'explique pas du tout pourquoi mes float se retrouvent avec une marge de 45px. Et c'est ca que je ne m'explique pas.

upload/854-firefoxscree.JPG

Selon moi, le resultat de la copie d'ecran serait si les 2 float etaient dans la div "cadreprincipal".

Edit: Non decidement, sans hack je n'y arrive pas Smiley bawling Ma reconnaissance eternelle a qui me filera un tuyau...

Sylvain
Modifié le 30 Jan 2005 - 18:59
Re-bonjour a tous et bonne semaine,

Bon je reviens sur le forum car decidement ce truc me turlupine, sans bidouille je n'y arrive pas.
Impossible de comprendre pourquoi sur Firefox, mes deux boites flottantes (en haut a gauche et en haut a droite) sont decalees de la valeur de la marge que je specifie pour la boite "cadreprincipal".
Tout se passe comme si j'avais declare mes flottants dans la boite "cadreprincipal", or ce n'est pas le cas.

Je passe a cote d'un truc surement tout bete mais quoi? Smiley decu

Bref, desormais en fait je donne ma reconnaissance eternelle a qui m'aidera a creer une page composee de 3 boites:
-une en haut a gauche
-une en haut a droite
-une 3e en dessous qui prend toute la largeur de la page et decalee de n pixels par rapport au haut de la page.
Le tout sans hack.

Merci
Sylvain
Sujet clos
Aller à