Aller au contenu

Blocs et overflow


xpatval

Sujets conseillés

Bonjour,

Mon neurone gauche étant faible ce matin (le droit ne fonctionne plus depuis longtemps), je m'interroge sur ce point:

J'ai la structure suivante:

<div style="height: 400px;overflow: auto;">
<p><img... /></p>
<p> texte blabla </p>
</div>

Dans ce cas, si je joue avec la barre de défilement, et l'image et le texte défilent.

Ce que je souhaiterais, c'est conserver l'image fixe, et que le texte, lui, continue de défiler avec la barre de défilement, sous l'image.

J'ai essayé différentes méthodes, mais qui me génèrent des espacement indésirables entre l'image et le texte.

Auriez-vous une idée ?

Merci

xpatval

Lien vers le commentaire
Partager sur d’autres sites

Ce que je souhaiterais, c'est conserver l'image fixe, et que le texte, lui, continue de défiler avec la barre de défilement, sous l'image.

Dans ce cas, c'est tout simplement un background-position: fixed qu'il faut utiliser, non?

(plus d'infos sur le lien de Monique, selon tes objectifs)

Lien vers le commentaire
Partager sur d’autres sites

Oui, cette méthode peut être utilisé ... sauf que cela ne rend pas ce que je souhaite. :boude:

Voilà ce qu'il y avait avant: avant

Dans ce cas, l'image, inclue dans une cellule, reste fixe, le texte étant dans une autre cellule placée en dessous, peut dérouler sans géner.

Et maintenant: maintenant. Là, plus de tables et cellules. Il n'y a que des blocs <div>.

Mais dans le <div> central, l'image ET le texte, bien que dans deux <p> différents, défilent ensemble...

Et malgré un background-image, un overflow à none pour l'un, à auto pour l'autre, je n'arrive pas à la chose escomptée: garder l'image fise, et le texte défilant en dessous. (sans séparer les deux éléments dans un bloc <div> différent... :whistling:

xpatval

Lien vers le commentaire
Partager sur d’autres sites

Salut,

et avec qqch comme ca ?

<div style="position:absolute;left:10px;top:10px;z-index:2;overflow: auto;">hello</div>

<div style="position:absolute;left:10px;top:10px;z-index:1"><img src="hello.gif"/></div>

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...