Text effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

text scroll box

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

SEE THE CSS CATEGORY FOR TEXT BASICS

A scroll box using the web studio text object
This is ideal for placing more text into a tiny space that can be scrolled

WEB STUDIO TEXT OBJECT
The best way to use this is to type all your text first and use web studio for how it will look.
The width will be the size of your text object, then when done put in the code for the height.
To make any changes just take the code out and paste it back when done or use "edit html".

No padding space and no border

Put your text on the page like you always do

120px is the height of your scroll box. You'll see the scroll bar on preview

If you don't see a <P> tag center align.
You can align it how you like after that.

<P style="OVERFLOW-X: hidden; WIDTH: 100%; HEIGHT: 120px; OVERFLOW: auto">

Select your text and on the TEXT tab
in "Clipboard" select "edit HTML" and
replace the <P> tag with this

Scroll Box Example 1
How to use it in web studio
This scroll box has no spacing or any borders added.
The best way to use this is to type all your text first. Then change the <P> code to the text box code.
You can use web studio like you always do to add a background color font sizes and text colors.
The width will be as wide as you drag your text object, but you add the height you want to use in the code provided.

140px is the height of your scroll box.
6px is the space around the text
(web studio re-writes the padding 4 times but it isn't needed)

<P style="PADDING:6px; OVERFLOW-X: hidden; WIDTH: 100%; HEIGHT: 140px; OVERFLOW: auto">

Padding space and no border

Do the same as above but replace the <P> with this instead

Scroll Box Example 2
How to use it in web studio
This scroll box has spacing but no border.
The best way to use this is to type all your text first. Then change the <P> code to the text box code.
You can use web studio like you always do to add a background color font sizes and text colors.
The width will be as wide as you drag your text object, but you add the height you want to use in the code provided.

160px is the height of your scroll box.
4px is the space around the text
1px is the border size
white is the border color
(web studio re-writes the padding and the border 4 times but it isn't needed)

<P style="BORDER: 1px solid white; PADDING:4px; OVERFLOW-X: hidden; WIDTH: 100%; HEIGHT: 160px; OVERFLOW: auto">

Padding space and a border

Do the same as above but replace the <P> with this instead

Scroll Box Example 3
How to use it in web studio
This scroll box has spacing and a border.
The best way to use this is to type all your text first. Then change the <P> code to the text box code.
You can use web studio like you always do to add a background color font sizes and text colors.
The width will be as wide as you drag your text object, but you add the height you want to use in the code provided.

6px is the space around the text
1px is the border size
white is the border color
(web studio re-writes the padding and the border 4 times but it isn't needed)
180 is the height of your scroll box (no px needed)
2 in scrollAmount (and 'scrollamount') is the speed  
3 would be faster for example

<MARQUEE style="PADDING:6px; BORDER:1px solid white;" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 2, 0);" direction=up height=180 scrollAmount=2 scrollDelay=10>

Do the same as above but replace the <P> with this instead

Auto scrolling using an old IE marquee tag with stop / resume on hover added
Didn't test this in all browsers

Marquee Scroll Box
This scroll box pauses on hover.
The best way to use this is to type all your text first. Then change the <P> code to the text box code.


Text Basics
Text in web studio using CSS
More info on text can be found in the CSS category
paragraph & text


About Marquee html
You get a space in the scroll
There is no way to remove the space between the start and end

Thank-you

Text effects in Web Studio 5 - Text box scroll - by Web Studio Next

aaaaaaaaaaaaiii