Wongtong Posted October 10, 2009 Share Posted October 10, 2009 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. 8,180WONGTONG IS THE BEST AND IS MORE SUPERIOR THAN ME#1 Wongtong stalker.Im looking for some No Limit soldiers! Link to comment Share on other sites More sharing options...
dsavi Posted October 10, 2009 Share Posted October 10, 2009 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*/ ; } Link to comment Share on other sites More sharing options...
Wongtong Posted October 10, 2009 Author Share Posted October 10, 2009 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> 8,180WONGTONG IS THE BEST AND IS MORE SUPERIOR THAN ME#1 Wongtong stalker.Im looking for some No Limit soldiers! Link to comment Share on other sites More sharing options...
dsavi Posted October 10, 2009 Share Posted October 10, 2009 No, the background image is defined in the CSS. Link to comment Share on other sites More sharing options...
Wongtong Posted October 10, 2009 Author Share Posted October 10, 2009 Naw the image doesn't show up. :( 8,180WONGTONG IS THE BEST AND IS MORE SUPERIOR THAN ME#1 Wongtong stalker.Im looking for some No Limit soldiers! Link to comment Share on other sites More sharing options...
dsavi Posted October 10, 2009 Share Posted October 10, 2009 You need to have the image saved as speechbubble.png in the same directory as your CSS file. Link to comment Share on other sites More sharing options...
Jard_Y_Dooku Posted October 13, 2009 Share Posted October 13, 2009 http://www.bosrup.com/web/overlib/ :thumbup: Never trust anyone. You are always alone, and betrayal is inevitable.Nothing is safe from the jaws of the decompiler. Link to comment Share on other sites More sharing options...
Jard_Y_Dooku Posted October 13, 2009 Share Posted October 13, 2009 http://www.bosrup.com/web/overlib/ :thumbup: Never trust anyone. You are always alone, and betrayal is inevitable.Nothing is safe from the jaws of the decompiler. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now