Your web home for how to's for web beginners. A jargon-free zone dedicated to helping your web knowledge grow.

Help For Web Beginners

Press CTRL + D to
Bookmark this Page

Marquee Text for MySpace & Personal Webpages

Since this tutorial is about making your marquee look good for your personal webpage or MySpace Profile Page, all of the HTML code shown here will contain in-line style definitions to help ensure that your marquees will present the same across as many browsers as possible.

If you came directly to this page, it might be of help to visit Part I of this two-part tutorial Marquee Code to first learn the basics of using the marquee tag on your MySpace profile or personal webpage.

Since this tutorial is about making your personal web page or MySpace Profile Page look good, all of the HTML code shown here will contain in-line style definitions to help ensure that your webpage will present the same across as many browsers as possible. Since most people looking to learn about marquees are MySpace users, I will refer to personal web pages and MySpace Profile Pages by the combined term of MySpace page.


PSP Go Skins by DecalGirl.com

Page Placement

You may have noticed in Part I - Marquee Code for MySpace, that my sample marquees where indented from the left margin. I controlled this by using some in-line styles in my HTML code. The HTML code I used to create a marquee with a width of 60% and a cornflowerblue background is shown below with an example.

<marquee style="position:relative; left: 80px; background: cornflowerblue;">Marquee indented 80 pixels from left margin.</marquee>

Marquee indented 80 pixels from left margin.

Please Note: If your page uses CSS and floats you may have to test to make sure your marquee does not expand over any other page elements. (MySpace users may not need to worry about this since the layouts are made with tables.) Because the FireFox web browser is more strict in implimenting the web programming standards, and the marquee tag is not considered part of the current standard, some marquee elements may act in unexpected ways on your MySpace pages.

Marquee Text Size

To change the text size of your marquee on your MySpace page, you will need to insert an in-line style definition for font-size.

Increase Text Size: Use a percentage larger than 100.

Decrease Text Size: Use a percentage less than 100.

Please Note: Most usability experts suggest to never make the text smaller than 75-80% to maintain readability.

The HTML code and two examples follow:

<marquee style="position:relative; left: 80px; font-size:125%"> Marquee with larger lettering</marquee>

Marquee with larger lettering

<marquee style="position:relative; left: 80px; font-size:75%"> Marquee with smaller lettering</marquee>

Marquee with smaller lettering

Marquee Text Color

To change the color of the text on your marquee to match your MySpace page, you will need to insert an in-line style definition for the font color.

The HTML code and two examples follow:

<marquee bgcolor="black" style="position:relative; left: 80px; font-size:125%"> Marquee with white letters on a black background</marquee>

Marquee with white letters on a black background

<marquee bgcolor="#ff6600" style="position:relative; left: 80px; color:#66cc00"> Marquee with green letters on an orange background. </marquee>

Marquee with black letters on an orange background.

Image Marquee

To make a marquee that uses an image on your MySpace page, simply replace the text with an image tag.

I have no doubt your artistic talents will exceed mine. Code examples follow.

<marquee behavior="alternate" bgcolor="#000000" style="position:relative; left: 80px"> < img src="images/marq.jpg" alt="image for myspace marquee example" /> </marquee>

example

To make an image marquee scroll smoother, decrease the speed at which the marquee travels.

<marquee behavior="alternate" scrollamount="1" bgcolor="#000000" style="position:relative; left: 80px; color:#66cc00"> <img src="images/marq.jpg" alt="image for myspace example" /> </marquee>

example

Nested Marquee Statements

By using nested marquee statements you can create some really fun effects for your MySpace page.

Up and Down, Zig-Zag Image

image for marquee blue dot example

<marquee behavior="alternate" direction="up" height="50px">
   <marquee direction="right">
      <img src="images/blue-dots.jpg" alt="image for marquee blue dot example" />
   </marquee>
</marquee>

Bouncing Around MySpace

image for bouncing marquee

<marquee behavior="alternate" direction="up">
   <marquee direction="right" behavior="alternate">
      Around MySpace
   </marquee>
</marquee>


Enjoy creating new marquees for your website or MySpace profile!


For the basics on marquees and to learn how to code and control your scrolling text, visit Part I - Marquee HTML Code for MySpace.

MySpace Marquees & Usability

I would be remiss if I did not mention that moving elements such as marquees are typically considered poor design and limit usability. This is why I keep suggesting marquees should only be used for MySpace profile and personal webpages.

In the web programming world, the marquee tag is mostly a forgotten add-on that Internet Explorer once used that doesn't work consistently in the other browsers. The HTML tag marquee is considered non-standard code and will not pass WC3 validation. (That is like saying something is slang rather than proper English despite the point being perfectly clear.) I've left the validation recognition on this page as everything other than the marquee code validates perfectly. (Not my fault they don't like something as cool as marquees.)

However, MySpace has breathed new life into the marquee tag with it's friendly, quirky, and decorative personal profile pages. While I would not recommend using marquees for a business website without careful thought, they are a lot of fun for personal pages and MySpace profile pages and that is why I've included them on HelpForWebBeginners.com.


Go Big With MySpace Marquees

Be sure to visit Across MySpace Pages to learn how to make a marquee that spans the width of your profile.

About the Author

HelpForWebBeginners.com is a website dedicated to providing free, easy to understand, online How To's for true web beginners. While the materials are not free or available for reprints, they are offered freely for individual use. Please use the contact page to let Michele know if this tutorial has been helpful or if there are any other beginner web programming or MySpace related tutorials you would like to see.