Small css problem

Hi there,

I have a little problem with my css.

If you look at the top right corner of the home page at www. fredaldous .co.uk you’ll see a wicker shopping basket with soem text to the left. I want to position the text in the middle of the basket rather than towards the bottom where it is currently but I can’t figure it out :frowning:

Here’s the HTML and CSS

<img src="../../images/basket-status-bg1.jpg" />	<div id="basket_items"><a href="/basket.cgi" title="View basket" >#no_items# | #goods_total# | View basket</a></div>
/*---------- tpl_basket_status.htm -------------*/

div#basket_status {float:right; margin:10px 30px 0 0;}

div#basket_status.filled {float:right; margin:10px 30px 0 0;}
	
div#basket_status img {display:inline;}

#basket_items {display:inline; margin:0 15px 0 10px;}

div#basket_status a {font-weight: normal; font-size:0.8em;}

div#basket_status a:hover {background:#FF71BE; color:#000000;}
	
/*---------- END tpl_basket_status.htm -------------

Would be very very happy if anyone could help me out with this :slight_smile:

Thanks in advance.

What I would suggest is removing basket-status-bg1 and making it a background image. I’m sure there may be code that determines whether an empty basket or full basket should show.

Instead of embedding the image, create two classes in your CSS file .basket-empty-img and .basket-full-img. This way you could put the image as a background image in your CSS and use background positioning to get it where you want. Just make sure you put a height on the div to be sure the entire image is shown.

For the text, you would then just do some left-padding to move it over from the background image.

Brilliant. worked a treat! thanks very much for your help.

That definitely is easier, I was coming more from a “use a background image when possible” avenue.

The easiest way is just to make this change to your CSS:

div#basket_status img {
    [COLOR="Red"]vertical-align: middle;[/COLOR]
}