Probleempje met css & sidebar image

[Kapotlood]

Hallo allemaal,

Ik ben bezig met een linkslijnende website met een fixed width, waarbij de sidebar van 240px breed een fixed position heeft. Deze sidebar bevat een afbeelding van 1600px hoog, die een vérticaal een fixed position moet hebben, maar hórizontaal wel mee moet scrollen voor 't geval er mensen zijn die een te klein scherm hebben en dus een beetje horizontaal moeten scrollen om alle content te kunnen zien. Deze afbeelding/sidebar moet in alle gevallen verticaal beeldvullend zijn.

In de eerste instantie had ik een #wrapper gemaakt, met daarin 2 andere div's: 1x een #sidebar met daarin de background-image van 1600px hoog, en 1x een #content. Het probleem wat ik daarbij kreeg was dat ik óf een scrollbar kreeg terwijl ik die niet wilde (zelfs met overflow:hidden kreeg ik 'm niet weg), óf een sidebar die verticaal niet beeldvullend is.

Vervolgens heb ik de afbeelding voor de sidebar in de #wrapper gezet, wat het probleem voor de helft opgelost heeft. Ik heb nu geen scrollbar als de inhoud van de #content div niet hoger is dan je browser venster, maar als je browservenster te klein zou zijn en je dus horizontaal moet scrollen, dan blijft (logisch) de afbeelding staan en verschuift alleen de tekst in de #sidebar en #content.

Mijn vraag: is er een manier om een afbeelding die je in een #wrapper met een vaste breedte hebt gezet, wél horizontaal te laten scrollen, maar níét verticaal?

Hier een dummy-pagina en de CSS waar je het probleem kunt zien/testen:
- http://vanbuurenkoudetechniek.nl/homepage1.html
- http://vanbuurenkoudetechniek.nl/css/style.css

Mvg,
Joram

[daaan]

Ik ben bang dat je dat (als ik het goed heb begrepen) niet gaat lukken met alleen CSS. Met een javascript oplossing (bijvoorbeeld jQuery) kan het wel.

Usability-technisch zou ik gewoon een vast menu nemen, dat is voor iedereen prettiger.

[Kapotlood]

Wat bedoel je met een "vast menu" als ik vragen mag?

De afbeelding weglaten is overigens niet echt een optie… het lijkt me overigens een probleem waar mensen vaker tegenaan gelopen zijn, maar je komt er verdraaid weinig van tegen op Google. Hooguit een legio aan oplossingen voor "faux columns", maar dat gaat bij mij niet op helaas

Ik ben er overigens wel achter dat het scroll-probleem met die afbeelding komt doordat ik in de CSS de background-image een positionering heb gegeven van "fixed left top". Dit heb ik gedaan zodat hij netjes op z'n plaats blijft als er door meer content naar beneden gescrolled moet worden. Maar verticaal blijft hij dan ook strak op z'n plek staan, en da's nou net wat ik niet wil ;-)

[OkkE]

Het punt is dat position: fixed er voor zorgt dat het vlak altijd op die positie van het scherm staat, ongeacht het scrollen. Door de scrollen verplaatst dus de rest van de website wel, maar de sidebar niet.

Een simpele oplossing kan zijn, geen fixed gebruiken voor de positie maar absolute; waar van de top of margin-top door middel van Javascript onScroll aanpassen, zodat deze toch altijd op de zelfde positie lijkt te blijven.

Met deze manier verdwijnt de sidebar wel uit beeld als mensen horizontaal scrollen, maar eerlijk gezegd vind ik dat juist wel goed ook. In die situatie is het scherm al zo klein, dan is het fijn dat de sidebar bij het scrollen plaats maakt voor de inhoud.

---

Hier een voorbeeldje: http://jsfiddle.net/okke/a4xSZ/

Wanneer je dan de sidebar background als background-image op de body zet (faux), scroll je die ook niet meer uit beeld.
.

[ Voor 11% gewijzigd door OkkE op 27-09-2011 15:41 ]

[Kapotlood]

Maar dan ga je er vanuit dat het beeld in de sidebar-div geplaatst is als ik het goed heb, toch? Dan heb ik namelijk 't probleem (waar ik tot nu toe met geen mogelijkheid van af kwam) dat ik áltijd een scrollbalk zie, onafhankelijk van of ik de hoogte van de #sidebar nu op min-height:100%, height:100% of height:1600px zet, en onafhankelijk van of ik de overflow op "hidden" of "inherit" zet.

Het liefst probeer ik ook een oplossing te vinden zodat ik geen JavaScript hoef te gebruiken om dit probleem op te lossen zodat de layout niet in duigen valt als mensen JavaScript uit hebben staan.

Ik kwam een website tegen die een soortgelijk probleem had, en die 't wel werkend heeft gekregen. Jammer genoeg heb ik wat moeite met hun CSS met de mijne te vergelijken, en ze hebben de afbeelding in HTML geplaatst i.p.v. als background-image:
http://www.betereschilder.nl/