decalage d'elements de page web quand insertion d'images dans un div [Résolu]

[sohnic]

Bonjour,
J'ai une page web dont l'ensemble du contenu doit toujours être centré dans la fenêtre du navigateur.
Cette page se compose de trois parties (3 div). Ces 3 div sont déclarés en position absolute.
Ces 3 div sont inclus dans un div, qui lui est en position:relative.
Ce système me permet de conserver le centrage.

Code :

1
2
3
4
5
6
7
8
9
10
11
 
<div relative>
<div1 absolute>
</div>
 
<div2 absolute>
</div>
 
<div3 absolute>
</div>
</div>

(bien sur ceci n'est pas le code réel ! Les div sont associés à des id, gérées par une feuille de style. C'est juste pour comprendre ce que j'ai fait).

Le 3eme div, se remplit à l'aide de javascript:
Le div 1 contient des liens associés à des onclick.
Le onclick déclenche un document.getElementById('div3').innerHTML="contenu du div3".

Tout marche très bien tant que je remplis le div3 avec du texte.
Mais si je le remplis avec des images, les div1 et 2 se décalent vers la gauche, ce qui est plutôt fâcheux...

Ceci est vrai avec Firefox et IE9. Je n'ai pas testé d'autres navigateurs.

Merci pour vos lumières !!

Sohnic

[12monkeys]

Bonsoir

On peut avoir une page en ligne pour constater ton problème, à défaut le 'vrai' code HTML et CSS ?

[sohnic]

Bonjour,
le site se situe là :
http://www.hdm-architecture.fr/new/ (Menu Projets)

Il y a un peu d'ajax, mais lors des tests j'avais remplacé ces parties là par des document.getElementById('div').innerHTML=contenu, histoire de vérifier que ça ne venait pas de là.

En fait après une dure soirée (!), j'ai constaté qu'il n'y avait pas de décalage avec des photos de moins de 150 px de large, et que je supprimais ce décalage en déclarant une hauteur à mon div qui les contient.

Je ne tague pas encore Resolu, histoire de voir s'il y a une explication rationnelle à ce problème.

J'ai essayé à peu près tous les doctype possible sans constater la moindre différence de comportement.

Merci !

Sohnic

[12monkeys]

Bonjour

j'ai essayé de voir ton problème mais je n'arrive pas à le reproduire, même en supprimant la hauteur fixe sur #texte. Testé avec firefox 4. Peux tu le reproduire ?

Sinon quelques conseils : pourquoi utiliser la position absolute ? Ici je n'en vois pas l'intérêt. Pour centrer ta page il y a plus simple : http://css.developpez.com/faq/?page=...orizontalement
Pour positionner le reste de tes éléments : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

Sinon les tableaux ce n'est pas non plus fait pour de la mise en page : http://xhtml.developpez.com/faq/inde...u_mise_en_page

[sohnic]

Bonjour,
C'est bizarre. J'ai fait exactement ce que tu dis (j'ai commenté la hauteur dans le div texte) et j'ai à nouveau le décalage. J'ai mis en ligne l'ensemble là : http://192.168.1.92/hdmfortest/
Et quand je vais sur projets, j'ai bien le décalage avec firefox 4 et IE9. Ou est-ce spécifique à un problème sous seven ?

Tes liens sont très intéressants, particulièrement le 2eme. Il répond à des besoins que j'ai très fréquemment. Vu que j'ai réglé mon problème dans l'immédiat, je vais en rester là pour ce site. Mais à l'occasion, je testerai les méthodes que tu me donnes, car je pense que de nouveaux problèmes arriveront dans le futur.
Je complèterai alors ce post avec une nouvelle vision des css.

Merci beaucoup, j'ai très apprécié le partage d'information.

S.

[Bisûnûrs]

Envoyé par sohnic

J'ai mis en ligne l'ensemble là : http://192.168.1.92/hdmfortest/

Adresse locale ..

Et ton problème de décalage, ça ne serait pas dû à l'apparition des scrollbars du navigateur quand il y a beaucoup de contenu ?

[sohnic]

Oups !
http://www.hdm-architecture.fr/hdmfortest/
Je n'ai pas collé la bonne !

Pas idiot du tout ça. Effectivement dans la version sans hauteur fixée (celle du lien ci-dessus), le décalage apparait avec l’ascenseur. Un mystère résolu! Je n'avais même pas remarqué. Le fait de fixer la hauteur impose l’ascenseur systématiquement, et donc pas de décalage.

Merci !

sohnic