Alt-web

 

 

More on this site

Alt-Web Home Page

Chalk Board Intro

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

 

 

 
banner

 

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 of your div can be adjusted up or down to fit your design. If your div is smaller than the content inside it, a scrollbar will appear. If bigger than content, scrollbar will disappear.

For best results, keep 'width' and 'overflow' set to 'auto'.
 

Tutorial

  1. Place a text box or table on your page.
  2. 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.
  3. Paste the following code into the HTML window:

    4. <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>

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

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

 

 
Reach the World with Alt-Web

If you use the free content on this site, please provide a link from your site to ours. Or visit our Free Reciprocal Link Exchange Page. Thank you.
 
© 1995 - 2007 Alt-Web Design and Publishing
Nancy O'Shea