Scrolbar

[Gerard]

Ik heb een div 'Header' fixed boven aan
Ik heb een div 'Footer' fixed onderaan.
Daartussen heb ik een div 'content' met aan de linker zijde de div 'menu' en aan de rechter zijde een div 'inhoud'.

Deze laatste moet scrollen als de inhoud hiervan meer wordt dan het scherm.
Dat doet hij wel als je het scherm minder hoog maakt, maar niet als je het scherm minder breed maakt.

Hier de css:
Content

Code: Selecteer alles

div#content
{
 position: fixed;
 left: 10%;
 right: 10%;
 top: 91px;
 bottom: 51px;
 /*border: solid green 0px;*/
 background-color: #DFECEC;
 overflow: auto;
 /*z-index: 5;*/
}

inhoud

Code: Selecteer alles

div#inhoud
{
 padding: 10px 20px 0px 175px;
}

Hier de HTML

Code: Selecteer alles

<div id="content">
			<div id="menublok">
				<ul id="menu">
					<li><a id="dode-knop" href="#" title="U bevindt zich al op de pagina Home">Home&nbsp;&nbsp;</a></li>
					<li><a href="informatie.html" title="Pagina over jubeltenen">Informatie&nbsp;&nbsp;</a></li>
					<li><a href="menu-008-zweetvoeten-dl.html" title="Pagina over zweetvoeten">Onze dansen&nbsp;&nbsp;</a></li>
					<li><a href="menu-008-loopneuzen-dl.html" title="Pagina over loopneuzen">Agenda&nbsp;&nbsp;</a></li>
  				<li><a href="menu-008-platvoeten-dl.html" title="Pagina over platvoeten">Clubnieuws&nbsp;&nbsp;</a></li>
					<li><a href="menu-008-splithaar-dl.html" title="Pagina over splithaar">Fotoos&nbsp;&nbsp;</a></li>
					<li><a href="menu-008-splithaar-dl.html" title="Pagina over splithaar">Filmpjes&nbsp;&nbsp;</a></li>
					<li><a href="menu-008-splithaar-dl.html" title="Pagina over splithaar">Links&nbsp;&nbsp;</a></li>
					<li><a href="menu-008-splithaar-dl.html" title="Pagina over splithaar">Gastenboek&nbsp;&nbsp;</a></li>
				</ul>
			</div>
			<div id="inhoud">
				<h2>Rechterkolom</h2>
				<p>Vaste positie gelijk onder de header. Breedte: vult ruimte tussen linkerkolom en rechterkant van de pagina. Hoogte past zich aan de hoogte van het scherm aan. Bij voldoende inhoud verschijnt een verticale scrollbar, waarmee de inhoud van de rechterkolom gescrolld kan worden.</p>
				<h2>Opmerkingen:</h2>
				<p>Deze lay-out staat horizontaal gecentreerd op het scherm, ongeacht de grootte van het scherm.</p>
				<p><strong>Lees vooral ook de bijgesloten uitleg.</strong></p>
				<p>sd fgsdfg sdfgsdfgsdfgsdf gsdfgsdfg sdfg sdfgsdfgsdfg sdfg sdfgsdfg sdfgs
				df gsdfg sd fgsdfgsedfg sdfgsdf gsdfg sdfgdsfgsdfg sdfgsdfg 
				edrgsdf gsdfgsdf gsdf gsdfgd ncvbncvbncvn cvbncvncvbn cvnvbncv nvcnbcv n
				c vbncvbn cvbncv ncvbncv
				n cvbncvn
				</p>
			</div>
			

		</div>

[Gerard]

Sorry, ik ben er al achter waar de fout zit.
Ik heb links en rechts van de 'content', de 'footer' en de 'header' nog twee divs staan. Div 'links' en div 'rechts'. Fixed gepositioneerd met een breedte van 10%.
Omdat hier een plaatje in zit met een breedte van 90px heb ik die divs tevens een min breedte meegegeven van 90px.
Als bij het smaller maken van het scherm de breedte van 90px bereikt is voor div 'links' en 'rechts', verdwijnt de inhoud van div 'inhoud' onder de rechter div.

Hoe kan ik dat voorkomen.

Hier de css;
links en rechts zijn het zelfde.

Code: Selecteer alles

div#rechts
{
 position: fixed;
 top: 0;
 bottom: 0;
 right: 0;
 width: 10%;
 min-width: 90px;
 border-left-width: 3px;
 border-left-style: solid;
 border-left-color: #333366;
 background-color: #949FB1;
 background-image: url(../images/opmaak/veer_r.jpg);
 background-position: center center;
 background-repeat: no-repeat;
 z-index: 20;
}

[Goeroeboeroe]

Hallo,

Ik kan zo niet zien wat daarvan de oorzaak zou kunnen zijn, omdat dan de volledige html en css nodig zijn.
Ik kan wel even raden, wie weet...
Van wat jij beschrijft zou het kunnen zijn dat div#inhoud en/of div#menublok gefloat is. Als je dan de browser gaat versmallen, zou het kunnen zijn dat die divs gewoon stomweg niet meer naast elkaar passen. div#inhoud wordt dan ónder div#menublok gezet in plaats van ernaast.
Als dat het geval is, zou je kunnen proberen ze een breedte in percentages te geven in plaats van een vaste breedte. Dan worden #inhoud en #menublok ook smaller als het venster smaller wordt. Binnen zekere grenzen natuurlijk...

Als dat het niet is, kun je hier dan even de volledige html en css voor die pagina neerzetten?
Bij de css voor div#rechts zie ik op regel 13 een vreemdigheid aan het eind van de regel. Mogelijk is dat bij het kopiëren gebeurd, maar ) hoort niet in de css.

[Gerard]

Hier de CSS

Code: Selecteer alles

div#header
{
 position: fixed;
 left: 10%;
 right: 10%;
 height: 90px;
 text-align: center;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #333366;
 background-color: #DFECEC;
 z-index: 10;
}

/* definieren van de linker en rechter ruimte naast de eigenlijke pagina*/
div#links
{
 position: fixed;
 top: 0;
 bottom: 0;
 width: 10%;
 min-width: 90px;
 border-right-width: 3px;
 border-right-style: solid;
 border-right-color: #333366;
 background-color: #949FB1;
 background-image: url(../images/opmaak/veer_l.jpg);
 background-position: center center;
 background-repeat: no-repeat;
 z-index: 20;
}
div#rechts
{
 position: fixed;
 top: 0;
 bottom: 0;
 right: 0;
 width: 10%;
 /*min-width: 90px;*/
 border-left-width: 3px;
 border-left-style: solid;
 border-left-color: #333366;
 background-color: #949FB1;
 background-image: url(../images/opmaak/veer_r.jpg);
 background-position: center center;
 background-repeat: no-repeat;
 z-index: 20;
}

/* definieren van de footer*/
div#footer
{
 position: fixed;
 bottom: 0;
 left: 10%;
 right: 10%;
 height: 50px;
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #333366;
 text-align: center;
 background-color: #E9EBFF;
 z-index: 15;
}

div#content
{
 position: fixed;
 left: 10%;
 right: 10%;
 top: 91px;
 bottom: 51px;
 /*border: solid green 0px;*/
 background-color: #DFECEC;
 overflow: auto;
 /*z-index: 5;*/
}

/* defineren van de ruimte voor de werkelijke inhoud. Scrolbar rechts*/
div#inhoud
{
 padding: 10px 20px 0px 175px;
}

/*definieren van de ruimte voor het menu*/
div#menublok
{
 position: fixed;
 top: 91px;
 left: 11%;
 width: 125px;
 bottom: 51px;
 background-color: #DFECEC;
 z-index: 10;
}

Hier de html.

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<link rel="stylesheet" type="text/css" href="stylesheet/hoofd.css" /> 
	<!-- Instellingen voor Internet Explorer --> 
	<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="stylesheet/explorer.css">
	<![endif]-->
	<meta name="description" content="Website van de Wobbling Dancers uit Epe. De Wobbling Danmcers zijn een Country en Western linedance groep." />
	<meta name="keywords" content="homepage, linedance, country, muziek, dans, epe, Wobblingdancers, Wobbling, Dancers," />
	<title>The Wobblingdancers Epe</title> 
</head>
<body>
	<div id="header">
		<img class="header_img" alt="wobblingdancers" src="images/opmaak/plaatje_head_4.jpg" height="78" width="575" />
	</div>
	<div id="links"
		<p></p>
	</div>
	<div id="rechts"
		<p></p>
	</div>
	<div id="footer"
		<p>footer</p>
	</div>
		
		
	<!-- Plaatsen van de content ruimte waarbinnen de rechter kolom en het menu worden geplaatst -->
	<div id="content">
		<div id="menublok">
<p>Hier komt het menu</p>
		</div>
		<div id="inhoud">
			<h2>Rechterkolom</h2>
			<p>sd fgsdfg sdfgsdfgsdfgsdf gsdfgsdfg sdfg sdfgsdfgsdfg sdfg sdfgsdfg sdfgs
			df gsdfg sd fgsdfgsedfg sdfgsdf gsdfg sdfgdsfgsdfg sdfgsdfgsd fgsdfg sdfgsdfgsdfgsdf gsdfgsdfg sdfg sdfgsdfgsdfg sdfg sdfgsdfg sdfgs
			df gsdfg sd fgsdfgsedfg sdfgsdf gsdfg sdfgdsfgsdfg sdfgsdfgsd fgsdfg sdfgsdfgsdfgsdf gsdfgsdfg sdfg sdfgsdfgsdfg sdfg sdfgsdfg sdfgsdf gsdfg sd fgsdfgsedfg sdfgsdf gsdfg sdfgdsfgsdfg sdfgsdfgsd fgsdfg sdfgsdfgsdfgsdf gsdfgsdfg sdfg sdfgsdfgsdfg sdfg sdfgsdfg sdfgsdf gsdfg sd fgsdfgsedfg sdfgsdf gsdfg sdfgdsfgsdfg sdfgsdfg</p>
			<h2>Opmerkingen:</h2>
		</div>
	</div>
	
</body>
</html>

[Gerard]

Toch nog even een herhaling van de vraag.

Bij het minder hoog maken van het scherm ontstaat de gewenste scrollbar.
Bij het minder breed maken van de pagina ontstaat deze niet.

De linker en rechter ruimte hebben een breedte van 10% met een minimale breedte van 90px.
Dat moet zo blijven.

Hoe kan ik een scrollbar krijgen bij het minder breed maken van het scherm.

[Goeroeboeroe]

Ha, ik was al een antwoord aan het typen. Maar prima om de vraag even te herhalen, is het in ieder geval duidelijk.
Eerst even drie fouten: in je html mist bij <div id="links" de afsluitende >
Idem bij <div id="rechts en <div id="footer

Ik zie wat je bedoelt. En ik zie ook de reden, maar 'n oplossing is wat lastiger.
Als je er wat meer tekst in zet en als je de min-width van div#rechts 190px maakt, gebeurt het eerder. Dat werkt wat makkelijker, omdat de fout dan duidelijker is.
Overigens gebeurt aan de linkerkant precies hetzelfde met #menublok, alleen zie je dat minder om het een kleinere overlapping is. Maar als je de min-width links ook even groter maakt, zie je het gelijk.

De oorzaak is het gebruik van twee soorten maten door elkaar heen: relatieve en absolute.
#links en #rechts hebben een breedte in procenten: 10%. Met de border en zo zal dat zo'n 11% zijn, ongeveer. Dus dan houd je voor het middendeel 78% over.
Even voor het gemak een venster van 1000 px breed nemen. Dan is #links 110 px breed, en div#rechts ook. Houd je 780 px over voor div#content en zo.
Dat gaat prima.

Als ik het venster nu 700 px breed maak (weer 'n rond getal voor het rekenen), zijn #rechts en links# samen weer 22% breed, dat is 154 px. En voor het middendeel houd ik weer 78% over, dat is hier 546 px.

En daar gaat het mis. Omdat je 'n min-width hebt opgegeven bij #links en #rechts van 90px, zijn die samen dus geen 154 px breed (zoals zou moeten bij een breedte van 700 px), maar 180 px. Plus border en zo.

#content e.d. staan nog steeds op 10% van de zijkant. Dat is bij 700 px breedte 70 px. En omdat #links en #rechts 90 px breed zijn (de minimum-breedte), verdwijnt er dus 20 px onder #links en #rechts.

Als je div#content even 'n hele hoge z-index geeft, zie je ook duidelijk wat er gebeurt bij een smal scherm. #content staat dan bóven #links en #rechts. Maar bij een lagere z-index staat hij er dus onder en verdwijnt gedeeltelijk.

(Overigens gaat er bij #footer en #header hetzelfde gebeuren, als daar meer tekst of zo in zou komen te staan. Als #footer en #header links en rechts een voldoende breed leeg stuk hebben, gaat 't daarmee wel goed.)

Dat het bij minder hoog maken geen probleem is, komt omdat het 'm in de min-width zit.

Tja, de oplossing. Die is er volgens mij eigenlijk niet. Je zult moeten kiezen tussen alles in procenten, óf alles in vaste maten. (Althans: de 'grote' divs). De procenten zijn relatief ten opzichte van de grootte van het venster. De px zijn absolute maten, onafhankelijk van de grootte van het venster. Dat bijt elkaar.

Als je alles in vaste maten gaat maken, dan krijg je op kleinere schermen snel een horizontale scrollbalk. Maar dan blijven de afbeeldingen in #links en #rechts wel zichtbaar.
Als je alles in procenten gaat maken zonder min-width, heb je kans dat er onderdelen te smal gaan worden.
Kun je voor #links en #rechts geen afbeelding gebruiken, waarbij het niet zo erg is als die gedeeltelijk verdwijnt op een smaller scherm? Dan kan de min-width vervallen.

Je zou het ook nog kunnen oplossen door links en rechts van #menublok en #inhoud lege nep-divs te zetten, die even breed zijn als #links en #rechts. Dus ook met een breedte in procenten en ook met een min-width. Die duwen dan #menublok en #inhoud opzij. Maar dat gaat ook niet werken, omdat vrijwel alles een fixed positie heeft.

De keuze is dus eigenlijk: flexibeler, waarbij op een smaller scherm een deel van de afbeelding in #links en #rechts gaat wegvallen, of in absolute maten, waarbij je snel een horizontale scrollbalk krijgt op een smaller scherm.
Als je daar 'n beetje in kunt kiezen en het lukt niet, wil ik er met alle plezier nog 'ns naar kijken. Maar dan zou ik 't graag even ergens online zien, zodat ik ook de afbeeldingen zie.