Image behind text - or position-designing - mini basket contents

Hi,

I am designing a mini basket which will appear at the top of the page. It will display the quantity of goods in the basket and total price and a ‘click here to check out’ button. So it is just a summary of the basket.

I want to design an image which will feature behind this mini-basket. For an example see Play.com (UK): DVDs, Music CDs, MP3s, Video Games, Books, Electronics & Gadgets - Free Delivery. Add anything to the basket to see the mini-basket at the top right of the screen in action. This may not be a background image - if you can suggest how I can achieve this mini-basket I would be very grateful.

Quantity =1
Total = £149.95
Click here to checkout

The only way I know how to get an image behind some text is like this:

.basket-details {
background: url(…/himage.png) no-repeat;
clear: both;
color: #FFFFFF;
letter-spacing: -0.02em;
line-height: 1.7;
margin: 5px 5px 5px;
padding: 0px 0 0px 0px;
}

But it does not seem accurate enough! I am aware that I could use CSS positioning but I have been advised against using positioning in the past so I am unsure how to achieve the right results!

Can anyone help,

Matt.

Can you upload a screen shot or link to one?

Yes - I explained where to see one at Play.com (UK): DVDs, Music CDs, MP3s, Video Games, Books, Electronics & Gadgets - Free Delivery in the top right of the page. just add anything to the basket to see it working. I’ve no idea how to design the layout of it - how do the graphics work with the text and how much is just CSS or plain HTML!?

Matt.

The basket isn’t behind any text, please upload a screenshot. Adding something to my cart doesn’t make anything different other than the price in the top right box.

If you want the background image of the basket to the left, and text to the right, that code snippet you have should be fine, just add some left padding to separate the image from the text.

The text “My Shopping Basket” is…text.

Have you tried removing chunks of their code at a time, reducing it to only the CSS files and the HTML corrosponding with that basket area? I’d recommend you do that, and look at what is going on there.

It may seem very simple to you but that is what I am trying to do!

How do I design the layout? Where it says “My Shopping Basket” seems to be an image. The Checkout button is not on the same line as the “price” and “view basket” lines. For me this is difficult. Particularly, because it is all within an small bordered area with round corners. I would be happy if I could design a background image with rounded corners and add the text and buttons over the top but if you can suggest an alternative method i am keen to learn.

Matt.

If you are talking about the small basket image next to the “My Shopping Basket” text then it can be a background image. Just preserve the space with some left padding and apply the image to the background.

Here is a rough guide.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.basket {
    border:1px solid #ccc;
    width:250px;
    padding:0 0 5px;
    overflow:hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.basket h3 {
    background:#9dc64a;
    margin:0;
    line-height:21px;
    font-size:77%;
    color:#fff;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.basket h3 a {
    text-decoration:none;
    padding:0 0 0 30px;/*space for basket image*/
    display:block;
    background:url(images/small-basket.gif) no-repeat 2px 50%;/* basket image*/
}
.basket h3 a, .basket h3 a:visited {
    color:#fff;
}
.basket h3 a:hover {
    text-decoration:underline;
}
.basket p {
    float:left;
    width:100px;
    margin:10px 10px 0;
    font-size:77%;
    display:inline;
}
p.checkout {
    float:right;
    width:93px;
    height:22px;
}
p.checkout a {
    background:#ff7430;
    color:#fff;
    width:93px;
    height:22px;
    line-height:22px;
    text-align:center;
}
.basket a {
    display:block;
    text-decoration:none;
}
p.checkout a:visited {
    color:#fff
}
</style>
</head>
<body>
<div class="basket">
    <h3><a href="#">Shopping Basket</a></h3>
    <p>1 item <b>£2.99</b><a href="#">View basket &raquo;</a></p>
    <p class="checkout"><a href="#">Checkout</a></p>
</div>
</body>
</html>