Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

[FdS] alignement avec des positions relatives

32 réponses
Avatar
docanski
Bonjour la foule,

Ça fait longtemps que je n'ai autant sué pour trouver une solution à un
problème de positionnement ... et je sèche toujours. En cause le
changement d'affichage avec la ver.3 de Firefox sur une (importante !)
série de pages, problème qui n'existait pas avec les versions
antérieures et qui n'existe d'ailleurs pas non plus avec K-Meleon qui
est pourtant basé sur le même moteur ... mais avec un peu de retard sans
doute.
Voici un exemple de page :
http://mycorance.free.fr/valchamp/amanita_rubescens.htm
On constate que le titre de la page est centré par rapport au texte et
non par rapport à la page. Et c'est là que le bât blesse : il devrait
rester centré par rapport à la page comme le font d'ailleurs tous les
autres navigateurs du marché.
Les règles de style du titre et des 2 calques (l'un pour les photos,
l'autre pour le taxte situé à droite de celles-ci) sont les suivantes :

h1 {background:#cccfff;font-size:16px;border:2px
outset;padding:2px;padding-left:7px;padding-right:7px;text-align:center;
-moz-border-radius:7px;border-radius:7px;display:inline}
#photo
{background:#f2d898;color:#000;float:left;width:340px;margin-top:31px;margin-left:7px;padding-top:5px;border:2px
outset #5e5e5e;border-bottom:1px solid
#5e5e5e;font-size:14px;-moz-border-radius:13px;border-radius:13px}
#descr
{position:relative;width:388px;padding-left:7px;padding-right:7px;float:right;text-align:left;height:auto;margin-top:31px}

Ces éléments se situent eux-même dans un calque principal et on peut
donc régler en fonction d'un élément parent si besoin.

Logiquement, ce sont les règles de H1 qui devraient me permettre de le
positionner par rapport aux 2 autres ou par rapport à cet élément
parent, c.a.d. faire descendre #photo au niveau du texte pour pouvoir se
centrer. Et c'est là que je sèche ... :-(
La seule solution que j'ai trouvé est le retour chariot (en code html)
après ce titre mais je ne peux pas l'adopter : il existe près de 2000
pages avec cette même structure ! Il faut donc en passer par la FdS.

Une idée, une solution ?

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/

10 réponses

1 2 3 4
Avatar
m-e-
On 22 oct, 16:15, docanski
wrote:
Ça fait longtemps que je n'ai autant sué pour trouver une solution à un
problème de positionnement ... et je sèche toujours. En cause le
changement d'affichage avec la ver.3 de Firefox sur une (importante !)
série de pages, problème qui n'existait pas avec les versions
antérieures et qui n'existe d'ailleurs pas non plus avec K-Meleon qui
est pourtant basé sur le même moteur ... mais avec un peu de retard s ans
doute.



En fait ce "problème" concerne Firefox 3.1 et versions suivantes,
ainsi que d'autres navigateurs comme Safari 3.

Voici un exemple de page :http://mycorance.free.fr/valchamp/amanita_rubes cens.htm
On constate que le titre de la page est centré par rapport au texte et
non par rapport à la page. Et c'est là que le bât blesse : il devra it
rester centré par rapport à la page comme le font d'ailleurs tous les
autres navigateurs du marché.



Une capture d'écran : <http://browsershots.org/screenshots/
e001ffc71e6a530b39f10454656fc481/>.

En fait il s'agit là du rendu conforme à la norme : la ligne (ici "h1 "
avec "display: inline") présente avant un élément flottant (ici
"#photo" avec "float: left") est redistribuée sur le coté de l'élém ent
flottant.

Cf la spécification (en anglais) : <http://www.w3.org/TR/CSS2/
visuren.html#floats>, "Any content in the current line before a
floated box is reflowed in the first available line on the other side
of the float. In other words, if inline boxes are placed on the line
before a left float is encountered that fits in the remaining line box
space, the left float is placed on that line, aligned with the top of
the line box, and then the inline boxes already on the line are moved
accordingly to the right of the float (the right being the other side
of the left float) and vice versa for rtl and right floats. "

[...]

Logiquement, ce sont les règles de H1 qui devraient me permettre de le
positionner par rapport aux 2 autres ou par rapport à cet élément
parent, c.a.d. faire descendre #photo au niveau du texte pour pouvoir se
centrer. Et c'est là que je sèche ... :-(
La seule solution que j'ai trouvé est le retour chariot (en code html)
après ce titre mais je ne peux pas l'adopter : il existe près de 2000
pages avec cette même structure ! Il faut donc en passer par la FdS.



Comme cela concerne des navigateurs qui semblent relativement
respectueux de la norme CSS2, vous pourrez peut-être utiliser le
pseudo-élément ":after" pour afficher un bloc invisible après votre
titre, à peu près équivalent à votre "<br/>". Toutefois, je ne suis
pas sûr que ce soit la meilleure solution, ni comment elle se
comportera sur les différents navigateurs. En voici une ébauche :
<code>
h1:after {
content: "";
display: block;
}
</code>
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
m-e- ecrit ce qui suit en ce 23/10/2009 09:20 :

En fait ce "problème" concerne ... d'autres navigateurs comme Safari 3.



Ah bon ?! Aussi !

En fait il s'agit là du rendu conforme à la norme : la ligne (ici "h1"
avec "display: inline")



Obligé pour ne pas avoir un bloc qui prend toute la largeur de la page.

présente avant un élément flottant (ici
"#photo" avec "float: left") est redistribuée sur le coté de l'élément
flottant.



Mais ce comportement n'existait pas sous les versions précédentes du
moteur Gecko et cette caractéristique était pourtant bien connue des
développeurs :-( J'ai du mal à comprendre que ceux-ci n'aient découvert
cette spécification qu'aujourd'hui, près de 10 ans après la sortie de
CSS2 ... et j'enrage parce que ces pages ont été construites en fonction
d'une croyance bien établie à la sortie des premières moutures du
navigateur Mozilla, croyance consistant à affirmer qu'il était
respectueux des normes.

Cf la spécification (en anglais) : <http://www.w3.org/TR/CSS2/
visuren.html#floats>, "Any content in the current line before a
floated box is reflowed in the first available line on the other side
of the float.



C'est plutôt illogique, me semble-t'il, car on peut se poser la question
de savoir pourquoi devant la seconde boîte et non la première
puisqu'elles sont toutes deux flottantes.

In other words, if inline boxes are placed on the line
before a left float is encountered that fits in the remaining line box
space, the left float is placed on that line, aligned with the top of
the line box, and then the inline boxes already on the line are moved
accordingly to the right of the float (the right being the other side
of the left float) and vice versa for rtl and right floats. "



Là, mon anglais limité ne me permet pas de bien comprendre, mébon ...

<code>
h1:after {
content: "";
display: block;
}
</code>



Le problème est que ce second élément est impossible à styler séparément
pour le rendre invisible ; dans le cas présent, il hérite des styles du
premier H1 et prend donc toute la largeur de la page :-(

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
Pascale
docanski écrivait
news:hbpq06$p47$:

On constate que le titre de la page est centré par rapport au texte et
non par rapport à la page. Et c'est là que le bât blesse : il devrait
rester centré par rapport à la page comme le font d'ailleurs tous les
autres navigateurs du marché.



Avec Opera 9 et Opera 10, le titre est centré par rapport au texte, donc le
problème est le même.

--
Pascale
Avatar
SAM
Le 10/23/09 1:18 PM, docanski a écrit :
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
m-e- ecrit ce qui suit en ce 23/10/2009 09:20 :

En fait ce "problème" concerne ... d'autres navigateurs comme Safari 3.



Ah bon ?! Aussi !



En bien pire !
À moins que tu n'aies modifié qque chose depuis,
Safari coupe le titre en 2 : <http://cjoint.com/?kxpCvCxnLj>

En fait il s'agit là du rendu conforme à la norme : la ligne (ici "h1"
avec "display: inline")



Obligé pour ne pas avoir un bloc qui prend toute la largeur de la page.



Pour le moment c'est OK avec "mon" Firefox 3.0.4
<http://cjoint.com/?kxpDGgns0D>


présente avant un élément flottant (ici
"#photo" avec "float: left") est redistribuée sur le coté de l'élément
flottant.



Mais ce comportement n'existait pas sous les versions précédentes du



Bon ... et sans flottant ?
comme ça :
<http://cjoint.com/?kxqmfS3aV5>
ça passe ?

--
sm
Avatar
rm
Salut,
Le vendredi 23 octobre 2009 à 15:06, Pascale a écrit :

docanski écrivait
news:hbpq06$p47$:

On constate que le titre de la page est centré par rapport au texte et
non par rapport à la page. Et c'est là que le bât blesse : il devrait
rester centré par rapport à la page comme le font d'ailleurs tous les
autres navigateurs du marché.



Avec Opera 9 et Opera 10, le titre est centré par rapport au texte, donc le
problème est le même.



Opera 5.11, 6.02, 7.54, 9.60 et au delà, Chrome 4, Safari 4 font comme IE8
et Firefox 3.

Par contre, les vieux Firefox 0.8, 1.5.0.7 et 2.0.0.14 et et le jeune Amaya
11 affichent bien le titre centré dans la page. Et pour compliquer la
donne, Opera 8.02, 9.10, 9.27, 9.52 aussi :-D

Bon courage pour les rapports de bug...

@+
--
rm
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
SAM ecrit ce qui suit en ce 23/10/2009 16:14 :

En bien pire !
À moins que tu n'aies modifié qque chose depuis,



Rien changé depuis des années dans cette mise enpage, j'attendais une
proposition pour régler ce problème.

Pour le moment c'est OK avec "mon" Firefox 3.0.4



Ben oui, c'est depuis que j'ai mis à jour pour la ver 3.5 que j'ai
constaté la cata.

Bon ... et sans flottant ?



J'évite autant que possible les fixes et dans le cas de cette page,
c'est d'ailleurs impossible car les boîtes ont presque toujours des
hauteurs différentes.

comme ça :
<http://cjoint.com/?kxqmfS3aV5>
ça passe ?



Sur ton exemple, oui, mais dans mes pages, non pour plusieurs raisons :
il existe d'autres boîtes sous "photo" et "descr" et elles flottent en
fonction de la hauteur variable des 2 premières. Les styles de ces pages
sont créés dans le but d'avoir des boîtes "élastiques" en fonction de
leur contenu. Si tu regardes le code source, tu les verras sous le nom
de "com" et "avis". Dans certaines pages, il existe même une boîte
supplémentaires située à la suite des autres pour y insérer une ou
plusieurs photos supplémentaires. J'ajute alors cette ligne de code
selon les besoins. C'est le cas dans l'exemple que j'ai donné.
La solution doit nécessairement passer par du "flottant" sauf,
éventuellement, pour H1 puisqu'il est en tête de page.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Pascale ecrit ce qui suit en ce 23/10/2009 15:06 :

Avec Opera 9 et Opera 10, le titre est centré par rapport au texte, donc le
problème est le même.



Ah oui, tiens ! je n'avais même pas remarqué avec ma ver 9.52.
Une distraction ... :-(
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
rm
Salut,
Le vendredi 23 octobre 2009 à 15:06, Pascale a écrit :

docanski écrivait
news:hbpq06$p47$:

On constate que le titre de la page est centré par rapport au texte et
non par rapport à la page. Et c'est là que le bât blesse : il devrait
rester centré par rapport à la page comme le font d'ailleurs tous les
autres navigateurs du marché.



Avec Opera 9 et Opera 10, le titre est centré par rapport au texte, donc le
problème est le même.



Opera 5.11, 6.02, 7.54, 9.52, 9.60 et au delà, Chrome 4, Safari 4 font
comme IE8
et Firefox 3.

Par contre, les vieux Firefox 0.8, 1.5.0.7 et 2.0.0.14 et et le jeune Amaya
11 affichent bien le titre centré dans la page. Et pour compliquer la
donne, Opera 8.02, 9.10, 9.27 aussi :-D

Bon courage pour les rapports de bug...

@+
--
rm
Avatar
Pascal
docanski a écrit :
Bonjour la foule,



Bonjour,

Voici un exemple de page :
http://mycorance.free.fr/valchamp/amanita_rubescens.htm
On constate que le titre de la page est centré par rapport au texte e t
non par rapport à la page. Et c'est là que le bât blesse : il dev rait
rester centré par rapport à la page comme le font d'ailleurs tous l es
autres navigateurs du marché.




Ben non, pas s'il est "inline" !
Pourquoi ne pas le déclarer de type "block" avec une marge ?

Cordialement,
Pascal
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Pascal ecrit ce qui suit en ce 24/10/2009 11:36 :

Bonjour,



Yo !

Ben non, pas s'il est "inline" !
Pourquoi ne pas le déclarer de type "block" avec une marge ?



Si je le déclare comme block, il prend la totalité de la largeur de
page. Je ne peux par ailleurs pas lui attribuer une dimension et une
marge car sa largeur est variable en fonction de la longueur du titre

Cordialement,



Cela va de soi ...
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
1 2 3 4