MARQUEE Tutorial. (iGOboy)

Bojangles · 16-02-2008, 06:51 PM

Okay so in this thread we're going to learn how to make a marquee on a website. This is for Photoshop users only. Okay so go ahead and get your standard image. I've chosen this image at 600x25 px.

Okay, now you have that down. Your going to need to slice up the image into 3 different section. So go ahead and load your document in Photoshop and click the

(Slice) button. Then proceed to chopping up your image starting at the top drag your slice tool along the top of the image until you get something like this:

Once you have done that and your outcome is something like that still with the slice tool right click the 01 blue box on the slice and click: Edit Slice Options. Then a box should come up, something like this:

On the NAME section, name the image top and click Ok.
Then go to File>Save For Web and Devices. When the box comes up name it top and choose your file path and click SAVE.

Now continue to do the same with the MIDDLE of the image (Dragging the slice tool across the MIDDLE of the image and right click the slice box, should be something like 03 and do the same as you did with the top slice but call it Middle.

Proceed to do the same thing with the BOTTOM of the image, this time the number should be 05.

OKAY, once you have your slices: Top, Middle, Bottom, your going to need to do some coding

So open up your standard text editing software and input this code.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>iGOboy - TUTORIAL</title>          
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">  
<link type="text/css" rel="stylesheet" href="http://www.igoboy.com/tutorial/style.css">
</head>
<body>
<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td background="images/top.gif" height="5"></td>
  </tr>

  <tr>
    <td background="images/middle.gif"><marquee class="style1">Marqueeeeeeeee
    </marquee></td>
  </tr>
  <tr>
    <td background="images/bottom.gif" height="7"></td>
  </tr>
</table>
</body>

Once your done name it index.html and save it to your desktop

Okay, now I bet your thinking "Whats the CSS bit for?" We need this for the background and font. Okay so again open up your text editing software and this time put in this code:

HTML Code:

body {
font-family: Verdana;
    font-size: 11px;
    color: #000000;
  padding: 0;
  margin: 0;
  background: #000000
}

Now what this means is our font for the marquee text will be in Verdana and the size will be 11 pixels, the color of the text will be black (hense #000000, and the background will also be black (#000000)

This time name is style.css and click Save.

Upload all this to your website (Including the images, top.gif, middle.gif, bottom.gif)

And there we go! you have a nice new marquee like the one here www.igoboy.com/tutorial/

Hope you enjoy!

RedCrisps · 16-02-2008, 06:53 PM

tbh i would of thought the mojority of people on this forum would be able to type <marquee> and know what it does.

Bojangles · 16-02-2008, 06:56 PM

Originally Posted by RedCrisps

tbh i would of thought the mojority of people on this forum would be able to type <marquee> and know what it does.

Thanks but that comment was not needed, this is intended for people who want to put a marquee behind an image.

RedCrisps · 16-02-2008, 06:57 PM

coded in tables aswell, thought you prefered div's

Bojangles · 16-02-2008, 06:58 PM

Originally Posted by RedCrisps

coded in tables aswell, thought you prefered div's

I do prefer div's but tables are simple.
So what? If all your going to to is post negative comments just leave my thread alone for it's not intended on YOU,

Invent · 16-02-2008, 06:59 PM

What's the point of all that code?...

HTML Code:

<div style="background-color: #FFF; font-family: Verdana, Tahoma; font-size: 11px;"><marquee>lol for stupid invalid tags like marquee</marquee></div>

Bojangles · 16-02-2008, 06:59 PM

Because that is the way I learn't. Sorry.

RedCrisps · 16-02-2008, 07:00 PM

well learn agen

Edited by H0BJ0B (Forum Moderator): Please do not post pointlessly.

Invent · 16-02-2008, 07:02 PM

I understand that's the way you learnt and I respect you for trying to help others.

But you are teaching people to use bad coding practise by using tables and marquees. (Incase you didn't know marquees aren't valid xhtml).

Bojangles · 16-02-2008, 07:02 PM

Originally Posted by RedCrisps

well learn agen

Please go away. I do something nice and all you can do is find immature and negative comments. This is how I learnt to code with stylesheets. If you don't like it, get out of my thread and code a better tutorial with your expert coding.

Originally Posted by Invent

I understand that's the way you learnt and I respect you for trying to help others.

But you are teaching people to use bad coding practise by using tables and marquees. (Incase you didn't know marquees aren't valid xhtml).

I know but it's the way I find it simple. I'm quite new to coding and thats how I've picked it up, as people progress they will learn different ways, this is to just get an understanding on it all

And yeah I know haha

Sorry for any mistakes I've made.

Edited by H0BJ0B (Forum Moderator): Please do not double post within the 15 minute editing time.

Thread: MARQUEE Tutorial. (iGOboy)

Thread Tools

MARQUEE Tutorial. (iGOboy)

Posting Permissions