View Full Version : 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.
http://www.igoboy.com/images/marquee.png
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 http://www.igoboy.com/images/slicetool.png (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: http://www.igoboy.com/images/slice1.png
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: http://www.igoboy.com/images/slicebox.png
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.
<!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:
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/ (http://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
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
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?...
<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
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.
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 :P Sorry for any mistakes I've made.
Edited by H0BJ0B (Forum Moderator): Please do not double post within the 15 minute editing time.
RedCrisps
16-02-2008, 07:03 PM
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.
i didn't say i was an expert coder i just sed learn how to code agen:rolleyes:
Bojangles
16-02-2008, 07:04 PM
i didn't say i was an expert coder i just sed learn how to code agen:rolleyes:
Look, my coding works and I've just proved it. It may not be simple but it's the way I have personally learnt it. Aslong as it works I'm happy with the outcome.
RedCrisps
16-02-2008, 07:06 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).
so like how do you code them so they are xhtml valid?
Invent
16-02-2008, 07:08 PM
so like how do you code them so they are xhtml valid?
You can't.
Marquee's were added by Microsoft and were never accepted by the W3C and so it doesn't count as valid xhtml.
You could acheive the same effect using javascript I guess.
RedCrisps
16-02-2008, 07:12 PM
You can't.
Marquee's were added by Microsoft and were never accepted by the W3C and so it doesn't count as valid xhtml.
You could acheive the same effect using javascript I guess.
oh, thought it was sumin like JS or CSS to make it valid
Bojangles
16-02-2008, 07:15 PM
Nah as Invent said marquee isn't valid :P
RedCrisps
16-02-2008, 07:22 PM
Nah as Invent said marquee isn't valid :P
As he sed, they can be coded using javascript :|
Invent
16-02-2008, 07:24 PM
There are workarounds to keep your page valid and still use marquees. Such as:
<script type="text/javascript">
document.write("<marquee>");
</script>
lols
<script type="text/javascript">
document.write("</marquee>");
</script>
Florx
16-02-2008, 07:37 PM
Simon, you used about 5 marquees on HabboLake.com .....
Invent
16-02-2008, 07:39 PM
Simon, you used about 5 marquees on HabboLake.com .....
Was HabboLake valid xhtml? Am I telling people to use marquees?..
I don't get your point..
Hypertext
16-02-2008, 07:41 PM
<marquee> isn't valid html? Oo
RedCrisps
16-02-2008, 07:42 PM
<marquee> isn't valid html? Oo
No, as Simon sed ;)
Its not valid Xhtml not html.
Unpredictible.1
16-02-2008, 07:49 PM
well learn agen
Edited by H0BN0B (Forum Moderator): Please do not post pointlessly.
l m a o
Edited by H0BN0B (Forum Moderator): Please do not post pointlessly.
theJOSH
16-02-2008, 07:53 PM
RedCrisps, you have said before, you were a legend coder, better than most?:S
RedCrisps
16-02-2008, 07:54 PM
RedCrisps, you have said before, you were a legend coder, better than most?:S
I have never said that
theJOSH
16-02-2008, 08:00 PM
I have never said that
Erm, yes you did.
RedCrisps
16-02-2008, 08:02 PM
Erm, yes you did.
Well sorry but i don't remember, and i probably did say i can code HTML but so can most people on this forum. don't try and turn this into a hate thread against me.
theJOSH
16-02-2008, 08:03 PM
Well sorry but i don't remember, and i probably did say i can code HTML but so can most people on this forum. don't try and turn this into a hate thread against me.
It isn't a hate thread,
You stated to me that you were a legend web coder, better than most on this forum :S
RedCrisps
16-02-2008, 08:05 PM
It isn't a hate thread,
You stated to me that you were a legend web coder, better than most on this forum :S
well i don't remember saying that, and if i did then urm yeh, i am like really poor at coding.
Florx
16-02-2008, 08:05 PM
Well better than 'most' isn't hard. Assuming 5% can actually code.
Bojangles
16-02-2008, 08:08 PM
i didn't say i was an expert coder i just sed learn how to code agen:rolleyes:
Also why don't you learn how to spell again? :)
And stop turning this into a hate thread RedCrisps, it's meant for new coders not people who fake.
RedCrisps
16-02-2008, 08:11 PM
Also why don't you learn how to spell again? :)
And stop turning this into a hate thread RedCrisps, it's meant for new coders not people who fake.
AGEN
AGEN
AGEN
I don't see why i need to use proper grammar on the internet.
Bojangles
16-02-2008, 08:12 PM
Don't tell me to learn how to code if you need to learn how to spell :)
Unpredictible.1
16-02-2008, 08:13 PM
l m a o
Edited by H0BN0B (Forum Moderator): Please do not post pointlessly.
Isn't your name HOBJob not ***?
LMAOOOOOO
Bojangles
16-02-2008, 08:14 PM
Isn't your name HOBJob not ***?
LMAOOOOOO
Please don't use my thread for spam :)
Unpredictible.1
16-02-2008, 08:16 PM
Please don't use my thread for spam :)
kk .
Bojangles
16-02-2008, 08:16 PM
kk .
Thankyou:)
Unpredictible.1
16-02-2008, 08:17 PM
Thankyou:)
np .
RedCrisps
16-02-2008, 08:24 PM
Isn't your name HOBJob not ***?
LMAOOOOOO
Haha made me laff
Bojangles
16-02-2008, 08:28 PM
Haha made me laff
Don't spam up my thread?:S
RedCrisps
16-02-2008, 08:29 PM
Don't spam up my thread?:S
k then
Bojangles
16-02-2008, 08:32 PM
k then
Dude, quit it. Stop being so immature and leave this section of HxF get back to the Habbo section.
RedCrisps
16-02-2008, 08:37 PM
Dude, quit it. Stop being so immature and leave this section of HxF get back to the Habbo section.
It's a habbo forum kthx. and your tutorial is crap.
Bojangles
16-02-2008, 08:38 PM
It's a habbo forum kthx. and your tutorial is crap.
If you want to get technical this is HABBOXforum, not HABBOforum. The whole forum isn't based around HABBO incase you didn't notice :)
And LOL thanks, but I'd like to see you do better?:)
RedCrisps
16-02-2008, 08:39 PM
If you want to get technical this is HABBOXforum, not HABBOforum. The whole forum isn't based around HABBO incase you didn't notice :)
And LOL thanks, but I'd like to see you do better?:)
Maybe i don't want to make a tutorial on how to type <marquee />?
Bojangles
16-02-2008, 08:43 PM
Maybe i don't want to make a tutorial on how to type <marquee />?
And you call yourself a coder? It's not just a tutorial on a marquee it's a tutorial on how to put a tutorial ON an image, like if you want to have a content box and put text on it. ;)
Plus you got the marquee bit wrong ;)
It's <marquee>jfbjfbjf</marquee>
Chippiewill
16-02-2008, 08:45 PM
That's not hard, even I can do it. :rolleyes:
@above <marquee/> is valid I think...
Bojangles
16-02-2008, 08:46 PM
Erm did I say it was hard?
It's meant to be as simple as possible which it is.
It's not for me, it's for new coders.
Chippiewill
16-02-2008, 08:47 PM
I mean the image background...
not the tutorial itself
Bojangles
16-02-2008, 08:56 PM
Well I was going to use a style like gradient but I thought it would confuse users with knowing where in the middle to slice it :P
RedCrisps
16-02-2008, 08:57 PM
http://www.igoboy.com/tutorial/
could of done that with no images using css
Bojangles
16-02-2008, 09:04 PM
I think you will find if you look very closely that theres two colours ;)
So no redcrisps, you couldnt.
RedCrisps
16-02-2008, 09:05 PM
I think you will find if you look very closely that theres two colours ;)
So no redcrisps, you couldnt.
Actually, you still could.
Bojangles
16-02-2008, 09:07 PM
Code it for me then big boy.
RedCrisps
16-02-2008, 09:08 PM
Code it for me then big boy.
well i can't see the two colors, make one darker and i will
Bojangles
16-02-2008, 09:09 PM
Lols okay then. I'll post it on here later.
RedCrisps
16-02-2008, 09:10 PM
Lols okay then. I'll post it on here later.
Stop spamming your thread
Bojangles
16-02-2008, 09:12 PM
Stop spamming your thread
As far as I'm concerned I'm just proving a point. Your the one spamming it :)
RedCrisps
16-02-2008, 09:22 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RedCrisps, CSS Marquee</title>
<style type="text/css">
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
body {
background-color: #000000;
margin: 0px;
}
.box {
background-color: #FFFFFF;
padding-top: 10px;
padding-bottom: 10px;
width: 50%;
}
</style>
</head>
<body>
<center>
<div class="box"><marquee>Marquee</marquee></div>
</center>
</body>
</html>
there we go ;]
Bojangles
16-02-2008, 09:27 PM
Did I not say two colours?:)
RedCrisps
16-02-2008, 09:28 PM
well u havent posted them have you?
Bojangles
16-02-2008, 09:31 PM
As I said, I'll do it later, unlike yourself I have social things to sort out.
RedCrisps
16-02-2008, 09:32 PM
As I said, I'll do it later, unlike yourself I have social things to sort out.
well not really, as when i come on this thread your always viewing it. and i actually do have a life aswell.
Independent
16-02-2008, 10:02 PM
probabaly all of this forum know what <marquee> does, and how to use it.
Anyway, why isn't it valid, i've been wondering for ages [;
Bojangles
16-02-2008, 10:06 PM
well not really, as when i come on this thread your always viewing it. and i actually do have a life aswell.
Viewing only means on the same page? Doesn't mean I'm looking at it :S
probabaly all of this forum know what <marquee> does, and how to use it.
Anyway, why isn't it valid, i've been wondering for ages [;
For the last time, It's how to put it on an image :P
And because w3c won't allow it or something.
RedCrisps
16-02-2008, 10:07 PM
Viewing only means on the same page? Doesn't mean I'm looking at it :S
For the last time, It's how to put it on an image :P
And because w3c won't allow it or something.
Your trying to say i don't have a life, do you even know me?
Nice TUT from what I looked at :P
Bojangles
16-02-2008, 10:14 PM
Your trying to say i don't have a life, do you even know me?
Not saying anything?
Nice TUT from what I looked at :P
Thankyou, believe it or not out of the 7 pages of comments your the first person to say "Nice tut" lols :)
RedCrisps
16-02-2008, 10:19 PM
As I said, I'll do it later, unlike yourself I have social things to sort out.
Yeh ok, you havent serd nothing.
Bojangles
17-02-2008, 12:47 AM
Yeh ok, you havent serd nothing.
Whats the matter RedCrisps, have I touched a nerve? Just stay out of my thread as your comments are not needed. Anything I can do to improve this tut guys?
RedCrisps
17-02-2008, 08:52 AM
Whats the matter RedCrisps, have I touched a nerve? Just stay out of my thread as your comments are not needed. Anything I can do to improve this tut guys?
I don't wanna stay out pls.
Bojangles
17-02-2008, 10:40 AM
I don't wanna stay out pls.
Well either stay out or stop giving immature and pointless comments.
RedCrisps
17-02-2008, 10:48 AM
Well either stay out or stop giving immature and pointless comments.
your the most immature person on this forum
Bojangles
17-02-2008, 11:06 AM
your the most immature person on this forum
I'm not going to argue with you no more. Just get out of my thread or I'll be reporting this to a MOD about you spamming it up.
RedCrisps
17-02-2008, 11:28 AM
I'm not going to argue with you no more. Just get out of my thread or I'll be reporting this to a MOD about you spamming it up.
Spam. And do management care? NO.
Bojangles
17-02-2008, 11:31 AM
Little note, habbo-hc, and you say I can't code? lmao..
RedCrisps
17-02-2008, 11:32 AM
Little note, habbo-hc, and you say I can't code? lmao..
yeh, the owner sliced it. i coded it. soz that its sliced badly :S
Bojangles
17-02-2008, 12:21 PM
And you said to me about tables? :)
RedCrisps
17-02-2008, 12:28 PM
And you said to me about tables? :)
Well, i don't go on about how good div's are when i don't use them unlike you.
Bojangles
17-02-2008, 12:32 PM
Div's are better for layouts as the tabular code is much neater. For a simple marquee I used tables for a quick and easy tutorial.
RedCrisps
17-02-2008, 12:37 PM
Div's are better for layouts as the tabular code is much neater. For a simple marquee I used tables for a quick and easy tutorial.
but the marquee isn't tabular data. you probably can't even code using div's. just give in. you noob. u can create abit of gradient. wow.
Bojangles
17-02-2008, 12:46 PM
but the marquee isn't tabular data. you probably can't even code using div's. just give in. you noob. u can create abit of gradient. wow.
Are you just stupid or dumb? The background image (White gradient) is in a table. Hense tabular.
RedCrisps
17-02-2008, 01:01 PM
your one of them geeks that never gives in, kk ur a crap coder like i am just admit to it instead of saying ur da best fu.cking coder on this forum
Bojangles
17-02-2008, 01:03 PM
Yes I'm a rubbish coder all new coders are :S So what, I'll learn? Aslong as my knowledge of coding works I'll continue to code like that until I pick up more skills.
RedCrisps
17-02-2008, 01:11 PM
Yes I'm a rubbish coder all new coders are :S So what, I'll learn? Aslong as my knowledge of coding works I'll continue to code like that until I pick up more skills.
k then ;]
Bojangles
17-02-2008, 01:15 PM
k then ;]
Now please, get out of my thread and go advertise habbo-hc LOL
RedCrisps
17-02-2008, 01:41 PM
Now please, get out of my thread and go advertise habbo-hc LOL
k then ;]
Agnostic Bear
17-02-2008, 01:49 PM
What is the point in this tutorial when marquee isn't even a valid HTML tag in the first place.
Bojangles
17-02-2008, 01:54 PM
I do something nice and all I get is "no point in this" I'm trying to help people who want a marquee on top of and image.
RedCrisps
17-02-2008, 02:38 PM
I do something nice and all I get is "no point in this" I'm trying to help people who want a marquee on top of and image.
well they can do it themselves kk?
Bojangles
17-02-2008, 03:09 PM
Not everyone knows how to code you moron.
RedCrisps
17-02-2008, 03:31 PM
Not everyone knows how to code you moron.
Then they shouldn't be on this forum. Don't call me a moron when clearly ur the biggest one here
php.net
17-02-2008, 03:53 PM
Not everyone knows how to code you moron.
Like yourself, producing such junk like that.
Agnostic Bear
17-02-2008, 03:55 PM
Like yourself, producing such junk like that.
Quoted for truth.
php.net
17-02-2008, 03:58 PM
Quoted for truth.
Lmao at your sig.
Agnostic Bear
17-02-2008, 04:00 PM
Lmao at your sig.
http://www.fat-pie.com/thechildthatsmeltfunny.htm
Watch.
Also on topic:
stop using marquee it's a stupid effect and not even a valid HTML tag.
Bojangles
17-02-2008, 04:49 PM
Sorry I tried to help people :/
Want to hide these adverts? Register an account for free!
Powered by vBulletin® Version 4.2.5 Copyright © 2024 vBulletin Solutions Inc. All rights reserved.