4thorder(TM) - Code Snippets and Full Scripts

Scrolling Text in Webpage Layout

Question:

hi everyone, i have a quick question. i'm working on a site and the layout is something i havent done before. can someone give me a recommendation for the best way to handle it? here's a screenshot of the rough page:

http://s04.imagehost.org/1445/mockup.gif

The question I have is, How should I go about making that grayed text box scroll? I would like everything else to be stationary and just have a scroll in that one box. What's the best/easiest/most compatible way of doing that; how would you do it? Does anyone have any sites that use the same layout that I can reference? And if the answer is something other than html/frames/tables [eg CSS or something] can anyone provide me with a good starter guide for me?

Answer:

The are of course many ways to do this using HTML and CSS. The easiest for me
is to use a DIV with a style set at OVERFLOW: auto; so that the text will scroll.

CLICK FOR DEMO

Code:

<HTML>
<HEAD>
<TITLE>Scrolling Text Demo</TITLE>
<STYLE>
<!--
body		 { 
margin: 0px; 
scrollbar-face-color:#000000; 
scrollbar-arrow-color:#D2D7E3; 
color: #FFFFFF; font-family: 
Tahoma; font-size: 10pt; 
background-color: #000000 }
-->
</STYLE>
</HEAD>
<BODY>
<DIV style="width: 700px; height: 521px; z-index: 1;" id="main">
<IMG border="0" src="webbackgroundfordemo.jpg" width="700" height="521">
<DIV 
style="position: absolute; 
width: 187px; height: 492px; 
z-index: 2; left:25px; top:23px; 
OVERFLOW: auto;" 
id="scrollingText">
<P>hello</P>
<P>this</P>
<P>is</P>
<P>a</P>
<P>demo</P>
<P>to</P>
<P>explain</P>
<P>scrolling</P>
<P>text</P>
<P>on</P>
<P>a</P>
<P>page</P>
<P>please</P>
<P>visit</P>
<P>4thorder(TM)</P>
<P>Code Snippets</P>
<P>and</P>
<P>Full Scripts</P>
</DIV>
</DIV>
</BODY>
</HTML>

Click here for background image just so it is easier to check out the above code.

Above the DIV with id="main" contains the background image (I took this) in Oscoda Michigan.
Anyway, the DIV with id="scrollingText" is where the magic happens. Notice that the aforementioned "OVERFLOW" style is set there.

Rest is all in the body STYLE.
This works in IE FF AND NN browsers.

Top of Page