SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Can you upload a screen shot or link to one?
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •