Homepage Marapets About Huggiez About Me
Credits Affies/Apply Brushes Code Tester Layout Templates My Poems Drag&Drops Pet Names Order a Site Layout

Edited Pictures Popular Fonts HTML Help HTML Tutorials Image Tutorials Music Codes Photography Quotes Make a website

Blends Blogs Backgrounds Club Layouts Marasite Layouts Names Picture Quotes Signatures Sunburst Signs Welcome Signs

online
Layout looks best in firefox





DIV Coding

Rules;;

READ THESE OR BE REPORTED. ;D
Okay. I need rules, because I have already seen my layout style like this stolen from my main layout a while back.
You must follow these rules or you will be reported.
1;; You MAY NOT, I repeat, MAY NOT use the coding I have created in ANY OTHER FORM of layouts. I coded it by hand, and DO NOT want it used for any other reason. I CAN TELL my coding apart from other peoples.
2;; You MAY sell these layouts. But you CANNOT remove the credit located at the bottom. You made the graphics, I just coded it. BUT, you MAY NOT sell these on ANY other sites. I have people playing alot of sites that will KEEP AN EYE OUT FOR ME. So, you WILL get caught and be reported to ANY SITES PLUS marapets.
3;; If you happen to sell one of these layouts that you have created, and post a board, you MUST post the following on the first post;;
I made this layout using godsgrl123 make your own site layout. You can find it at huggiez-lyts.webs.com . She coded it and let me use it. Or something along those lines.
4;; Just remember to not steal the coding. I put my effoort in this. If ONE person is caught, I might take this page down. ;D




Now, let's begin. :D

Hey fooools. Mmkay, so, I'm going to teach you how to add scrolling text boxes OVER an image.
MMmmmkay, so first, open up your image. If you would like to practice with my image, go here

Okay, so next, you can open up whatever graphics program you are using. I'm going to use PAINT.

1So first what I did was just open the image onto PAINT. Now, you're going to want to open notepad or something similar to make your coding in. (:

2 Now, first we are going to start off our code, so we are going to add this-

That just aligns the boxes starting from the left on the image.

3 Next, we are going to grab this code-

Let's break it down. The "overflow" just basically means that it will scroll.
Now, we are going to work with the width, height, top, left, etc.
This step is tricky, but take your time.

How to find "left": We want to do this first. Okay, get this--- when you hover over the image, on the bottom-right it gives you the cordinates. For this, you want to focus on the first number. so to find "left", drag your mouse over to where you want your box to start. In this case, my "left" is 114
Screenie

How to find "Width": Next, take your mouse and go all the way to the end of where you want your box to stop. Use the first number again. I got 517
Screenie
MMMKAY, So NEXT take the number you just got, which is 517 and SUBTRACT the first number you got(for the "left") which was 114 So 517-114=403 and 403 will be your WIDTH.

SO FAR- We have the left(114). We also have the WIDTH, and the number for the WIDTH will be the SAME as for "margin-right" EXCEPT the number will be NEGATIVE.


4 NEXT We are going to do the SAME exact thing for "height" and "top"
To find "top": Use the SECOND number and go to where you would like the box to start FROM THE TOP. I got 97 That will be your "top" number.
screenie

Finding "top": Now, we are going to go to the bottom, where you would like the box to end, and my number I got was 322
screenie
Next, do the same. Take the 'HEIGHT" number, which was 322, and subtract the top number, 97.
322-97=225 So 225 is my HEIGHT NUMBER.
ALSO-- the 'HEIGHT' number is the same number as "Margon-bottom" but in NEGATIVE.

So far, the number we have are;;;
Width&Margin Right- 403 (-403 for margin)
Height&margin-bottom- 225 (-225 for margin)
Top- 97
Left- 114


So next we are going to replace our numbers.
So NOW, we have this-


5 NEXT, we can put our text after that. So farr I made this-


6 NOW, we have to close our table to we can end it, or add more tables. To do this, just insert this after your text-


MMKAY, so that is our coordinates. And if you have more than one box, repeat step 3-6 for every box.

7 NOW, we have to add our image. I'm going to give you the image code style as if you were using it in a club layout.


8FINALLY, we have toclose the WHOLE code by adding what's below-


So here is my code-



Yah, I'm sorry it was really confusing. I'm a bad explainer. Dx but it you have any questions, feel free to mail me. And goodluck!

Below is my final product. ;D




text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text