Hallo

Daar zijn we weer met een vervelend probleempje waar ik niet uitkom met html/css. Ik ben bezig met een website waarbij ik een grote afbeelding in een sidebar wil hebben die áltijd 100% height heeft. Tot zover geen probleem.

Alleen als ik nu meer inhoud in m'n "content" div heb en dus naar beneden moet scrollen, dan houdt de afbeelding in de sidebar ineens op. De afbeelding heb ik trouwens "fixed" staan, zodat hij tijdens het scrollen niet verschuift. Dit i.v.m. een gloed die in de afbeelding zit die altijd op dezelfde plek moet staan.

Hier de dummy pagina:
http://vanbuurenkoudetechniek.nl/homepage1.html

Hier de CSS van de betreffende pagina:
http://vanbuurenkoudetechniek.nl/css/style.css

Zou iemand toevallig eens een kijkje kunnen nemen en me vertellen wat ik eventueel verkeerd doe? Alvast onwijs bedankt!

Mvg,
Joram

Mmm, ik zie de sidebar-afbeelding niet echt ophouden als er veel inhoud in de tekstkolom komt en ik moet scrollen. Wel zie ik de copyright-footer naar links schieten waardoor hij over de sidebar staat en voor een wit onderrandje zorgt. Bedoel je dat?

De footer e.d. moet ik allemaal nog stylen enzo, maar ik liep een beetje vast op de sidebar. Als je de pagina laad dan ziet alles er inderdaad prima uit, maar als je even inzoomt op de tekst zodat je moet scrollen, dan zie je dat die afbeelding "stokt"… da's m'n probleem een beetje

… hé verdorie! Je hebt gelijk :D
Ik probeer 't net nog eens, en nu lijkt alles prima te werken. Gevalletje "nou breekt m'n klomp"… ik kijk nét nog voor de zekerheid en hij deed nog steeds zo vreemd, maar nu werkt 't ineens wel. Misschien had ik m'n caches niet helemaal goed geleegd?

Nou, probleem opgelost zo te zien. Bedankt voor de hulp in ieder geval!

Mvg,
Joram

Ik merk nu wel een ander probleem, nu we toch bezig zijn

Ik heb de afbeeldingen van de sidebar in de wrapper geplaatst, omdat ik de #sidebar div die dáár weer in staat geen min-height:100% kon geven… om de één of andere reden wil een div met min-height in een div met min-height niet werken namelijk.

Maar omdat ik die afbeeldingen op z'n plek wil houden heb ik 'm een positionering van "fixed left top" gegeven. Als je dan meer tekst hebt en moet scrollen werkt dat uitstekend. Het probleem is alleen dat als iemand met een klein(er) scherm de website wil bekijken en hórizontaal moet scrollen, de balk horizontaal niet mee scrolt… is zoiets toevallig nog op te lossen, zodat hij alleen horizontaal mee scrolt, en verticaal altijd op z'n plek blijft staan?

Alvast duizendmaal dank en de eeuwige roem voor 't verlossende antwoord! :D

Even los van je vraag:
Je </nav> staat na de header, die moet toch voor de </div sidebar> komen te staan?
Misschien lost dat ook andere problemen op.

Ik zie de adresgegevens achter het menu staan en dus onleesbaar. Ze horen er onder te staan?

Sorry, was nog heel even aan 't proberen om die balk goed te krijgen, maar da's niet gelukt. 't Zou er nu weer "semi-goed" uit moeten zien

Het is overigens een HTML5-pagina, dus je hebt zoals je gewend bent de "HEAD" waar je al je meta tags in zet e.d., en een "HEADER" als kopje voor je artikelen. Wat dat betreft is m'n opmaak gelukkig wel goed

Mvg,
Joram

Probeer de sidebar-jpg toch eens als achtergrond van je sidebar-div, en zet 'm op height: 100%. min-height is denk ik niet nodig om 'm altijd verticaal windowvullend te laten zijn.
Je horizontale scrollprobleem komt namelijk denk ik doordat je sidebar-jpg in de wrapper zit en niet in de sidebar...

Daar had ik ook aan gedacht

Ik heb op dit moment de html en body een hoogte gegeven van min-height:100%, zodat de wrapper een height:100% gegeven kon worden, maar of ik nu height:100% of min-height:100% aan de sidebar meegeeft, hij vult 'm verticaal maar niet uit. En als ik 'm een height:1600px geef en overflow op hidden zet, dan laat hij alsnog een scrollbar zien.

Ik ben er op dit moment wel achter dat het scrollprobleem zich voordoet omdat ik de background-image een positionering van "fixed left top" heb gegeven, waardoor hij aan de linkerbovenhoek vastgeplakt zit. Dit had ik zo ingevuld omdat ik wil dat hij verticaal niet meescrolt, maar ik weet niet hoe ik 'm horizontaal wel "los" kan maken

Mvg,
Joram

volgens mij is je opzet vergelijkbaar met een site die ik begin dit jaar gemaakt heb (en die me heel wat gepuzzel gekost heeft om de layout zo te krijgen

ik heb nu niet zoveel tijd om in jouw probleem te duiken, maar je bent vrij om de broncode en css
van mijn site te bekijken, wellicht kun je hiermee jouw probleem oplossen

bij mijn site gaat het om de foto in de rechterkolom die in principe hetzelfde doet als jouw sidebar zou moeten doen

Hoi Moxie! Jou zien we niet zo vaak meer hier! En inderdaad zeg: nagenoeg precies 'tzelfde gedoe bij jouw website.

Je hebt jouw css alleen dusdanig anders neergezet dan ik, dat ik zo 1-2-3 niet kan zien wat jij nou anders hebt gedaan waardoor 't probleem is opgelost. Ik zie wel dat je de afbeelding in HTML hebt geplaatst, en niet als background-image.

Het enige wat ik kan zien is dat als je 'm in HTML plaatst dat je je menu er niet meer zomaar bovenop kan zetten volgens mij. En laat er bij mij een paar stukken tekst op komen

Maar een gepuzzel is 't zeker! Ik had zelfs geprobeerd de div's zónder "float" te positioneren, maar dan floept de rechter div onder de linker div als het browser venster te smal wordt. Je zou zeggen dat dit een vaker voorkomend probleem is, maar echt een heel duidelijke oplossing heb ik via Google ook nog niet kunnen vinden. Alleen voorbeelden van zogeheten "faux columns", maar die oplossing (een 1px hoge illustratie) gaat bij mij helaas niet op.

Ik had het niet over de <head></head>, maar over de volgorde van je divs, die staan door elkaar heen.
je opent een div sidebar, dan een div Nav, dan sluit je een div, opent een div content, en pas na de div header open en sluiten volgt het sluiten van de div nav.
Moet die niet staan voor het sluiten van de Div sidebar?

<div id="sidebar">
<nav>
     <ul>
     </ul>
</nav>
</div sidebar>

<div id="content">
<div id="logo"><a href="#" title="Van Buuren Koudetechniek"><img />[/url]</div>
<header>
</header>

</div content>

@Hiker;
Inderdaad! Die heb ik helemaal niet gezien zeg… bedankt
Niet dat dat heel veel uit haalt voor m'n scroll probleempje, maar 't is in ieder geval weer een foutje minder, hehe.

Mvg,
Joram

bij mij staat de foto in de html omdat de klant via een cms die foto op iedere pagina kan aanpassen, maar je kunt hem net zo goed als background in de css zetten

Ik had er gisteravond nog eens goed naar gekeken, maar ik kwam er helaas niet uit. Ik ben wel verder gegaan met de rest van de pagina (er zit nu een slider in en ik ben begonnen met het opmaken van de content zelf)… ik denk dat ik de blauwe balk voor nu laat voor wat 't is.

't Is een lastig probleem als je je niet/nauwelijks fulltime mee bezig houdt zeg!

Oh, dat herinnert me eraan: kun je 2 div's ook zonder #wrapper naast elkaar zetten, zónder dat ze onder elkaar "floepen" als het venster te smal wordt? In dat geval zou ik de #sidebar-div naast de #content-div kunnen plaatsen zonder gebruik te maken van een wrapper. Op die manier zou ik namelijk het probleem wel zelf kunnen oplossen, hehe. Alleen als ik dat zou doen d.m.v. float:left, dan knalt m'n content onder de sidebar zodra het browservenster te smal wordt… en da's niet de bedoeling

Mvg,
Joram