This page will teach you all about coding your guild layout with invisible boxes, AKA layered divs. One requirement for this tutorial is that you already know how to use HTML tables, or at least understand how they work. Without the knowledge of tables, you will not understand this tutorial very well. You can learn the basics about tables at the HTML Guide in the tutorials section on this site.
All right. There is one more thing before the tutorial actually begins. Check the layout you are trying to code. Are all of the spaces where you want to put text lined up? Here is an example of what I am talking about:
-click to see example-
Notice how the boxes aren't "overlapping" or uneven? Now, here's an example of one you can NOT code with div layers because the boxes are not even and exactly aligned with each other:
-click to see example-

Now that we have sorted out if you can use your layout or not, keep reading.
You first need this code:

Things in the code to customize as your own:
table height="400" width="500" : Change the height and the width in the code so it's the height and width of your layout.
background="URL_OF_YOU_LAYOUT"> : Change "URL_OF_YOU_LAYOUT" to the..URL of your layout. If you don't know what a URL is, or how to get it, you can check out the tutorial all about it in the Tutorials section of this site.
div style="overflow: auto; width:220; height:180" : When toying with the code, you may need to change the height and the width of your div box, so it's the same size as the place on your layout where you want your text to go.


Depending on how many places you want to put text, you may need to put more than one div box. So you don't have to dig through coding, here is the exact code for another div box:


All right! Now, you will notice the HTML table mainframe in the code I gave you. Your knowledge of Tables is now going to come in handy. Starting now, this tutorial is a huge example of what you do! You MIGHT NOT have the same kind of layout I am teaching you how to code, so you will have to use what I did and figure out your layout for yourself.

All right, say you have a layout with a place for text in the top right corner, and the bottom left corner of your layout, like this one:
-click to see example-


Moving Right
Right now, your div box is aligned on the left of your table (and layout). What I am going to show you how to do next will push your layout over to the right.

Now you are going to code the first box onto the layout. Look at your code in notepad or in your guild, and add a cell in right in front of the cell with your first div table in it. Code looks like this now:

Next, in the <td> add a width to it. You width should be something close to the width of the space for text in the bottom left of your layout. Now the code looks something like this: <td width="100"></td>
After you do that, you are going to add another <td> and </td> to the code right after the first one you add. Then add a width to that one, too. The entire code should look something like this now (with your customization, of course):


Now, if you haven't already, save this code. If you have it in Notepad or other HTML editor, save the file. If you have it in your guild already, save your work. If it is not already in your guild, you should put it in there now and preview what it looks like already. Not at the top? Not completely on the right side of your layout?

This next bit will show you how to push your div box all the way to the right. What you do is, in the second <td></td> that you put in your code, adjust the width until you div box is as far right as you want. Making the TD cell wider, will take away space your div box has in its cell.


Moving UP
Now you've got your div box on the right, but it might not be at the top of your layout/ where you want it. This next part will tell you how to move your div box to the top!
What you do is add <tr><td height="25"></td><tr> to the code, right after the last </tr> that is already in the code. Note that you can change the height to whatever suits you, as this is what pushes your first div box up to the top of your layout. To push it up, I would wait until the next step (adding another div box). For now this is what your code should look like, with you customizations:



Adding your second div box in with the coding
Now you have the first box aligned, it's time to add your second one (Note that if you are not coding a layout similar to the one used in this example, you can add your own at leisure).
With this code (and your customizations):


You are now ready to carry on with adding your second div box. What to do now is add another <tr><td> to your code, right after your last </tr> Next add the div box code:

and directly after that, add </td></tr>
Your code, completed, should look like this:


Save again, if you haven't been, and look at your guild's front page again. Is there anything wrong?
Some common problems after this are: the layout doubled up! My top div box is NOT at the top! The text is overflowing where it is supposed to be!


Solutions:

1: The layout is doubled up! What do I do? This means you might have given too much height or too much width to some area, in the coding. You have to look through and make sure you have heights and widths correct. Sometimes for things you want at the top or bottom to BE at the top or bottom, you made the center<tr> very high numbered. This may cause your guild layout to become overlapped, so what I suggest doing is making the height or width of your div smaller.


2: My top div box is not at the top! What do I do? This means you have to toy with the middle <tr> some more. Making it larger should push your first div box up. It will also push your bottom divs down, and can cause problem #1.


3: The text is overflowing where it is supposed to be! What do I do? This means that you probably forgot to customise to height and width of your div boxes. Once you do that to fit in the space you made on the layout for text, your text shouldn't overflow anything.

You should now be done! If you have any problems with this tutorial, please contact jadey213@yahoo.com


Let's go HOME!