[css] fixed div backgr die niet omhoog scrolled

Pagina: 1
Acties:

  • Hangloozz
  • Registratie: Juli 1999
  • Laatst online: 13-07 17:24
het zal wel niet kunnen met standaard CSS omdat een Google speurtocht niets opleverde maar misschien dat The Guru's hier iets weten :)

stel:
ik heb een page met 2 DIV's die de achtergrond voor hun rekening nemen.
Deze 2 hebben als positie 'bottom'.
Daarna voeg ik in een 3e DIV een tabel toe met een zwik data en die zorgt dat er een scrollbar verschijnt in het window.
Scroll ik dan naar beneden om de onderzijde van die tabel te zien dan schuiven m'n gefixed'te DIV'jes doodleuk mee naar boven :/

Logisch zou je zeggen..true, maar ik wil het niet :P

Ik ben hier al eens eerder mee bezig geweest maar kom er niet uit, dus vandaar de vraag:

zijn hier, behalve die zenuwtrekjes-oproepende-anti-omhoog-scroll-scriptjes, workarounds voor?
(nee, want anders hadden ze die scriptjes niet nodig.. true :))

voorbeeldjes waarbij het fout gaat als je het window verlaagd en omhoog scrolled:
vb1
vb2

www.jurgroessen.nl


Verwijderd

Een mogelijke oplossing is misschien een plaatje ervan te maken ipv twee en dat "gewoon" op de achtergrond te plaatsen. Dan ben je van dat probleem af

Met CSS kan je dan op alle mogelijk plekken je achtergond uitlijnen

  • Hangloozz
  • Registratie: Juli 1999
  • Laatst online: 13-07 17:24
mja, zoals je bij het eerste voorbeeld kunt zien gaat de content (i.e. text, tabel rechts) tussen de 2 layers door.
En dat wil ik eigenlijk behouden.
Daarnaast bestaat de achtergrond nu uit een repeating verloopje van 2 pixels hoog, 2048px breed; 100x lichter dan een vette achtergrondprent van 1600x1200 of zelfs groter...

www.jurgroessen.nl


Verwijderd

/me quote de CSS spec:
The values of this property have the following meanings:

static
The box is a normal box, laid out according to the normal flow. The 'left' and 'top' properties do not apply.
relative
The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.
absolute (heb jij nu)
The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.
fixed (zou je volgens mij moeten gebruiken
The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. In the case of continuous media, the box is fixed with respect to the viewport (and doesn't move when scrolled). In the case of paged media, the box is fixed with respect to the page, even if that page is seen through a viewport (in the case of a print-preview, for example). Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page
niet getest, maar zou volgens mij moeten werken :)

Verwijderd

...als dit in IE was geïmplementeerd, en dat is helaas niet zo. Misschien is het in SP1 wel gefixed, ik zou het niet weten.

Dat een CSS property volgens W3C bestaat, wil niet zeggen dat het (goed) werkt in de UA.

  • Hangloozz
  • Registratie: Juli 1999
  • Laatst online: 13-07 17:24
ja nu je het zegt: in Mozilla (1.1) werkt het wel :)

Cheatah: uit jouw reactie begrijp ik dat een 'kale' IE6 het onjuist weergeeft?

www.jurgroessen.nl


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 19:55

crisp

Devver

Pixelated

Als je nou zorgt dat niet je body overflowed maar je 3e DIV, en die net zo hoog/breed maakt als de pagina zelf...

Intentionally left blank


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 19:55

crisp

Devver

Pixelated

Hangloozz schreef op 24 september 2002 @ 17:29:
ja nu je het zegt: in Mozilla (1.1) werkt het wel :)

Cheatah: uit jouw reactie begrijp ik dat een 'kale' IE6 het onjuist weergeeft?
Nee, er is geen enkele IE die het goed weergeeft (ook IE6 met SP1 niet trouwens).
Valt me wel op dat ik steeds meer dingetjes tegenkom die wel in Mozilla werken, maar niet in IE...

Intentionally left blank


  • Hangloozz
  • Registratie: Juli 1999
  • Laatst online: 13-07 17:24
ik neem aan dat je van het eerste voorbeeld de content div bedoelt?
zo ja, dan zit er een maar aan:
die content DIV zweeft qua z-index tussen de andere DIV's in om um ahw te laten verdwijnen achter de blauwe golf.
Als ik die content DIV op scroll zet dan kun je niet bij de scrollbars omdat die golf erover heen ligt ;(

www.jurgroessen.nl

Pagina: 1