Erns Eporium

Using style codes for eBay auction design.

Introduction

Another way to create a good looking auction listing is to use HTML division codes in conjunction with style attributes. This can be done without the need to use HTML tables however style codes can be applied to most HTML tags including tables. Below are two examples each of which use four divisions, click on the thumbnails to view.

Auction Example Example 1, ready to insert into an eBay listing.

Auction Example Example 2, ready to insert into an eBay listing.

Style templates

Below are six auction templates using division and style codes. These are designed for simplicity and are ready to use. They are designed to be used with the free HTML-kit editor, which can be downloaded from www.chami.com . Another useful tool is Topstyle Lite, which is a free version of a style editor and can be downloaded from www.newsgator.com . This works in conjunction with the HTML-kit editor to produce the style codes.

Here are six templates, right click on a button and select "save target/link as". More templates are available in the templates page.

Open a template with the HTML-kit editor, in the editor view type in the description and paste in the photo links and save. The design is then ready to be put into the ebay listing. No further knowledge of HTML divisions or styles is required however more detailed information is given below so that the designs may be customised.

Division codes

<div> </div> Denotes the start and end of a division, these can be used to provide structure to an ebay auction listing design. The division tags can be given style attributes which will affect the appearance of the division and its content. In the example auctions four divisions are used and in the style templates just three.

Margins, paddings and borders

margin
border
padding
This is the
content area

The appearance of a division is controlled by using margin, padding and border style attributes. These form a series of boxes with the content in the centre. Surrounding the content is the padding, this has the same colour as the content background.

Next is the border. On the outside is the margin, this is transparent and provides spacing between elements.

The margin, border and padding boxes have a top, right, bottom and left sides each of which can be assigned a size. In addition, the border sides can be assigned colours and styles.

Giving, for example, the padding a single value will give all four sides that value. Different values can be assigned to the top, right, bottom and left. Like this; (Note order; top, right, bottom, left.)

padding: 0em 1em 0.2em 0.15em;

A value of zero means there is no padding on that side. Alternately the values can be set individually, like this;

The margin and padding can be used to position divisions and content within the auction listing. The margin forms space between elements and the padding positions the content within the division.

There are several units of measurement, only two of which will be used here; pixels (px) and ems (em). One em equals M, that is the amount of space a capital M uses.

The border can be assigned styles, there are several different style types but not all will display correctly with all browsers. Here are a few that do work;

Tip: Border style codes can be added to an image tag to give the image a decorative border.

Backgrounds

The content area can be assigned a background colour or image, this colour/image will extend into the padding area. The background image needs to be hosted by a free image hoster such as Photobucket. The code for adding an image is;

background: #e6e6fa url( http://www.yourimagehoster.com/yourimage.gif );

This code will tile the image over the content area background. If the image does not display then the colour will, if only a coloured background is needed then omit the image code.

How the background image displays can be further modified by using the repeat properties, shown below;

Shown below are examples of the coding and how they will display. The background colour covers the areas not covered by the background image.

Content styles

The division can be given style attributes that control the appearance of the text. There are many such attributes, here are a few that are of most use for ebay auction listings.

These values will be applied to the content, including other divisions, contained within the division. HTML coding can still be used within the division to over-ride these values, this can also be done by using divisions with different style values. HTML tables do not inherit division styles and so tables, if used, need to be given their own style settings.

Tip; If you want text or a list to be left aligned, place them in a division and use the style code; text-align: left; . Use the margin/padding attributes to position the division and it's contents. ( See example 2 )

Conclusion

Style codes can create good looking auction listings and are more flexible than the traditional HTML tables. There is much more to style codes than covered in this brief outline, only by experimenting with them will their full potential be realised.