Problème DIV absolute (RESOLU)

[mick883125]

Bonjour,

je suis entrain d'appliquer un nouveau design à mon site: http://www.biographie-peintre-analyse.com/

Et j'ai un petit soucis, j'ai mis en place 2 images (les splashs de peintures), tout fonctionne sur la page d'accueil... pas sur les autres pages car les images bougent. Voici le code en question:

<div style="position:absolute; margin-left: -870px; top: -2600px;">
   <img src="http://u.jimdo.com/www62/o/s33f4b296991f4cd1/userlayout/img/taches-de-peinture-couleurs-splash-compressor.png?t=1423541302" alt="" />
</div>

<div style="position:absolute; margin-left: 826px; top: -2750px;">
   <img src="http://u.jimdo.com/www62/o/s33f4b296991f4cd1/userlayout/img/taches-de-peinture-couleurs-splash-compressor2.png?t=1423540678" alt="" />
</div>

J'aimerais donc que les images restent à la même position sur toutes les pages du site.
Merci d'avance pour l'aide.

[rs53600]

Normal ! Vous positionnez vos 2 DIV en absolute et tout ça dans la DIV sidebar qui est positionnée en relative. Donc vos 2 DIV (et les images qui sont dedans) sont placées par rapport à cette sidebar. Mais la place de cette sidebar dépend du contenu de chaque page. A votre place, je ferais quelque chose comme

Code:


<div style="position:fixed; margin-left: -870px; top: -100px;">
   <img src="http://u.jimdo.com/www62/o/s33f4b296991f4cd1/userlayout/img/taches-de-peinture-couleurs-splash-compressor.png?t=1423541302" alt="" />
</div>
<div style="position:fixed; margin-left: 826px; top: -100px;">
   <img src="http://u.jimdo.com/www62/o/s33f4b296991f4cd1/userlayout/img/taches-de-peinture-couleurs-splash-compressor2.png?t=1423540678" alt="" />
</div>


[mick883125]

Merci pour l'aide. Ce n'est pas tout à fait l'effet que je recherche, moi j'aimerai que les 2 images restent fixe en haut et qu'elles ne défilent pas avec la page.

[rs53600]

Alors, mettez le widget/HTML que vous avez en sidebar (en ajustant les margin-left et top) en début de contenu de chaque page pour qu'il soit toujours à la même position dans la fenêtre.

[mick883125]

Impossible, mon site a bien trop de pages! Par contre, je vais essayer de mettre le code directement dans le HTLM.

[FredVig]

Pourquoi ne pas mettre les 2 splash en arrière-plan, avec la texture ?
Il suffira de fixer celui-ci…
Sans doute voulez-vous que ceux-ci passent devant les textes…
Dans ce cas, la solution proposée par rs53600 permet de fixer les deux splash en haut, comme vous le recherchez. où est le pb ?

[mick883125]

J'ai déjà expliqué ou était le problème. Avec le premier code dans un widget dans la sidebar, les 2 splash changeaient de position selon les pages. Et l'autre solution proposée par rs53600, les 2 splash défilaient avec la page. Donc aucunes des solutions me convenaient.

Là je viens de mettre le premier code directement dans le HTML et ça se rapproche déjà plus de l'effet que je recherchais.

[rs53600]

Ah Oui ! Je n'avais pas vu que vous aviez un design personnel. Évidemment dans ce cas, c'est beaucoup plus pratique de le coller dans le code HTML.

[mick883125]

Merci tout de même de ton aide!

[FredVig]

euh…
ça doit être un problème de vocabulaire, car actuellement, vos 2 images défilent avec la page.
mais peu importe.

[mick883125]

Non, les images ne défilent pas avec la page, elles restent bien en haut et c'est ce que je voulais. Problème résolu.

[FredVig]

Oui… c'est bien ce qui me semblait ! Il me semble important d'utiliser les mêmes termes dans un forum, pour pouvoir suivre.
Donc, actuellement, lorsque vous utilisez les ascenseurs, vos images gardent leur position par rapport au sommet de votre page.
Donc, "elles défilent avec la page", lorsque la page défile, elles la suivent…
> c'est la position par défaut (absolute, ou static)

"rester fixe" est généralement utilisé pour indiquer un élément qui reste fixe… par rapport à la fenêtre du navigateur !
Lorsque la page défile dans la fenêtre, l'élément ne bouge pas par rapport à la fenêtre, mais "défile par rapport à la page"
> d'où la position "fixed" qui permet ce comportement

Quelqu'un a une aspirine ?

[mick883125]

C'est clair! J'ai du relire 2 fois le message pour comprendre!

[Contenu sponsorisé]