scrollbalkje code html

[jackbouwer]

scrollbalk in pagina code
Hallo allemaal,

Sinds kort heb ik een website gemaakt. www.lividici.nl op deze site moet m'n vriendin al haar opdrachten plaatsen voor school. Helaas is er soms teveel tekst. Kijk maar op http://www.lividici.nl/periode1/p1w1.html , nu is mijn vraag of ik in mijn style.css bestand iets kan maken dat hij scrollt alleen wanneer er teveel tekst is. Een andere optie zou zijn als die gewoon de hele site verlengd tot waar de tekst stopt. Ik wacht vol spanning af.

Groeten,

Jack

 

[MBDesignerNL]

Met overflow:

 #text {
    height: 200px; // Voorbeeld height
    width: 300px; // Voorbeeld width
    overflow: auto;
 }

 

[jackbouwer]

Maar waar moet ik overflow:auto; zetten in deze style.css?

/* CSS RESET */
html{color:#fff;background:#fff;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}

body {font:13px/1.231 arial,helvetica,clean,sans-serif;}table{font-size:inherit;font-size:100%;}pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;}
/* CSS RESET */


body {
text-align:center;
background:#fff;
color:#fff;
}
a {
text-decoration:none;
color:#fff
}
a:hover {
text-decoration: underline;
color:#FF7F00
}
#wrap {
width:1000px;
text-align:left;
margin:0 auto;
}

.float-l{ float:left}
.folat-r{ float:right}
.clearfix{ clear:both}

#bg {background:url(images/bg.jpg); height:667px}

/* header */
#header { position:relative;height:260px }
#logo {position:absolute; top:30px; right:130px}
#logo h1 {
font-size:34px;
color:#fff
}
#logo div {
padding-left:100px
}
#nav { position:absolute; top:120px; left:170px}
#nav li {float:left; padding:0 20px;}

/* content */
#content {width:800px; }
.main {width:460px;margin:0 0 0 100px; font-family:Verdana, Arial, Helvetica, sans-serif; display:inline}
#col {margin:50px 0 0 0;width:300px; }
#col .first ul {border-right:#E35C5C 1px solid; padding-right:43px}
#text {width:450px; }
#text h2 {font-size:30px}
#text a { color: #CCCC00}

.side {width:230px; }
.side h2 {font-size:22px}
.side li {line-height:20px; list-style:inside disc; color:#FFFFFF; }
.side ul {margin:30px 0 30px 20px}
.side foto {margin:30px 0 30px 20px}

/* footer */
#footer { background:url(images/ft.jpg); height:133px; position:relative}
#ftinner{ position:absolute; bottom:60px; width:680px; margin-left:420px}
.ftlink {width:500px;}

 

[jackbouwer]

BTW ik heb hem al geprobeerd bij deze:

#text {width:450px;
overflow: auto;}
#text h2 {font-size:30px
overflow: auto;}
#text a { color: #CCCC00
overflow: auto;}

 

[MBDesignerNL]

Verander dit:

#text {width:450px;}

in

#text {width:450px; height: 500px; overflow:auto;}

Je moet zelf even kijken hoe hoog je hem wilt hebben. Dus je moet 'height' even aanpassen naar wat je mooi vind.

Edit: Nee, enkel bij dat wat hierboven staat, niet bij 'text a' e.d. Alleen wat ik hier heb. Succes! laat maar weten of het gelukt is!

 

[jackbouwer]

Hé kermisfreak,

Het is gelukt, wat kan ik zeggen. Hartstikke bedankt, top!

groeten,

Jack Bouwer

 

[MBDesignerNL]

Hé kermisfreak,

Het is gelukt, wat kan ik zeggen. Hartstikke bedankt, top!

groeten,

Jack Bouwer

Graag gedaan!