SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Closing a Speech Bubble

    Hello guys,

    Just wrapping up this site...

    http://amethystmine.com/2012/

    How can I have an X on the specch bubble next to the mascot in top right corner for all pages so ppl know how to close it. Thats all I need there now.

    Thanks,

    Mike

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    For IE8+ you could do this (apart from the round corners):

    Code:
    #bubble p{
    position:relative;
    }
    
    #bubble p:after{
    content:"X";
    position:absolute;
    right:-18px;
    top:-18px;
    font-weight:bold;
    font-size:18px;
    text-transform:uppercase;
    background:red;
    border-radius:10px;
    width:20px;
    height:20px;
    line-height:20px;
    text-align:center;
    }

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Your speech bubble already closes when you click on it. Do you want that behaviour to change? if So you will have to re target that script as well.
    You can add an element with the "X" or "CLOSE" message withing the text bubble element; if the text bubble element doesnt have Absolute positioning or relative positioning already, give it position:relative; and your "x" position:absolute; You should then be able to position it using top:, bottom:, left:, or right: attributes.

    Incidentally, you can use :before/ :after pseudo elements to generate the close element ("X"), w/o having to clutter your mark up.

    Something like
    Code:
    .bubble:after{
      position:absolute;
      bottom:10px;
      right:10px;
     content:"X";
    
    }
    Hope that helps.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post

    Something like
    Code:
    .bubble:after{
      position:absolute;
      bottom:10px;
      right:10px;
     content:"X";
    
    }
    #bubble already has generated content to create the bubble spike so the inner element needs to be targeted instead

    Just wrapping up this site...
    Note that it is invalid to have a p element inside that span. Block elements are not allowed inside inline elements. It will probably do no harm in that situation but will be invalid. The p element should be another span (or similar inline element) to be valid.
    Hope that 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
  •