Expression-Web-Tutorial.com

www. Expression-Web-Tutorial .com

Call 1.866.363.5633

 

view cart


A Place For Beginners


Make a Scrolling Text Box in Expression Web

Using CSS to Create a Scrolling Text Box

This tutorial will work for any version of Expression Web, including Expression Web 4.

In this Expression Web Tutorial, you will learn how to create a scrolling text box by using a div tag and triggering overflowing text.  You will use the CSS Overflow Property to add a scroll bar to the div.

Read the tutorial below to learn the correct steps to take in order to create this scrolling text box.  Also, take a look at the demo.

Demo

 

Scrolling Text Box - Step by Step for Beginners

Step 1:  Place a div on your web page  (start with a new web page just to practice with at first.)

Step 2:  Create the Following CSS Style for the Div -

  

 .text-box { width: 220px; float:left;}

(float is optional and depends upon your situation.)

Step 3:  Apply the .text-box style to the div tag.

 Do this by first selecting the div in Design View by single clicking on it. Then, right-click on the .text-box style which is located in the Manage Styles Panel, and choose Apply Style.   

Step 4:  Next, go to www.Lipsum.com and generate 1 paragraph of dummy text, and paste this text inside the div on your page.

Step 5:  Now highlight the text you just pasted, and apply the paragraph tag.  The paragraph tag is located in the dropdown menu seen here. 

You can find this dropdown menu of tags in the formatting toolbar at the top of the interface.

**You must apply the paragraph tag to your text so that in the next few steps you can easily apply a new CSS Style to it.

  

Next - Trigger the Scroll Bar with Excess Content

Next, we have to modify the .text-box style so as to trigger the scroll bar.  The way we do this is to first create overflowing text, then use the overflow property to deal with overflowing text. 

Step 6:  Right click on the .text-box style and choose Modify Style.  Assign a height of about 300px.

Step 7:  Now click on the Layout Category and set the overflow property to 'auto'. overflow: auto means a scroll bar will be used only IF it is needed.  But we already know it's needed.  So why choose auto?  Well, I found that auto only creates a vertical scroll bar whereas 'overflow: scroll' creates both a vertical and horizontal scroll bar.  I only wanted the vertical scroll bar in this situation because I only created overflowing text in a vertical manner. 

Step 8:  (optional)  I pasted the dummy text again so as to create more overflowing text and then I increased the height of the div so that it was a tad bigger. 

Step 9: Next, we need to add some padding to both the .text-box and the paragraph.  I also added a border to the text box to give it clearly defined boundaries. 

You can experiment with all this, yet here is the CSS I created in Demo 1:

 

 .text-box { 
 width: 204px;
 float: left;
 margin: 10px 10px 10px 20px; 
 padding: 8px; 
 height: 400px;
 overflow: auto;
 font-family: arial, Helvetica, sans-serif;
 font-size: 13px;   
 background-color: #B7DBFF;    
 border: 2px ridge #99CCFF; 
 }

Step 10:  Now style the paragraph text located inside the text box:

 .text-box p { padding: 5px 10px 0px 10px; margin-top: 10px; margin-bottom: 10px; }