Centralise descriptions

[chris ashdown]

On my web site www.internet-workwear.co.uk front page i have three columns of pictures whith the descriptions alongside them but at the top

How do i centralise the descriptions so they are either above or below the picture

Can i put a border around each picture and description

At present using following html

<table width="690" border="0" align="center">
<tr align="left" valign="top">

<td width="100"><a href="http://www.internet-workwear.co.uk/acatalog/Alexandra_Range.html"><img src="Alexandra_100.gif" width="100"

height="150" border="0"></a></td>
<td width="130"><p><a href="http://www.internet-workwear.co.uk/acatalog/Alexandra_Range.html">Full Alexandra Clothing Ranges</a></p>

</td>
<td width="100"><a href="http://www.internet-workwear.co.uk/acatalog/Chefs_Clothing.html"><img src="chefs_clothing_100.gif" width="100"

height="150" border="0"></a></td>
<td width="130"><p><a href="http://www.internet-workwear.co.uk/acatalog/Chefs_Clothing.html">Chefs Clothing</a></p>

</td>
<td width="100"><a href="http://www.internet-workwear.co.uk/acatalog/Nurses_Uniforms.html"><img src="nurses_uniform_100.gif" width="100"

height="150" border="0"></a></td>
<td width="130"><a href="http://www.internet-workwear.co.uk/acatalog/Nurses_Uniforms.html">Nurses Uniforms</a></td></tr>


<tr align="left" valign="top">
<td><a href="http://www.internet-workwear.co.uk/acatalog/Overalls.html"><img src="overalls-100.gif" width="100"

height="150" border="0"></a></td>
<td> <p><a href="http://www.internet-workwear.co.uk/acatalog/Overalls.html">Overalls</a></p></td>

Etc Etc

[wjcampbe]

<table width="690" border="0" align="center">
<tr align="left" valign="top"> 
<td width="130" border="1" align="center"><a href="http://www.internet-workwear.co.uk/acatalog/Alexandra_Range.html"><img src="Alexandra_100.gif" width="100" height="150" border="0"></a></td>
<td width="130" border="1" align="center"><a href="http://www.internet-workwear.co.uk/acatalog/Chefs_Clothing.html"><img src="chefs_clothing_100.gif" width="100" height="150" border="0"></a></td>
<td width="130" border="1" align="center"><a href="http://www.internet-workwear.co.uk/acatalog/Nurses_Uniforms.html"><img src="nurses_uniform_100.gif" width="100" height="150" border="0"></a></td></tr><tr>
<td width="130" border="1"><p><a href="http://www.internet-workwear.co.uk/acatalog/Alexandra_Range.html">Full Alexandra Clothing Ranges</a></p></td>
<td width="130" border="1"><p><a href="http://www.internet-workwear.co.uk/acatalog/Chefs_Clothing.html">Chefs Clothing</a></p></td>
<td width="130" border="1"><a href="http://www.internet-workwear.co.uk/acatalog/Nurses_Uniforms.html">Nurses Uniforms</a></td></tr>

should give you the layout you have described.

[chris ashdown]

Many thanks William

Thats given me something to do

[chris ashdown]

William

This seems to place the three jpg's in columns ok but then place the description / name as three more coloumns to the right of the jpg

What i was looking for is both the description and jpg within a single border for each jpg with the description centred either below or above the jpg

[jont]

Why not merge the image and text into the same <td> cell using a <br /> to force the new line and centre that ...

<td width="130" align="center">
<a href="http://www.internet-workwear.co.uk/acatalog/Alexandra_Range.html"><img src="Alexandra_100.gif" width="100" height="150" alt="Alexandre Clothing Range" border="0" /></a><br />

<a href="http://www.internet-workwear.co.uk/acatalog/Alexandra_Range.html">Full Alexandra Clothing Ranges</a>
</td>

typed at sight

[wjcampbe]

So sorry, I have changed the code in the previous post to wrap descriptions onto a new line ( half asleep, I'm afraid).

@jont, the OP asked for separate borders around the images and the text, thus the six cell table - which I now remember you have already posted somewhere on here

[jont]

Bill - missed the border requirement.

This would be best achieved using some quick css in the <td> tag eg:

<td class="myBORDER" width="130">

in the actinic.css use:

.myBORDER {
border: 1px solid #000000;
padding: 3px;
text-align: center;
}

changing the #000000 to the colour you require

[chris ashdown]

Many thanks William & Jont, I will give it a go

[chris ashdown]

Jont

Tried your solution which works ok except

1) The lettering is left justified against the bottom of the picture box

2) The border is not centred on the picture box but extends to the right and nearly onto the next box

.css modified as suggested

<table width="690" border="0" align="center">
<tr align="left" valign="top">

<td class="myBORDER" width="130" border="1" align="centre"><a href="http://www.internet-workwear.co.uk/acatalog/Alexandra_Range.html"><img src="Alexandra_100.gif" width="100" height="150" border="0"></a><br />
<a href="http://www.internet-workwear.co.uk/acatalog/Alexandra_Range.html">Full Alexandra Clothing Ranges</a></p></td>


<td class="myBORDER" width="130" border="1" align="centre"><a href="http://www.internet-workwear.co.uk/acatalog/Chefs_Clothing.html"><img src="chefs_clothing_100.gif" width="100" height="150" border="0"></a><br />
<a href="http://www.internet-workwear.co.uk/acatalog/Chefs_Clothing.html">Chefs Clothing</a></p></td>


<td width="130" border="1" align="centre"><a href="http://www.internet-workwear.co.uk/acatalog/Nurses_Uniforms.html"><img src="nurses_uniform_100.gif" width="100" height="150" border="0"></a><br />
<a href="http://www.internet-workwear.co.uk/acatalog/Nurses_Uniforms.html">Nurses Uniforms</a></td>

[jont]

<tr align="left" valign="top">

have you tried align="center" for the table rows?

The table is showing at 690px wide but the sum of the columns (if you have just the 3) is 130px * 3 = 390px

[chris ashdown]

Thanks Jont
had td width at 130 with images at 100 plus a spooliing mistook

Many thanks think i have it cracked now

[jont]

<td class="myBORDER" width="130" border="1" align="centre">

Chris .. not sure if you have picked this up already but the internet is Americanised ... "center" NOT "centre" ... or is that your spooliing mistook??

[chris ashdown]

yup it was