Archive for the ‘CSS’ Tag

Making eBay auction listings with HTML templates

Creating HTML listings gives you a great advantage over other dull and chaotic looking auction listings by giving the listing more flair and structure. They can make your listing stand out by create a lasting impact on the buyer and persuade them to buy your items.

So here I give an introduction of how to make an html listing using HTML and CSS. Don’t get scared, it is really simple as you will see below. The code explained below will generate a listing that looks like this (which will be embedded within your eBay listing):

HTML auction listing

HTML auction listing

First we define the styles that we will be using in the listing. You don’t need to understand this completely now, you can have a look, and as you move along this article, you will have a better idea of what it means.

So here’s the CSS styling.

<style>
#template_design {font-family:”Trebuchet MS”;}
#template_design .section {font-size:14px; padding-bottom:15px;}
#template_design .section h2 {font-size:18px; background-color:#eeeeee; padding:3px;}
#template_design .section h3 {font-size:16px;}
#template_design .section p {margin-left:5px;}
#template_design .section p.imagesSection {text-align:center;}
#template_design .section p.imagesSection img {margin-right:10px;}
#template_design .section .red {color:#ee0000;}
</style>

The CSS styling is enclosed in <style>…</style> tags. Headings are represented by <h2>…</h2> and <h3>…</h3>. 2,3 represent the levels of headings, so h2 is a higher level heading (bigger text) and h3 is a lower level heading (smaller text). Colors are defined in a particular code called HEX code preceded by a # symbol. A list of color codes can be found here.

Lets have a look at a small piece of HTML code now. (Note: Text enclosed in <!– xyz –> is a comment and will not show in the actual HTML page.)

<!– Begining of a section –>
<div class=”section”>
<h2>Photos</h2>
<p class=”imagesSection”>
<!– replace the src and alt atribute values below this line –>
<img src=”sony_vaio_1.png” alt=”replace_with_image_label1″ />
<img src=”sony_vaio_2.png” alt=”replace_with_image_label2″ />
</p>
</div>
<!– end of section –>

The code above defines a section of the listing. This could be the “Photos”, “Description” or any other section. You can change the section heading by replacing the text between the <h2>…</h2> tags which says ‘Photos’ in this case. You can add you own images by replacing the src=”” attribute’s value which says “sony_vaio_1.png” . This will a url to an image that you have uploaded either on eBay or somewhere else on the internet using one of a number of sites. You can remove images by removing the <img /> tag completely or you can add more by adding more <img /> tags.

Let’s have a look at another example, this time of the ‘Description’ section:

<!– Begining of a section –>
<div class=”section”>
<h2>Description</h2>
<!– replace the text below this line, remove if not required –>
<p>Replace this with some description of your product, line 1.</p>
<p>Replace this with some description of your product, line 2.</p>

<!– add class=”red” like below to make the text red, remove if not required–>
<p class=”red”>Add class=”red” to make the color red, line 3</p>

<!– make a section of a line red, remove if not required –>
<p>Make a <span class=”red”>section of a line red</span>, line 4</p>

<!– you can add subheadings like this, remove if not required –>
<h3>Subheading</h3>
<p>Some text under the subheading</p>

<!– you can add lists like this, remove if not required –>
<h3>List heading</h3>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<!– end of list –>

</div>
<!– end of section –>

You can add new paragraphs in your description by adding text enclosed in <p>…</p> tags. If you write <p class=”red”>…</p> then the enclosed text will be red in color. You can define other colors also by adding the color definition to the CSS code at the top, as it has been done for ‘red’. If you want to make a part of a paragraph red, then enclose the text between <span class=”red”>…</span> tags.

You can add lists to the listing as shown in the code here by enclosing the whole list in <ul>…</ul> tags and then each list item in <li>…</li> tags.

Using the principles above, you can create the rest of the listing. Look at the complete code by downloading the file below.

Download the sample template which includes all the text given above together with the images in one zipped file here.

Ebay also has some advice on making HTML listings.

UPDATE: Please note that our blog has moved to http://blog.scrobbld.com/