Version complète: sur le forum Webmaster Hub : Blocs et overflow
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
xpatval
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:
CODE
<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
Monique
Bonjour,

As-tu essayé la méthode proposée sur Openweb, utilisant une image de fond ?
Overflow avec fond fixe en CSS
Raphael
CITATION(xpatval @ vendredi 21 janvier 2005, 11h44)
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)
xpatval
Oui, cette méthode peut être utilisé ... sauf que cela ne rend pas ce que je souhaite. IMSTP5.gif

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.gif

xpatval
kilo
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>
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.