Who's where?
Visitor [8] : Blog|Tutorials
Visitor [1] : Wizards|playground
Visitor [1] : Twitter backgrounds
Visitor [8] : Dotnetnuke templates
Twitter backgrounds gallery
Support, Tutorials, Articles

Create a scroll bar using CSS only.


here is the example of what we're gonna learn:

All i was doing is turning the text editor to the source mode.

Then opening a div with some style, closing the div, and

moving back into text mode.

Sounds complicated? not at all. here is the code:

<div style="overflow: auto; height: 150px; float: left; display: block;padding:10px;">

after putting the text or images I want to put inside I will

close the

div like that: </div>. that's all.

now I will enter an image just for fun and we'll see what

we get.webskingraft promo banner


now I would like to close that div so I would change into source

mode again and wright that "div I've mentioned earlier.

this is just very basically and you can edit into that div other

styles like: <p style="width:xxpx;text-align:justify;background-color:#acacac;"> etc". (of course you can modify these parameters)


So using the text module, at the point where you would like to start the scrolled part, change to source/html mode, enter the code as seen above: <div style=" the code......">

change back to text mode and just type what ever you like or import images etc". when you like to finish change back to source mode, and enter: </div>

Now back to text mode, continue any way you like.

You can try that at home. :)


P.s you can see an example of how we're using almost the same code "for real" here: Scroll bar example.

posted @ Sunday, August 12, 2007 12:34 PM by Avi A