MySpace Marquees

Whether you have your own space on Myspace or a personal page somewhere else, marquee text can be a fun way to express yourself.

Marquees can be a great attention getter!

If you came to this page looking for instructions on how to put a marquee across your MySpace page, please visit Across MySpace Pages to learn how.

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.

HTML Tag Marquee

Let's start with the basic marquee tag and what the HTML looks like.

<marquee>Simple MySpace Marquee</marquee>

Simple MySpace Marquee

Marquee Direction

There are four options in how you can make your marquee scroll on your MySpace page.

They are up, down, left, and right.

Here are some examples:

<marquee direction="up">Marquee Scolling Up</marquee>

Marquee Scrolling Up

<marquee direction="down">Marquee Scolling Down</marquee>

Marquee Scrolling Down

<marquee direction="left">Marquee Scolling Left</marquee>

Marquee Scrolling Left

<marquee direction="right">Marquee Scolling Right</marquee>

Marquee Scrolling Right

 

Marquee Scrolling

The behavior attribute controls how the marquee scrolls on your MySpace page.

Behavior=Scroll

<marquee behavior="scroll">behavior = scroll</marquee>

behavior = scroll

Behavior=Slide

This option only works properly with Internet Explorer. The marquee is supposed to go across once and then stop and remain in place on the screen.

<marquee behavior="slide">behavior = slide</marquee>

behavior = slide

Behavior=Alternate

<marquee behavior="alternate">behavior = alternate</marquee>

behavior = alternate

Marquee Background

You can make your marquee on your MySpace page stand out even more by using a background color.

<marquee bgcolor="#8b0000">Marquee with Red Background to match your MySpace page</marquee>

Marquee with Red Background to match your MySpace page

MySpace Marquee Speed

You can control how fast your marquee goes across the screen on your MySpace page by using a whole number (1, 2, 3, ...).

<marquee bgcolor="#8b0000" scrollamount="300">
     Marquee with Red Background and Defined Speed - faster
</marquee>

Marquee with Red Background and Defined Speed - faster

<marquee bgcolor="#8b0000" scrollamount="1">
     Marquee with Red Background and Defined Speed - slower
</marquee>

Marquee with Red Background and Defined Speed - slower

Number of Passes

You can decide if your marquee will run once, twice, or infinately across your MySpace page.

Here's two HTML code examples.

<marquee loop="3">Marquee that will scroll 3 times</marquee>

<marquee loop="infinate">Marquee that will scroll infinately</marquee>

Since a marquee will scroll infinately by default, I'm not sure when you would use this option.

Marquee Size

Marquee Height

Changing the marquee height can add even more pizzazz to your MySpace page.

The height of the marquee is initially set to the natural line height as defined by the font size of the text displayed on the marquee. Simply add the height attribute and identify the number of pixels tall you wish your marquee to be. Here's a few examples of the HTML code:

<marquee height="50px">Marquee 50 pixels high</marquee>

Marquee 50 pixels high

Height is another attribute of the marquee tag that can be interpreted differently by the various browsers. To assign a height that works for both Internet Explorer and Firefox, you can define the height using an inline style element. Coding your marquee this way also centers the text vertically. The HTML code follows:

<marquee style="line-height:50">Marquee 50 pixels high</marquee>

Marquee 50 pixels high

<marquee height="5">Be careful you don't make the height smaller than the text.</marquee>

Be careful you don't make the height smaller than the text.

Marquee Width

Changing the width of the marquees you display on your MySpace page gives you even more control over how it looks.

<marquee bgcolor="#8b0000" width="150">Narrow Marquee</marquee>

Narrow Marquee

This option may have different results depending upon the browser used. In some cases the background is displayed at the desired width, but the marquee travels across only a portion of the background. By adding an inline style definition, you can better control the width of your marquee on your MySpace page.

<marquee style="position:relative; left: 80px; width:60%">Marquee with a width of 60%.</marquee>

Marquee with a width of 60%.

To learn how to format the text of your marque and to use images to make the marquee on your MySpace page even more attention getting, visit Part II - Marquee HTML Text 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.