Scrolling





	More on this site Alt-Web Home Page Chalk Board Intro NEW Formmailer-Tutorial NEW Tooltips on Image Maps Tutorial NEW Cushy CMS with NOF Custom CSS Links CSS Styled Background Images Image Borders on Mouse Over Iframes Print Page Buttons Close Window Buttons Scrollable Divisions CSS Flyout Menus Vertical & Horizontal Centering Centered on Two-toned Background Image Liquid Layouts Images and Text Layout Regions Printer Friendly Pages Web Color Assist Tool Hex Color Chart Favicons Fast Contact Forms Table Menu


	Scrollable Division Box Styled with CSS for NetObjects Fusion Users

Description:

Sometimes you don't need an <iFrame>. Sometimes you just need to display a lot of content in a tiny space. This tutorial shows how to make a scrollable box using CSS and a bit of HTML code.


	Example:

		CSS Styled Div Box For this tutorial I used Verdana font inside this division box. You can use any font family you wish. If none is defined, your site's default fonts will be used. The background-color in this division is set to light gray but you can use any background-color you wish, or omit the background-color option and your division box will assume your page's default background. The border options are solid, dotted, dashed, double, groove, ridge, inset, outset or none. Note: Not all options are supported in all browsers. The height value in px, percents or ems can be adjusted up or down to fit your design. If your div is smaller than the content inside it, a scrollbar will appear. For best results, keep 'width' and 'overflow' set to 'auto'.

Tutorial

Place a text box or table on your page.
Click inside the text box or table cell as if to type a letter and hit Ctrl+T to bring up the HTML insertion window.
Paste the following code into the HTML window:

<div style="font-family:'Verdana', 'Arial', Sans serif; font-size:12px; color:#000000; background-color:#ECECEC; border:2px dotted; overflow: auto; padding:10px; width:auto; height:250px; font-weight: normal; border-color: #D77602;"><h3>Your heading goes here</h3><br><br> More text goes here<br><br> and here...</div>

Adjust fonts, colors, borders, height, etc. to make it your own.
To Help with color selection, here is a Hex Color Code Chart or use this handy Color Picker Tool
Preview or Publish to see the results.

That's all there is to it. We hope you found this tutorial informative and useful.

If you use the free content on this site and you cannot make a small donation, we would appreciate it if you would place a link on your site to ours.

Help feed the kitty

Visit our Free Reciprocal Link Exchange Page. Thank you.

More on this site

Scrollable Division Box Styled with CSS for NetObjects Fusion Users

Description:

Sometimes you don't need an <iFrame>. Sometimes you just need to display a lot of content in a tiny space. This tutorial shows how to make a scrollable box using CSS and a bit of HTML code.

Example:

CSS Styled Div Box

Tutorial

Help feed the kitty