More HTML auction templates and ideas.

To enhance the auction design further improvements can be made using HTML. Some of these are useful some are just frivolous.

Using style codes to create a framed border.

It is possible to have an auction layout with a border or frame around the all the sides with the auction details in the centre.
This border can be either a solid colour or a tiled image.

Click to view an auction example with a framed border using style codes.

One method to create an auction listing with a framed border is to use divisions, <div> </div>, with CSS (cascading style sheet) in-line style codes. The method used here has four divisions.

Here are some auction templates with a border, to download a template right click on the button and select "save target/link as".

Below is the basic CSS in-line style code to produce a framed border design. The first division uses text-align to centre the template in Internet Explorer. The second division sets the width of the template, the left and right margins are set to auto to centre the template in Firefox.

The third division uses padding to set the width of the border and it's background image or colour produces the border pattern. The fourth division contains the content, the background is given some colour and the padding produces a space around the content.

Further properties may be added to these codes to control the font colour, style and also to affect the appearance of the design. Further information for using in-line style codes may be found in the Style codes page.

Left-border background.

Another auction design is to have a border down the left hand side. This can be done by modifying the framed border template. In the third division the padding is set to zero for the top, right and bottom sides and the left side is given a value according to the desired border width.

Click to view an auction example with a left border background.

Here are some auction templates with a left-border, to download right click on the button and select "save target/link as".

Below is the basic CSS in-line style code to produce a left-border design.

Animated gifs.

Animated Gifs are small images which appear to have movement. These can attract the attention of the viewer but too many or the wrong type may have the opposite effect.

Animated gifs need to be stored on an external image hoster and linked to the auction page. There are many web sites providing free animations to download, here is one www.animatedgif.net

This is the basic code for embedding an animated image;

<img src="http://www.yourimagehoster.com/youranimation.gif" />

Scrolling text

Text can be made to scroll horizontally across the screen by using marquee HTML tags. This can be used to attract the attention of some bidders but may also be irritating to view for others. Care needs to be taken if using scrolling text. Below are codes for producing scrolling text (these can also be used to scroll images).

<marquee> </marquee> Denotes the start and end of scrolling text.

Attributes can be applied to the marquee tag to configure the text's behaviour.

• direction="left" Text moves right to left.
• direction="right" Text moves left to right.
• direction="down" Text moves downwards.
• direction="up" Text moves upwards.
• scrollamount="5" Sets the speed of each scroll movement.
• scrolldelay="120" Sets the delay, in milli-seconds, between each successive movement.
• behavior="slide" Stops the text when it touches the opposite side.
• behavior="alternate" Bounces the text within the marquee.