Closing a Speech Bubble

[mbond5]

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

[Paul O'B]

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;
}

[dresden_phoenix]

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.

[Paul O'B]

Something like

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