Bakers’ Dozen 2.0
Let’s make a listing template with just 13 HTML tags!

Lesson One

Using just the thirteen HTML tags in the table above we are now going to create a complete listing template. We are going to use one of the examples from the regular course lessons but you could easily use any other design. The key is to separate in your mind the main layout elements, using tables, divisions and backgrounds, from the content elements including title, description, pictures and terms. The layout portion can be used over and over by just changing some of the content portions.

First, we will start by selecting our background graphics. We want three different backgrounds that tile seamlessly. The inner background should provide a good color to display text. To make things easy I’ll use the three graphics from our previous course example:

These will form the outer, frame, and inner backgrounds respectively:

And, we may remember from the course, the code for producing a three layer template is something like this:

I’ve separated each of the code lines with a blank line to make them easier to read. Let’s look at each line in turn to see what was done. The first line:

opens the table and zeros the old-style attributes border, cellpadding and cellspacing. The style attribute sets the table width to 680 pixels. I chose this width here because it is the maximum size I can contain within the space alotted in my course page as it is designed. If I was creating an actual fixed width template I would likely set this to 760 — a good width for viewing on 800×600 resolution screens and above.

Remember, though, if you have an eBay store and want to have the left margin section for category links, etc., then you need to take this into account when determining a fixed width for your template. Since most screens today are set to 1024×760 resolution, or above, you would probably be okay with a 760 pixel width in any event.

The style attribute also sets a 1 pixel (single line) border with a color of #646464 (dark grey). I like using dark grey instead of black sometimes just because it isn’t quite so harsh. You don’t really need a border here but I find that eBay doesn’t always allow templates to run right to the edge of the view area and a solid line outer border just seems to provide a finished look to the template, so I usually include this

The style attribute also contains the background grahic URL. Additionally the old-style align attribute centers the template in the available page space. You do not need to center-align the template if you set your template to fill the entire available space (width: 100%).

The second line:

opens the table row and table data cell and sets the padding for the cell at 30 pixels on each side. You can adjust these values to suit the look you want. 30 or 40 pixels seems to work well for me.

At this point our template consists of just the first background and, with closing table tags in place, would look something like this; just one layer of tiled background:

The third line:

opens the first division box which is where the second layer background will go. Within the style attribute we set the padding inside the division box. This provides the amount of background that will show around the next layer. We also indicate the background graphic URL. With just these three lines (and appropriate closing tags) we would get this:

The fourth line:

is identical to the third line, with the exception of the graphic specified, and defines the inner division box. With all three layers in place the template is shaping up well and would look like this:

Before adding text and other listing content, we need to decide if we want some sort of borders to separate the layeers of graphics used. If we want a simple line border we can do it by adding the border parameter to the division tag style attribute, like this:

which will look like this:

In this case I’ve chosen to use a 2 pixel wide solid white border (border: solid 2px #ffffff). You can easily change width and/or color by addjusting the values. Experiment with this on your own, including changing out the backgrounds with different graphics you locate yourself. It won’t take you long to become very comfortable with creating template layouts using this design or any of the other designs from the course.

The fifth line:

is the paragraph tag. It sets the alignment, font, size, and color, of the text contained within the element. The margin setting (zero pixels) turns off the normal spacing that goes around (top and bottom) paragraph elements. In some browsers this doesn’t matter but in others it will add more spacing which will through off the balance of the layers. This is a good thing to know about. When things don’t lay out exactly as you expect them to — when spacing is off one way or another — consider that you may need to zero out some of the values that you might otherwise just ignore.

Adding our original sample text back in, this simple template layout will now look like this:

And, so far, we have done all this with just five tags: table, table row, table data, division and paragraph.

[ top of page ]