Scrollbar in CSS instellen.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Stef

stef

15/10/2008 13:05:00
Quote Anchor link
Hallo allemaal!

Voor mijn website moet ik nog 1 ding doen voordat de info er op kan en dat hij online kan worden gezet!
Ik heb het probleem dat mijn html pagina http://jekunthetshaken.nl/pokerschool/index.html geen scroll heeft op het licht groene vlak rechts in het midden (dit heb ik wel nodig anders kan trekt de lay out uit elkaar als ik er meer info op zet dan past!

Het licht groene vlak heb als achtergrond gemaakt dus het voorste is dan automatisch een text vlak!??

Hoe kan ik met welke .CSS code dit op lossen?

hoe bepaal ik bijvoorbeeld de width en de heigh?
hoe zeg ik overflow op dat punt?
en background image... ?

Alvast bedankt!

Stef
 
PHP hulp

PHP hulp

28/11/2024 22:51:10
 
Timen kut

Timen kut

15/10/2008 13:07:00
Quote Anchor link
http://www.domedia.org/oveklykken/css-div-scroll.php

Zoiets?
 
Terence Hersbach

Terence Hersbach

15/10/2008 13:08:00
Quote Anchor link
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.
 
Stef

stef

15/10/2008 13:12:00
Quote Anchor link
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!
 
Pieter Jansen

Pieter Jansen

15/10/2008 13:12:00
Quote Anchor link
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
Gewijzigd op 01/01/1970 01:00:00 door Pieter Jansen
 
Timen kut

Timen kut

15/10/2008 13:13:00
Quote Anchor link
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.
 
Stef

stef

15/10/2008 13:14:00
Quote Anchor link
Oke merijn dat klinkt logisch waar kan ik dat instellen? (want ik snap er de o0o0o0o van :P)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<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 :$
Gewijzigd op 01/01/1970 01:00:00 door stef
 
Timen kut

Timen kut

15/10/2008 13:15:00
Quote Anchor link
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 :-)
Gewijzigd op 01/01/1970 01:00:00 door Timen kut
 
Pieter Jansen

Pieter Jansen

15/10/2008 13:19:00
Quote Anchor link
Je hebt geen extern CSS bestand maar als NOOD oplossing moet je:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<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.
Gewijzigd op 01/01/1970 01:00:00 door Pieter Jansen
 
Stef

stef

15/10/2008 13:26:00
Quote Anchor link
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..
 
Timen kut

Timen kut

15/10/2008 13:29:00
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<!-- 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.
 
Pieter Jansen

Pieter Jansen

15/10/2008 13:31:00
Quote Anchor link
Lees de edit eerst even door. En aan te raden is om eigenlijk overnieuw te beginnen qua ontwerp. De scripts daar gelaten trouwens.

Niet om het een of ander maar als je overnieuw begint, kun je volledig met divs werken, valideert je site beter ( als je je een beetje aan de standaarden houdt)

En ja, de opzet is niet verkeerd de uitwerking alleen wel ;)
en het klopt dat het niet moeilijk is.. kost je 2 dagen dan ken je de basis wel.
 
Stef

stef

15/10/2008 13:32:00
Quote Anchor link
Voor mij wel :P

nu heb ik dit geplaatst:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<td colspan="7" rowspan="2" background="images/index_19.jpg" style="overflow:scroll;"></div></td>


(dit stuk selecteerd het hele tabel maar als ik in dreamweaver text op plaats dan gaat de hele lay out uit elkaar :P)
 
Pieter Jansen

Pieter Jansen

15/10/2008 13:36:00
Quote Anchor link
Dreamweaver schuift alles op.. je moet gewoon testen in je browser. en anders moet je echt de manier kiezen die ik je in het begin gaf. een ghost divje maken zodat je content automatisch mee gaat naar beneden.

En dan kom ik weer terug bij het overnieuw beginnen van de website. Scrollbars zijn sowieso uit.. ;)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.