Closing a Speech Bubble

HTML & CSS
1

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

Hi,

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


#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

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


.bubble:after{
  position:absolute;
  bottom:10px;
  right:10px;
 content:"X";

}

Hope that helps.

4