SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Displaying icon and text over an image

    I have a blue chat bubble that I'm using as a background image. I'm trying to figure out the best approach for displaying an icon image and text on top of it. The icon would be on the left and the text, "Chat now", would be on the right. Both icon and text would be on top of the blue background image. Any suggestions on how to approach this? Thanks in advance for any help on this.

  2. #2
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got it working, but am still interested in seeing if there's a better way. I just set up a div called blueChat and set the blue chat bubble as the background. Then I set up a div inside it that contains a simple a href surrounding the img src for the icon and the text.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,725
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    I would be best that you include both your relevant CSS and HTML code when posting.. even better if you can post a link. There are no one size fits all solutions, so it is best to see the actual implementation.

    That being said, the following is just a conceptual solution. Anyhow you were CLOSE in your solution. You dont need the IMG for the icon nor the extra div.

    IF I can assume the the "chat now" is a LINK within a branding ( image) area then you could code it this way:

    <div class="bubble"><a href="chatPage.html>Chat Now</a></div>
    .bubble{position:relative;
    background: url (bubble.jpg) no-repeat;
    height: (height of bubble.jpg) ;/*optional*/
    width: (width of bubble.jpg);/*optional*/

    }
    .bubble a{
    position:absolute;
    padding-left: (width of icon + white space);
    background: url(icon.jpg) no-repeat (1/2 of whitespace)px center;
    min-height: (height of icon);
    top: ( use this to position your 'button');
    left: ( use this to position your 'button');
    }

    again that's just a rough idea.. but hopefully it helps


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
  •