I can't figure out how to code/make speech bubbles for my website. Can anyone help me?

I'm trying to have "tips" where the little cartoon tells the reader a tip.

So I'm guessing the current one shown there is just shopped in or something?

 

Well, there is a way of making a triangle with CSS so that no images would be involved, and fancy ways of making rounded corners... But in this case I think it's unnecessary. Just make a div, give it a CSS background property, and put text in it.

 

Something like this:

<!-- Assume you have the html declaration and head as well as the content above your bubble up here -->
<div class="bubble"><p>Wongtong has a lot of sciencey things to say right here.</p></div>
<!-- Content below goes here -->

 

And then some CSS:

 

.bubble {
background: transparent url('speechbubble.png') no-repeat scroll 0 0;
width: /*Width of your image in pixels*/ ;
height: /*Height of your image in pixels*/ ;
}

.bubble p {
padding: /*Enough padding to give the text some breathing room*/ ;
}

Oh okay, I'll give that a go. And yes I shopped it in.

 

So would I just the image right before the <div class="bubble">?

 

e.g

<img src="cuteimage.gif"><div class=bubble><p>text text</p></div>

No, the background image is defined in the CSS.

Naw the image doesn't show up. :(

You need to have the image saved as speechbubble.png in the same directory as your CSS file.

http://www.bosrup.com/web/overlib/ :thumbup:

http://www.bosrup.com/web/overlib/ :thumbup: