Scrollbar in CSS instellen. - Forum

Timen kut

15-10-2008 13:07

http://www.domedia.org/oveklykken/css-div-scroll.php

Zoiets?

Terence Hersbach

15-10-2008 13:08

gewoon je layout zo maken dat de inhoud zorgt voor de lengte. Mensen verwachten niet dat daar een scrollbar zit.

Bovendien maak je een layout met divs en css, niet met tabellen.

s

stef

15-10-2008 13:12

Timen precies wat ik zoek!

Maar heb zelf al zitten stuntelen, hoe kan ik dat in mijn pagina plaatsen? :P

Ik ben nog niet zo goed :$

Bedankt al!

P

Pieter Jansen

15-10-2008 13:12

maak je div waar je je info in wil klaar qua hoogte en breedte. Geef vervolgens de waardes overflow:scroll; mee en je bent klaar.

Maar, Waarom wil je dat ingodsnaam op zo`n manier oplossen? Waarom maak je je content div niet height: auto ofzo? Dat leest namelijk veel prettiger..

je kunt bijvoorbeeld een divje 1px breed aan de linkerkant van je content plaatsen, hoogte meegeven en de je content kan dan op height: auto of 100% staan. Dan scrollt de pagina gewoon naar beneden zonder dat je er zo`n scroll gedoe in zet..

edit: had nog niet gezien dat je met tabellen werkt.. Schrap de tabellen en ga over op divs. Dat staat netter en tabellen is tegenwoordig not-done

T

Timen kut

15-10-2008 13:13

Wat Merijn zegt inderdaad.

Mocht je het echt zo dringen met een scrollbar willen, raad ik je aan om wat CSS te leren aangaande het plaatsen ervan.

s

stef

15-10-2008 13:14

Oke merijn dat klinkt logisch waar kan ik dat instellen? (want ik snap er de o0o0o0o van :P)


<html>
<head>
<title>Welkom bij de Pokerschool</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
a:link {
	color: #006738;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #006738;
}
a:hover {
	text-decoration: underline;
	color: #CBE5A8;
}
a:active {
	text-decoration: none;
	color: #CBE5A8;
}
.style2 {color: #CBE5A8}
.style3 {
	font-size: large;
	font-weight: bold;
	color: #006738;
}
.style4 {color: #006738}
.style5 {
	color: #FFFF35;
	font-size: 18px;
}
.style6 {
	font-size: 11px;
	color: #CBE5A8;
}
.style7 {color: #CBE5A8; font-family: Verdana, Arial, Helvetica, sans-serif; }
.style8 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style9 {font-size: 12px}
.style10 {font-size: 13px}
.style11 {color: #006738; font-family: Verdana, Arial, Helvetica, sans-serif; }
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/layover_03.jpg','images/layover_05.jpg','images/layover_07.jpg','images/layover_09.jpg','images/layover_11.jpg')">
<!-- ImageReady Slices (index.psd) -->
<table width="1025" height="768" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
		<td colspan="11" background="images/index_01.jpg"><table width="120" height="60" border="0" align="right">
          <tr>
            <td><a href="http://sev4ifmxa.com/click/WEE6U2FsdGVkX19fusgc-qVpSgM42@x9tF97UJtFOY0J-OVoaoMxPVGp@AhAraiBvJRhFnEk259FxTdhnxy4VMn9zw==/sdsi" target=""><img src="http://sev4ifmxa.com/image/WEE6U2FsdGVkX19fusgc-qVpSgM42@x9tF97UJtFOY0J-OVoaoMxPVGp@AhAraiBvJRhFnEk259FxTdhnxy4VMn9zw==/sdsi" width="120" height="60" border="0"></a></td>
          </tr>
        </table></td>
		<td>
			<img src="images/spacer.gif" width="1" height="121" alt=""></td>
  </tr>
	<tr>
		<td rowspan="7">
			<img src="images/index_02.jpg" width="23" height="647" alt=""></td>
		<td><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image30','','images/layover_03.jpg',1)"><img src="images/index_03.jpg" alt="Home" name="Image30" width="175" height="38" border="0"></a></td>
<td rowspan="7">
			<img src="images/index_04.jpg" width="25" height="647" alt=""></td>
		<td><a href="lessen.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/layover_05.jpg',1)"><img src="images/index_05.jpg" alt="Lessen" name="Image31" width="176" height="38" border="0"></a></td>
<td rowspan="3">
			<img src="images/index_06.jpg" width="24" height="56" alt=""></td>
		<td><a href="maileenvriend.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image32','','images/layover_07.jpg',1)"><img src="images/index_07.jpg" alt="Mail een vriend" name="Image32" width="176" height="38" border="0"></a></td>
<td rowspan="3">
			<img src="images/index_08.jpg" width="24" height="56" alt=""></td>
		<td><a href="links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image33','','images/layover_09.jpg',1)"><img src="images/index_09.jpg" alt="Handige links" name="Image33" width="176" height="38" border="0"></a></td>
<td rowspan="3">
			<img src="images/index_10.jpg" width="24" height="56" alt=""></td>
		<td><a href="contact.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image34','','images/layover_11.jpg',1)"><img src="images/index_11.jpg" alt="Contact" name="Image34" width="176" height="38" border="0"></a></td>
<td rowspan="7">
			<img src="images/index_12.jpg" width="25" height="647" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="38" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_13.jpg" width="175" height="14" alt=""></td>
		<td rowspan="2">
			<img src="images/index_14.jpg" width="176" height="18" alt=""></td>
		<td rowspan="2">
			<img src="images/index_15.jpg" width="176" height="18" alt=""></td>
		<td rowspan="2">
			<img src="images/index_16.jpg" width="176" height="18" alt=""></td>
		<td rowspan="2">
			<img src="images/index_17.jpg" width="176" height="18" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="14" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2" background="images/index_18.jpg"><div align="center" class="style7">Menu</div></td>
<td>
			<img src="images/spacer.gif" width="1" height="4" alt=""></td>
	</tr>
	<tr>
		<td colspan="7" rowspan="2" background="images/index_19.jpg"> <div align="center">Hoe kan er voor zorgen dat alleen dit scherm scrolled als er infoop wordt gegooid! </div></td>
		<td>
			<img src="images/spacer.gif" width="1" height="30" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2" valign="top" background="images/index_20.jpg">
		  
		    <div align="center" class="style8"><BR>
		        <span class="style9"><span class="style10"><a href="les1.html"> Les 1</a><BR>
		        <span class="style2">- Spel uitleg</span></span></span><span class="style10"><BR>
		      
		        <BR>
		        <a href="les2.html">Les 2</a><BR>
		        <span class="style2">- Kaartwaardes</span><BR>
		        <span class="style2">- Speelwaardige kaarten</span></span>   <span class="style10"><BR>         
		      
		        <BR>
		        <a href="les3.html">Les 3</a><BR>
		        <span class="style2">- Pokertermen</span><BR>
		      
		        <BR>
		        <a href="les4.html">Les 4</a><BR>
		        <span class="style2">- Tips</span></span>   <span class="style10"><BR>         
		      
		        <BR>
		        <a href="les5.html">Les 5</a><BR>
		        <span class="style2">- Kansberekening</span><BR>
		      
		        <BR>
		        <a href="les6.html">Les 6</a><BR>
		        <span class="style2">- Statistieken</span></span>  <BR> <HR color="#006738" noshade>                     
          </div>
		    <p align="center" class="style4"><span class="style8"><span class="style10"><a href="http://100116.forums.motigo.com" target="_blank">F.A.P.Q Forum </a></span></span></p>
		    <p align="center" class="style11"><span class="style10"><a href="videos.html">Videos</a></span></p>
		    <p align="center" class="style3 style5"><span class="style8"><a href="http://www.jekunthetshaken.nl/pokerschool/links.html">Begin met spelen!</a></span></p></td>
		<td>
			<img src="images/spacer.gif" width="1" height="497" alt=""></td>
  </tr>
	<tr>
		<td colspan="7" rowspan="2" background="images/index_21.jpg"><div align="center" class="style6">Copyright, Je kunt het shaken, 2008</div></td>
<td>
			<img src="images/spacer.gif" width="1" height="42" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_22.jpg" width="175" height="22" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
<!-- Begin Motigo Webstats counter code -->
<a id="mws4561598" href="http://webstats.motigo.com/">
<img width="18" height="18" border="0" alt="Free counter and web stats" src="http://m1.webstats.motigo.com/n.gif?id=AEWavgoV8zLeP54lM8VcQtq_2xcQ" /></a>
<script src="http://m1.webstats.motigo.com/c.js?id=4561598" type="text/javascript"></script>
<!-- End Motigo Webstats counter code -->


</body>
</html>

*sorry had niet aan code tags gedacht en moest het ff opzoeken :$

T

Timen kut

15-10-2008 13:15

Doe eerst 's effe edit en zet je code tussen code tags

En daarbij is er al advies gegeven om het in Divs te maken(Stylesheets dus)

Tutorials zat op internet :-)

P

Pieter Jansen

15-10-2008 13:19

Je hebt geen extern CSS bestand maar als NOOD oplossing moet je:


<div align="center" style="overflow:scroll;">Hoe kan er voor zorgen dat alleen dit scherm scrolled als er infoop wordt gegooid! </div>

gebruiken.

Maar zoals ik al zei.. je moet die tabellen weg halen. Pak er eens een kleine cursus HTML en CSS bij. Daar leer je veel van.

edit: wat ik trouwens niet snap.. ALLES is zo`n beetje plaatje. Zelfs de witranden aan de buitenkanten :S.. Bovendien lijnt het submenu niet mooi uit met je knop Home. En verder.. Je hebt dus ALLES qua ontwerp als plaatje BEHALVE je logo en titel.. Als er al iets is dat ik dan als img. zou toevoegen is het dat wel.. en dan een hrefje er omheen en je hebt een linkje naar je home.

s

stef

15-10-2008 13:26

nou kijk html lukt me opzich nog en heb gister CSS op www3 doorgenomen!

Ik had al het 1 en ander gevonden maar stond nergens hoe ik het kon integreren, maar Merijn je code doet het wel inderdaad maar nu staat ie in het midden van het groene vlak en niet het hele groene vlak?

Wat moet ik anders doen om dat voor elkaar te krijgen?
En hoe kan ik anders nu nog div maken ipv tabellen (houdt er rekening mee dat wat ik gedaan heb al heel wat is voor mij :P)
erg moeilijk maar hoor seeds dat het simpel is dus..

T

Timen kut

15-10-2008 13:29


<!-- End ImageReady Slices -->

Zo moeilijk kan dat nooit geweest zijn :-p

Desalniettemin zou ik echt de tijd nemen(ook al duurt het een week, mischien wel 2 of nog langer, Who knows?) om CSS goed te leren.