iWebUnlimited.com » Scrolling Text http://iwebunlimited.com Pushing iWeb to No Limit! Tue, 20 Mar 2012 21:36:14 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 iWeb Tip #21 – Scrolling Text in iWeb http://iwebunlimited.com/iweb-tips/scrolling-text-in-iweb/ http://iwebunlimited.com/iweb-tips/scrolling-text-in-iweb/#comments Sun, 21 Feb 2010 00:33:57 +0000 iJason http://iwebunlimited.com/?p=387 Scrolling Text in iWebScrolling Text in iWeb

There are times when your web design gives you little space for a lot of text.  That’s where this tip comes in handy.  This little bit of html in a snippet will allow you to size your snippet to really whatever size you want and the text will be scrollable  inside.  I’ve even added a bit more advanced code at the end that will allow you to add an image, a link, and more.  The user just uses a handy inline scrollbar to read your text and works very nice.  The other option on this page is to have a auto-scrolling text box.  I have one to scroll horizontally and another to scroll vertically.  They have a lot of options to adjust the speed, direction, font, color, etc.  So let’s get started.

See Demo »

1) Add an HTML Snippet to the page you want your scrollable text box to be.

2) Then paste this code into your HTML Snippet:

<div style="height:425px;width:300px;color:#000000;font:13px/16px Verdana;overflow:auto;">
<font color="004080"><strong>This is my title</strong><br></font>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
<br><br>
<font color="004080"><strong>Another title</strong></font><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
<br><br>
These tags below add breaks from one paragraph to the next
<br><br>
<font color="004080"><strong>This is another title</strong></font><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
<br><br>
<font color="004080"><strong>This is another title</strong></font><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
<br><br>
You could even add an image to it if you add this code:
<br>
<img src="http://www.iwebunlimited.com/images/iweb.png" alt=“iWebUnlimited” />
<br><br>
If you want the image to be on the left and the text on the side use this code:
<div style="height: 0px; left: 0px; position: relative; top: 0px; z-index: 0; ">
<a href="http://www.iwebunlimited.com" target="_blank"><img src="http://www.iwebunlimited.com/images/iweb.png" alt="Image Title" style="border: none; " /></a>
</div>
<div style="left: 65px; position: relative; top: 2px; width: 200px; z-index: 1; ">
This is my text that is along side an image in a scrolling textbox in iWeb.  Pretty cool huh.  Pat yourself on the back and call yourself an html coder.  You can even make a link in here if you do this: <a href="http://www.twitter.com/iwebunlimited" target="_blank">Here's my link</a>
</div>
<br>
<br>
That's all folks
</div>

3) The code in red is where you’ll make adjustments to your own code for your own design specifications and the text in blue is the paragraph text you’ll put in.

4) After making your changes hit apply, publish, and your set! ;-)


Auto-Scrolling Text Boxes:

If you want an auto-scrolling text box then use this code below:

Horizontal Scrolling:

<div align="center">
<font color="000000" size="4" face="Verdana"><marquee bgcolor="transparent" direction="left" loop="true" width=100%"><strong>I Love iWebUnlimited.com's tips!</strong></marquee></font></div>


Vertical Scrolling:

<div align="center"> <marquee bgcolor="transparent" scrollamount="3" direction="up" loop="true" width="100%"> <center> <font color="#000000" size="4" face="Verdana"><strong>My Scrolling Text Title</strong><br>I love iWebUnlimited.com's tips and Tricks.<br><br>This below is just some jabber text to show you what it would look like if there was a lot of text here.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.<br><strong>iWebUnlimited.com</strong></font> </center> </marquee></div>

That’s it, hope that helps.  If iWebUnlimited.com helped you please consider donating by hit the donate button on the sidebar.  Thanks for visiting iWebUnlimited.com.

—iJason



]]> http://iwebunlimited.com/iweb-tips/scrolling-text-in-iweb/feed/ 57