Latest Featured Articles
New two columns valid skin package.
Posted at:Wednesday, October 29, 2008 Viewed:(94)times. "Hi,I would like to announce our new skin package, "Nukedesigners two columns for dotnetnuke."The va..."....Read more....
Takeslides at photobucket.
Posted at:Saturday, August 16, 2008 Viewed:(273)times. "Hi All! I'm quite excited to share here that "takeslides" was just added to the "Photobucket Applic..."....Read more....
Takeslides.com at Orkut and facebook.
Posted at:Saturday, July 26, 2008 Viewed:(352)times. "Well these couple of month were quite overwelming. From the point of launching takeslides at hi5.com..."....Read more....
Takeslides at hi5.com
Posted at:Sunday, June 01, 2008 Viewed:(448)times. "Hi! Just a few hours ago takeslides.com was launched at hi5.com."....Read more....
Takeslides.com is launched!!!
Posted at:Tuesday, May 13, 2008 Viewed:(580)times. "Hi Everyone, I'm glad and excited after quite some long time of silence, (at least at "nukedesigner..."....Read more....
iTune latest RSS slideshow gadget
Posted at:Thursday, February 07, 2008 Viewed:(683)times. "Hi! We have just released our new gadget. It is a slideshow of iTunes latest by all categories. Yo..."....Read more....
Exciting news for Picasa, Photobucket and Flickr users!
Posted at:Tuesday, January 22, 2008 Viewed:(827)times. "TURN your RSS buttons at the  bottom of any of your albums pages to a beautiful slideshow withi..."....Read more....
"Announcements" new feature in the social bookmarking template
Posted at:Saturday, December 15, 2007 Viewed:(821)times. "Hi! We've added a new  "Announcement" feature to our "social bookmarking template". Please ta..."....Read more....
A new forum as well.
Posted at:Thursday, December 13, 2007 Viewed:(932)times. ""....Read more....
New features: A newsletter and a new catalog
Posted at:Thursday, December 13, 2007 Viewed:(1149)times. "Hi all! I'm excited to announce those two new features. The first is the newsletter which I'm usin..."....Read more....
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

comments

Joe wrote:
""display: block", it's unnecessary, coz div tag by default it's a block element.

Btw, nice skins. i rarely saw a dnn website with a tabless design "
posted @ Sunday, August 12, 2007 11:55 PM
Avi A wrote:
"Hi Joe, yes you're right. It is unnecessary and actually it wasn't there. Thanks for the feedback.
A few more words about it:
display: block; means that divs will be displayed one under the other. Each one with a full width of the parent div's container/box.
display: inline; will let you add width measures to those divs, so you can put them one beside another, mainly using "float" parameters.
"
posted @ Monday, August 13, 2007 3:01 AM
Faias wrote:
"This is a great hack that works great in IE but Firefox just ignores it. Any ideia why?"
posted @ Thursday, September 06, 2007 8:31 AM
Avi A wrote:
"It works in firefox. Try it again! :)"
posted @ Thursday, September 06, 2007 10:38 AM
Faias wrote:
"You're right, it works in Firefox.
By the way, if you want an horizontal bar you could use something like:
''
YOU'RE STUFF HERE
''"
posted @ Thursday, October 25, 2007 9:27 AM
Avi A wrote:
"Thanks!"
posted @ Sunday, October 28, 2007 8:34 AM

Name (required)

Email (required)

Website

Enter the code shown above: