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:
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!
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.
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.
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.