MaraHTML

¤ Tisha Look's HTML Tutorial ¤

Creating Your Own Club Layout

Over the years, several people have requested a Club Layout tutorial. I finally got around to doing it. For this tutorial, you will need a basic understanding of HTML and CSS. Just copying and pasting my code does NOT make you a coder. =)

Many thanks to Alcyone and thesel for testing this layout tutorial!

This is an example of the layout you'll be creating. Don't worry if it doesn't have enough boxes - you can always add those later. (Click on the thumbnail image to see the layout full-size.)

Ready? Let's go...

Step One: Get A Banner
First you will need a banner. For the purposes of this tutorial, it should be exactly 600 pixels wide. How high it is doesn't matter, just make sure it's exactly 600 pixels wide. If you don't have any graphics skills, please post a request in the Graphics forum for a club layout banner that's 600 pixels wide. 600 pixels. I just wanted to say it again. =)

Step Two: Write the HTML
This layout is made of tables so we're going to start out with the first table code. The first table consists of one row with 2 boxes:

Notice how I set the TD width to 300? I did that because there are 2 boxes in the row and I want them to each be 50% in size. I could also specify the width in the CSS later.

Now that the first table is coded, we need to code the second table. This will give you a row with three boxes:

This time I set the TD width to 200 since there are 3 boxes in the row.

Next we'll code the third and final table. This one only has one box so it should be relatively easy to understand:

Now it's time to put it all together. If you followed the steps above, you should have a layout that looks something like this:

Save your work and view it in your web browser. It looks nothing like the example but don't worry - we're going to fix all of that when we add the CSS.

Step Three: Add The CSS
Now we're going to tackle the CSS (a.k.a. style) of the layout. This is where you will specify things like fonts, colors and borders. Let's start with the table. How wide should it be? The banner is 600 pixels wide so we should set our table width to 600. We also want to specify the height to 175 and set the padding to zero. Since I'm going to use this CSS for all my tables, I'm going to give it the name "main":

The table for the single box at the bottom of the layout doesn't need all that, so I'm going to create another entry in my CSS for that particular table and name it "footer":

That covers the tables so let's move on to the table definitions (a.k.a. the boxes). We have a lot to specify including the background color and font/font size. The first TD I need a style for is the main text boxes. I've named them "club":

Here's what I just did: I set the background color to purple, gave it a 1 pixel solid black border, aligned the text to the top of the box, set the padding to 2 pixels and specified the font type, size and color.

Once again, we have a box that's shorter with a smaller font size than the others and, therefore, needs a CSS entry of its own:

If you don't care about the text size, you could just as easily remove the td.footer info from the CSS and use the td.club class instead.

Now we're on to the headers. They're made using the H3 tag so I'm going to specify the colors, border and text alignment using the following code:

By using this CSS, I'm telling the browser to make the background of my header white with black centered text and a black dashed border.

We have one more piece to add to the CSS and that's for a DIV tag that's going to hold our text. This will keep the boxes from "growing" when a lot of text is added:

With this piece of code, I'm telling the boxes not to be any higher than 150 pixels and to keep the text centered.

You should now have a lot of code - some CSS and some HTML. If you put it all together it should look something like this:

Notice that I only used the STYLE tags twice - once at the beginning of the CSS and once at the end. If you save your work and view it in your browser, you'll notice it still looks nothing like our layout is supposed to. That's because we still have to make some modifications to the HTML.

Step Four: Modify The HTML
We have all the CSS and most of the HTML written so now we need to modify the code so the CSS is being called correctly in the HTML.

The first style item is table.main so let's start with that. Remember we're only going to use this with our first two tables. Modify the HTML code for the first two tables so it looks like this:

All I did was add class="main" to the first two tables. Adding a class just tells the HTML to look at the CSS for things like color, fonts, borders, etc.

Next up in the CSS is table.footer which we're going to apply to the last table only. Modify your HTML code for that table so it looks like this:

Once again, all I did was add class="footer" to the last table code. This tells your browser to go look for the table.footer information in the CSS.

Now we need to modify the code for the TD tags. Remember how we added td.club to our CSS? Well we're going to add that information to our HTML like this:

Remember to add class="club" ONLY to the first five TD tags. The last TD will be modified to look like this:

The last modification will add a scrollbar to each of your boxes. Remember the H3 and DIV info we put in the CSS? We need to call it in our HTML now. Find the first five occurances of "Text goes here" and replace them with the following:

<h3>Header</h3>
<div class="text">
Text goes here
</div>

Finally, replace the last instance of "Text goes here" (the one in the footer) with this code:

<h3>Header</h3>
<marquee behavior="alternate">Marquee text goes here</marquee>

I added the header and a marquee to the last box and set the behavior to "alternate" so it will bounce back and forth.

Step Five: Add The Banner
Now it's time to add the banner. Look in your code for the </STYLE> tag. Right after that, but before the first TABLE tag, add the following piece of code:

Make sure the closing > goes on the next line by itself. This is not proper HTML but it's required in order for the image to show up in your club. Also, be sure to replace image url here with the correct URL (link) to your banner image.

You're done!

Save your work and preview it in your browser. Aside from the banner image, your layout should now look like the example. If it doesn't, go through the steps again to see what you missed. If you still have problems/questions, please maramail me and I'll help you through it.

Step Six: Add More Boxes (optional)
Now that you've successfully coded my layout example, chances are you'll want more than 5 boxes. Let's say you want your layout to look something like this (Click on the thumbnail to see the image full-size.):

This modified layout has 12 boxes instead of just 5 plus 2 shorter, single boxes with marquees. Let's break it down:

First Row: Two Boxes
Second Row: Three Boxes
Third Row: One box with marquee
Fourth Row: Two Boxes
Fifth Row: Three Boxes
Sixth Row: Two Boxes
Seventh Row: One box with marquee

The first, second and third row are already done. So all you need to do is copy and paste pieces of the existing code to the end of your layout. For example, the fourth row has two boxes. So go into your HTML and look for the first table that has the 2 boxes:

<table class="main" cellspacing="0">
<tr>
<td class="club" width="300">
<h3>Header</h3>
<div class="text">
Text goes here
</div>
</td>
<td class="club" width="300">
<h3>Header</h3>
<div class="text">
Text goes here
</div>
</td>
</tr>
</table>

Copy all that code, go the bottom of your layout and paste it in. Do this for every other row you want to add to your layout until you're satisfied it has enough boxes.

That's it! Now you're really done. Again, if you have any questions, please don't hesitate to ask!

¤ NAVIGATION ¤

¤ Home

¤ HTML Tutorial:

Intro

Adding Graphics

Working With Text

Working With Colors

Adding Links

Creating Tables

Marquees

Scrollbars

Headers And Footers