OVH Cloud OVH Cloud

[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/

2 réponses

1 2 3 4
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
SAM ecrit ce qui suit en ce 28/10/2009 14:26 :

Alors ?
Ça marche ?



Salut Steph et désolé pour le retard du retour d'expérience : pas mal de
boulot depuis que je suis remonté dans le nord, problèmes de santé avec
mon épouse et puis je ne fonctionne ici que sous Ubuntu. Résultat, je ne
suis passé qu'en coup de vent de temps à autre sur les groupes de
discussions et n'avait d'ailleurs pas l'opportunité de reprendre le
sujet qui me tracassait. En effet, Ubuntu 9.04 n'intégrait que FF 3.0 et
je ne savais donc pas contrôler le résultat. J'ai mis à jour vers 9.10
(qui est devenu plus lent que la version précédente :-( ) qui intègre FF
3.5 puis installé IE 6 dans une petite partition avec un Ouindo$e 2k.
Dès lors, j'ai pu faire les tests et ils se révèlent concluants en ne
modifiant finalement que peu de choses dans la FdS : le margin:auto dans
h1 et l'ajout du hack
/* hack IE (styles pour autres brouteurs) */
h1 { display:table; }
/* fin hack */


ont suffi à régler le problème de centrage de titre. J'en ai profité
pour faire quelques petites modifications cosmétiques et je mettrai
incessament sous peu la FdS corrigée en ligne.
J'ai vérifié sous Ouindo$e avec IE 5 (beurk mais c'est centré) IE 6
(correct, sans plus, mais centré aussi), FF 3.5, Seamonkey 1.1.14 et
K-Meleon 1.4 et tout baigne. Zut, je viens de me rendre compte que j'ai
oublié Opera :-(. Bon, ce sera pour plus tard et je demanderai par la
même occasion aux contributeurs de ce forum de bien vouloir me donner un
retour sous IE 7 et IE 8.
Sous Linux, tout baigne avec FF 3.5, Seamonkey 1.1.17 et Galeon. Je n'ai
évidemment pas vérifié avec les quelques autres navigateurs
confidentiels du manchot, c'est sans intérêt.
Merci pour ton aide !

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
lephilo
Pascal wrote:

La solution immédiate, c'est d'encapsuler le titre dans un "div" qui,
lui, sera de type "block". Mais, évidemment, ça oblige à recoder toutes
les pages. A moins que ce soit des templates générées avec un script
serveur, ou bien que le "div" soit généré dynamiquement en cours
d'affichage par un script client.

Désolé, j'ai pas d'autres lumières !



Bonjour.

Dans le h1, en augmentant la taille du font-size, à partir d'une
certaine taille le titre se trouve centré par rapport à la page.

Sous Mac OS X 10.5.8
Dans Firefox 3.5.5 c'est à partir de 25px
Dans Opéra 10.01 c'est à partir de 26px

Si quelqu'un peut dire pourquoi ?

--
Le Philo http://druidie.org
Pssiittt : Buver la potion pour me répondre
1 2 3 4