Who's where?
Visitor [2] : Site Management
Visitor [4] : News channels
Visitor [2] : Admin
Visitor [23] : Blog|Tutorials
Visitor [1] : Catalog
Visitor [3] : Wizards|playground
Visitor [1] : Resize avatar wizard
Visitor [2] : Google video bar wizard
Visitor [1] : Twitter backgrounds
Visitor [3] : Ajax child links demo
Visitor [2] : Google image map wizard
Visitor [2] : Local search map wizard
Visitor [1] : Itune latest gadget
Visitor [9] : Dotnetnuke templates
Visitor [7] : User Profile
Twitter backgrounds gallery
background6
background10
background9
background8
background7
background4
background5
background3
background2
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)

Summary:

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. :)

Thanks.

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