Page 1 sur 2
positionnement des blocs dans Firefox
Publié : 28 sept. 2007, 01:10
par tontonpschitt
Je travaille sous Vista 32bits. Je suis en train de créer quelques pages html que je teste dans Fx (v2.0.0.6) et IE (v7.0.6000.16512). Je constate à la visualisation d'un bloc positionné en relatif que Fx n'affiche pas correctement un tel bloc, ce que fait par contre IE. Est-ce normal ? Si mes connaissances sont encore exactes (?), la valeur "relative" fait un décalage par rapport à la position normale dans le flux (comme IE) et non pas par rapport à l'origine de la page (comme Fx), ce qui équivaut dans ce cas à un positionnement absolu.
Si je n'ai pas la berlue ou quelque chose qui y ressemble voici une illustration avec le code suivant pour une page de démo à passer dans les deux navigateurs.
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >
<title>démonstration</title>
<style type="text/css">
#page {height:700px; width:1000px; }
#bandeau {float:left; background-color:#0000ff; width:180px; height:690px}
#logo {float:right ; height:180px ; width:820px ; background-color:#dddddd; text-align:center}
#list {position:relative; left:50px; top:100px; width:550px; height:300px; margin:0px; padding:0px; background-color:red}
</style>
</head>
<body style="margin:5px">
<div id="page">
<div id="bandeau"> </div>
<div id="logo"> </div>
<div id="list">blablabla</div>
<!-- élément hors flux -->
<div id="corps1" style="text-align:center"> </div>
</div>
</body>
</html>
Alors qui ne va pas bien, moi ou Fx?
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)
Publié : 28 sept. 2007, 02:12
par Mori
salut,
a) je vais déplacer dans le bon forum. mets ton site en ligne pour que des compétents te renseignent de bon aloi.
b) un avant-goût
http://validator.w3.org/
c) je déplace dans la bonne section
Publié : 28 sept. 2007, 08:12
par Benoit
Vu que tu fais flotter "bandeau" et "logo", il est tout à fait possible que "list" soit considérée comme le premier élément dans le flux normal.
Peut-être qu'ajouter un "clear:both" pour le forcer à passer en dessous des éléments flottants fera ce que tu veux.
Publié : 28 sept. 2007, 08:23
par chinon37
Déjà, amha, il y a comme un problème de DTD, non?
Et ça, ça irait pas mieux?:
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>
démonstration
</title>
<style type="text/css">
#page {
height: 700px;
width: 1000px;
}
#bandeau {
background-color: #0000ff;
width: 180px;
height: 690px;
float: left;
}
#logo {
height: 180px;
width: 820px;
background-color: #dddddd;
text-align: center;
float: right;
}
#list {
margin: 0px 0px 0px 180px;
padding: 0px;
left: 50px;
top: 100px;
width: 550px;
height: 300px;
background-color: red;
}
</style>
</head>
<body style="margin: 5px;">
<div id="page">
<div id="bandeau"></div>
<div id="logo"></div>
<div id="list">
blablabla
</div><!-- élément hors flux -->
<div id="corps1" style="text-align: center;"></div>
</div>
</body>
</html>
Publié : 28 sept. 2007, 08:59
par calimo
Effectivement, on est en mode quirk donc tout peut arriver, mais ce n'est pas le cas ici.
Je ne sais pas pourquoi tu mets une position relative à #list ?
Ensuite, à quoi sert #page ? Tu peux très bien utiliser le body... et je ne pense pas que limiter la hauteur soit une bonne idée (à moins qu'il n'y ait une excellente raison).
Pourquoi un style en ligne sur body ?
#logo n'a pas besoin de flotter...
Voilà qui devrait être mieux :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >
<title>démonstration</title>
<style type="text/css">
body {width:1000px; margin:5px}
#bandeau {float:left; background-color:#0000ff; width:180px; height:690px}
#logo {height:180px ; width:820px ; background-color:#dddddd; text-align:center}
#list {width:550px; height:300px; padding:0px; background-color:red}
#list, #corps {margin-left: 180px}
</style>
</head>
<body>
<div id="bandeau">bandeau</div>
<div id="logo">logo</div>
<div id="list">blablabla</div>
<div id="corps" style="text-align:center">blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla </div>
</body>
</html>
positionnement des blocs dans Firefox
Publié : 28 sept. 2007, 14:58
par tontonpschitt
Merci pour les réponses et leur rapidité ; beaucoup de questions aussi !
Ok pour le changement de rubrique, j'aurai dû y penser mais... Pour le valideur W3c, merci aussi mais je l'utilise déjà systématiquement ;
pour l'instant ce n'est pas encore un site, je cherche une présentation parmis d'autres possibles pour en faire un ou plusieurs "modèles" de pages.
Pour la DTD je suis resté en transitionnel un peu par habitude car il accepte les cadres qui simplifient (selon moi) la présentation dans
certains cas. En passant en strict cela ne change rien au problème posé (dans ma page, j'ai l'ai vérifié). Les modèles proposés fonctionnent effectivement très bien et je vais regarder cela en détail pour en tirer profit.
Pour le float, mon idée était d'éviter autant que possible le hors flux, par principe et en priorité (ma philosophie, mais ne suis pas sectaire ! la preuve : "corps1"), et si je ne mets pas en "float" bandeau et logo, il me semble, dans des essais préalables, que les boîtes se suivent verticalement ce qui m'oblige alors à déclarer les déclarer "inline" mais suis alors embêté pour positionner correctement list. Bref j'ai un peu tourné en rond, puis ai trouvé mon arrangement satisfaisant sous IE, mais... patatras avec Fx !
En ce qui concerne page, il n'est en effet pas indispensable, voir inutile.
Quant au positionnement relatif de list, c'était pour "recaler" le texte vers la droite sans avoir à jouer sur les marges et espaces (padding) dont je crois me souvenir que Fx et Ie ne l'interprètent pas de la même manière.
Je ne suis pas, et loin de là, un maestro en html et css, j'essaie simplement de faire les choses le plus intelligemment et le plus proprement possible à partir de ce que j'ai compris de ces codes et en essayant de respecter les standards ; donc toute suggestion ou remarque sera la bienvenue et enrichira mes connaissances.
Question : qu'est-ce que le mode quirk ?
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)
Publié : 28 sept. 2007, 16:39
par chinon37
le problème au niveau de la DTD était moins le transitional que le fait que tu mélanges du html et du xhtml.
mode quirk
positionnement des blocs dans Firefox
Publié : 28 sept. 2007, 21:41
par tontonpschitt
Ok. Vu ! Je ne comprends pas très bien ce qu'est venu faire le xhtml dans ma DTD. J'ai bêtement recopié cette en-tête d'une autre page sans voir ce schpountz. Sur d'autres pages je n'avais pas mis cette url. Autant pour moi !
Je pense que je vais passer en strict sauf lorsque je voudrai utiliser des "iframe" ; je suis allé sur ton lien... qui m'a conduit sur un autre... etc. J'ai appris plein de choses intéressantes et pense que maintenant je vais m'en sortir seul, sinon je reviendrai ; merci pour tout.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
Re: positionnement des blocs dans Firefox
Publié : 29 sept. 2007, 18:58
par calimo
tontonpschitt a écrit :Ok. Vu ! Je ne comprends pas très bien ce qu'est venu faire le xhtml dans ma DTD. J'ai bêtement recopié cette en-tête d'une autre page sans voir ce schpountz.
Il faut toujours se méfier lorsqu'on recopie, tous les sites ne sont pas forcément des exemples (même les "bons" peuvent avoir des erreurs).
Pour les doctypes, toujours les prendres chez Mr. W3C qui tient une liste :
http://www.w3.org/QA/2002/04/valid-dtd-list.html (celle-ci, on peut la considérer comme correcte...)
Pour ma part j'aurais tendance à préférer le positionnement absolu pour un menu, il y a trop d'inconsistances avec les flottants (norme pas claire sur certains points), même si le positionnement absolu n'est pas toujours l'idéal non plus, mais lorsque c'est bien fait...
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firelimace Firefox/2.0.0.6 (Ubuntu-feisty)
positionnement des blocs dans Firefox
Publié : 29 sept. 2007, 19:18
par tontonpschitt
Oui, tu as raison ! J'essayerai d'être plus attentif la prochaine fois. En ce qui concerne le positionnement absolu, je l'utilise assez souvent, en tout cas chaque fois que je n'arrive pas à faire ce que je veux en restant "dans le flux" ; c'est ma "bouée de secours". Les positionnements que je cherchais à faire me paraissaient tellement "bateau" que je me suis dit qu'avec le flux normal je devais m'en sortir et que de surcroît c'était satisfaisant pour l'esprit. De toute façon je ne regrette rien des difficultés rencontrées, car cela m'a permis d'y voir plus clair dans la manipulation des boîtes... et d'attirer mon attention sur le libellé de la DTD !
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
Publié : 29 sept. 2007, 19:23
par calimo
Moi je dis : vive les CSS3 et leur module
Advanced Layout !
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firelimace Firefox/2.0.0.6 (Ubuntu-feisty)
positionnement des blocs dans Firefox
Publié : 29 sept. 2007, 20:44
par tontonpschitt
Intéressant !
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
positionnement des blocs dans Firefox
Publié : 30 sept. 2007, 22:52
par tontonpschitt
Retour à la case départ !
En étudiant de près les modèles de chinon37 et de Calimo, en les comparant et les triturant j'ai "vu" beaucoup de choses et cela m'a conforté dans ma toute première intervention, à savoir que Fx et IE n'interprètent pas le même code de la même façon. Je croyais cette époque révolue depuis qu'ils sont censés tous les deux interpréter correctement le w3c ! Si j'ai bien assimilé toutes les remarques précédentes, il n'y a pas de problème de DTD et on ne peut pas être en mode quirk. Vrai ?
Pour faciliter la compréhension j'ai recopié le style dans les boîtes.
Pour chinon37 je constate : bandeau et logo flottent ; il n'y a pas de problème IE et Fx affichent la même chose ; par contre pour list qui ne flotte pas le positionnement est complètement différent : dans IE la boîte vient se placer sous logo (ce qui parait logique dans le flux) et se positionner accolée à la droite de bandeau (ce qui parait aussi logique dans le flux) ; par contre dans Fx list va se positionner en début de page, sous logo et bandeau, comme si logo et bandeau étaient sortis du flux du fait de leur propriété float ; cependant cette propriété semble être prise en compte pour l'affichage du texte de list ! En effet la marge gauche
demandée de 180px est trompeuse, car supprimée, elle ne change rien à la présentation ; je pense qu'il doit en être de même pour l'espacement (padding).
Chez Calimo dans lequel la propriété float n'est pas demandée pour logo, et avec Fx, cette boîte se glisse sous bandeau pour être calée
complètement à gauche, et le texte est centré en tenant compte de la propriété float. Par contre la boîte list, qui elle non plus n'a pas la propriété float, est traitée différemment puisqu'elle ne glisse pas sous bandeau mais est accolée à bandeau ; où est la logique ? Sous Ie les deux boîtes sont traitées de la même façon (ce qui me parait logique) et viennent flotter à droite de bandeau.
Qu'est-ce, au final, qui est conforme au w3c ? Et qu'en pensez-vous ?
Pour compléter mes investigations j'ai chargé Opera (que je ne connaissais pas) et testé sur mes exemples ; pour l'instant il réagit exactement comme Fx. Seraient-ils détenteurs de la vérité ?
En ce qui me concerne je crois que je vais adopter le positionnement absolu avec lequel, en principe, il ne devrait pas y avoir de surprise. Mais... je commence à me méfier !
Voici le code (chinon37) :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>
modèle chinon37
</title>
<style type="text/css">
#page {
height: 700px;
width: 1000px;
}
#bandeau {
background-color: #0000ff;
width: 180px;
height: 690px;
float: left;
}
#logo {
height: 180px;
width: 820px;
background-color: #dddddd;
text-align: center;
float: right;
}
#list {
margin: 0px 0px 0px 0px;
padding: 0px;
left: 50px;
top: 100px;
width: 550px;
height: 300px;
background-color: red;
}
</style>
</head>
<body style="margin: 5px;">
<div id="page">
<div id="bandeau">#bandeau {
background-color: #0000ff;
width: 180px;
height: 690px;
float: left;
}</div>
<div id="logo">#logo {
height: 180px;
width: 820px;
background-color: #dddddd;
text-align: center;
float: right;
}</div>
<div id="list">
#list {
margin: 0px 0px 0px 180px;
padding: 0px;
left: 50px;
top: 100px;
width: 550px;
height: 300px;
background-color: red;
}
</div><!-- élément hors flux -->
<div id="corps1" style="text-align: center;"></div>
</div>
</body>
</html>
et le code Calimo :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >
<title>modèle Calimo</title>
<style type="text/css">
body {width:1000px; margin:5px; background-color:#888888}
#bandeau {float:left; background-color:#0000ff; width:180px; height:690px}
#logo {height:180px ; width:820px ; background-color:#dddddd; text-align:center}
#list {width:550px; height:300px; padding:0px; background-color:red; margin-left: 180px}
list, #corps {margin-left: 180px}
</style>
</head>
<body>
<div id="bandeau">bandeau<br>#bandeau {float:left; background-color:#0000ff; width:180px; height:690px}</div>
<div id="logo">logo<br>#logo {height:180px ; width:820px ; background-color:#dddddd; text-align:center}</div>
<div id="list">blablabla<br>#list {width:550px; height:300px; padding:0px; background-color:red}
</div>
<div id="corps" style="text-align:center">blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla <br>#corps {margin-left: 180px}<br>style="text-align:center"</div>
</body>
</html>
Publié : 30 sept. 2007, 22:56
par Benoit
Il y a aussi
Safari sur lequel tu peux tester. C'est le navigateur fourni avec les Mac, mais qu'on peut maintenant essayer aussi sous Windows.
positionnement des blocs dans Firefox
Publié : 30 sept. 2007, 23:21
par tontonpschitt
Ça y est c'est fait ! Il fonctionne comme Fx et Opera !
Mais je lui trouve un défaut rédhibitoire : il parle patois !
Par contre je suis impressionné par Opera.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7