Acrobat X Files

Home > Programming > CSS Tutorial

Div with Scroll bar

Sort Desciption:

A very useful css hack for designers. So coming back to our tutorial, if you want to have div with only horizontal scroll bars, you can write like this **

Content Inside:

Div with Scroll bar Contributed by Administrator Wed, 21 Mar 2007 I am going forth with this tutorial even though it is second in the poll results. The reason is that creating a joomlafied template from an open source template is lot more complicated and it takes me two days to make one for my site with final touch so that it works fine in all common browsers and everyone knows the crap IE. Also I would need to make a video tutorial to really give a nice enough explanations for how and what to do to joomlafy an open source template, but unfortunately I am not having so much time right now to do it expecially becasue I have to first find out how do yo make a video tutorial. If someone has some info on creating a video as I explain things on this tutorial, I would be highly obliged to know it. This tutorial is about creating scrollable div in content which is really not some smart programming but only about using css properties create one. Lets go step by step. Example #1-Create a div with both vertical and horizontal scroll bars: css style to use- **<div style="width:300 px;height:100px; overflow:auto;">some text</div> * should produce something like this I am going forth with this tutorial even though it is second in the poll results. The reason is that creating a joomlafied template from an open source template is lot more complicated and it takes me two days to make one for my site with final touch so that it works fine in all common browsers and everyone knows the crap IE. http://www.joomlaprodigy.com/administrator /index 2.php?option=com_content The horizontal scroll bar would appear if you have wider content. #2-Create a div with either vertical or horizontal scroll bars but not both: This one would be needed in case you only want to have scroll bar in only one direction. The syntax for this kinda scrolling div is little tricky for the reason of browser issues. The solution is little more lengthy but still ...

Source: www.joomlaprodigy.com

 

Related Files

The 30 minute CSS tutorial

Filed under: Programming and CSS Tutorial
They free your content (the HTML document) from the layout (the CSS file), so you may change your website ... With CSS, you first define the style. Then as you are writing the HTML, you apply the required ...

12 CSS LAYOUTS

Filed under: Programming and CSS Tutorial
A great tutorial by Jeffrey Zeldman that chronicles the steps needed to create a ... The Box Model Hack Lovingly crafted by Tantek Çelik, the Box Model Hack (www.tantek.com/CSS ...

12 CSS LAYOUTS

Filed under: Programming and CSS Tutorial
Great examples of multicolumn layouts created with absolute positioning.

Formatting Web Pages with Style Sheets

Filed under: Programming and CSS Tutorial
This way, when you want to change the look and feel of your Website, all you need to change is the style sheets. Style Sheet Fundamentals Style sheets, or more properly Cascading Style Sheets (CSS) ...

Flash sty ling with CSS and Flash

Filed under: Programming and CSS Tutorial
... may 2007 .net technique flash Knowledge needed Basic CSS, Flash ... Key styles such as margins, fonts and font sizes can be grouped ... or tags class attribute. Getting started In this tutorial, Ill ...