Center (centre!) Best Seller images

[Donna Kempster]

Hi All

We are changing the home page on our bunting site and are going to use the best seller layout to get more of our product on the home page.

I want to center the images (i've changed the valign=top to center) but they still start left. So far I have:

1) tried to add an align="center" comand around the image
2) tried to add an align command as part of the <div> setting
3) added a

.centeredImage
{
text-align:center;
display:block;
}

to the end of the style sheet and then added

class="centeredImage"

within the image specification (before the width)

None of these work!

I wondered if anyone could point out where I'm going wrong.

Cheers D

[leehack]

valign stands for 'Vertical Align', so that would not do anything anyway. valign is for the N-S axis, align is for the E-W axis.

I would imagine that your images have a float: left; added to the class that controls them, which will override what you are trying to add. You will probably find the setting is applied to the parent container rather than the image itself.

I'd need a URL to see, but it's odds on that you have an overriding float: left in there and possibly also a right margin which will also offset things. Maybe you even need to apply an align=center to the parent <td> if tables are what you are using.

[Duncan Rounding]

Firebug will show the css inheritance which may help.

[Donna Kempster]

Cool thanks Lee.

It is controlled by the class="product_image_cost" so I've chenged the float from left to center but it hasn't made any difference. Is that how you do it? spell it! D

[leehack]

No remove the float completely, style the parent tag, i.e. the <td> if you are using a table layout, remove all other efforts to center things.

<td align="center"> should do it if you scrap right margin and float: left; from the image class. I'd also add text-align: center; to the image class.

[Donna Kempster]

That worked perfectly, thank you.

Also changed all the new product and also bought layouts (LOL) so have played with them too. That was next job so v happy
D

[leehack]

I think they all look better centered too and do the same as you.

HTH.

[Donna Kempster]

Site now live with changes so far, am really happy with it at the mo. www dot cottonbunting dot co dot uk

Now have to work out how to make images clickable from best sellers and also bought etc.

As I was on a roll got v cocky and did what 'I thought' would work and all the images disappeared LOL! So am now about to begin my search on making images clickable and do it properly . D

[leehack]

Just replace the 'link text' with the complete img tag.

<a href="blah">link text</a>

<a href="blah"> <img tag instead> </a>

[jont]

<a href="blah"> <img tag instead> </a>

Just to point out best not to leave any space between the <a> and the <img> tags as some browsers will pick up the space so when mouse hovers you get a funny result with the space also being highlighted.

... don't forget in the <img> to add in there border="0" to remove the default styling of a blue border.

[Duncan Rounding]

And as Jonty usually says - don't forget the alt/title tags.

[leehack]

Illustration purposes only, the pedant is back!

[jont]

Illustration purposes only, the pedant is back!

Dare not leave or havoc with slapshod code examples would break out

[leehack]

LOL, a fair shot.

[Donna Kempster]

*huge outpouring of gratitude*

Many thanks, I'd begun searching last night but was getting confused as to what bit went where! Nothing new there then Have completed task already and only 9.30!

D

Dare not leave or havoc with slapshod code examples would break out

LOL so true so true was feeling like code writing queen but have been firmly put back in my place!

*wanders shoulders slumped back to small desk in corner*