---

~Welcome to the world of CSS~

~Cascading Style Sheets~

Print this page so you will have some instructions
while you work with your page.
Go back to the code by clicking HERE

---

~Part 1~

This will be the top part of your page.
This should be at the very top of your page.
It's the opening <<>HTML>,<<>HEAD>,and the <<>TITLE> tags.
If you know what the page title is you may install
the title now before you copy the code.
The title will show up in the status bar of the page.

---

~Part 2~

This is the part of the script that tells the image
or text to start from these locations.
Which mostly means up off the top of the screen.
You shouldn't have to mess with these right now.
I have the values set for this tutorial.

---

~Part 3~

Here is the part of the script that tells the image
when and where to move as well as how fast.
Looking at the example below the following adjustments
can be made.
The 275 tells the image where it will end up as far as height.
The higher the number the lower the image/text.
The =5 would change the speed the image/textwould travel.
The higher the number the faster the movment.
This code example here below would move the number 1 image/text.

EXAMPLE:
function move1() {
document.one.style.posTop += 5;
if (document.one.style.posTop < 275) {
setTimeout("move1()", 50); }
else { setTimeout("move2()", 275); }
}

---

~Part 4~

Besides having the closing <<>/HEAD> tag.
Here is the part of the code that tells the image/text
where to be as far as from side to side.
The higher the number the farther right the image/text
would be on your screen.
The number that would be changed is the 120 in the example below.
EXAMPLE:
#one { position:absolute; top:-275; left:50; }

---

~Part 5~

This is for the page background and text color.
There is also a small part that the script needs
to start the page in motion.
Here is the onload code that starts the page......
onLoad="init();move1();
Then below this is the music code to set your page to music
that compliments the page you are building.

---

~Part 6~

Ok this page will be attacked by the web bug
because thats the nature of the bug LOL.
So this is a java bug alert to let the public know
when the bug is around.

---

~Part 7~

Ok here is the last of the code and this
part is where you break the images up into bits.
Also the closing <<>/BODY> and <<>/HTML> is added here too.
Each of these (<<>div id="one"> <<>/div>) give each
piece a number so it will drop in at a desired time.
You would put the image/text
(<<>div id="one">IMAGE/TEXT HERE<<>/div>)
I took the liberty and put some words and a image
in the code below just to get you started.

---

MrSand41@aol.com

Back to MrSands Place