HTML speechbubble markup

Question

fyi: i'm working on a HTML markup for some speechbubbles.
The reason for this complex markup is that the speechbubble should grow with its content.

So, first of all here my recent markup:

<div class="speachbubble">
<div class="topbar">
    <div class="corner top-left"></div>
            <div class="top"></div>
            <div class="corner top-right"></div>
    <div class="clear"></div>
</div>
<div class="middlebar">
    <div class="left"></div>
            <div class="content">HERE iS SOME TEXT</div>
            <div class="right"></div>
    <div class="clear"></div>
</div>
<div class="bottombar">
    <div class="corner bottom-left"></div>
            <div class="bottom"></div>
            <div class="corner bottom-right"></div>
    <div class="clear"></div>
</div>

In the picture ive uploaded you can see on the left side the whole speachbubble. The right side shows the splitted graphic. So the content in the speachbubble stay dynamicaly in its length.

I'm very bad in complex CSS things, maybe someone can help me? :( BIG BIG THANKS!

PS: All that should be written WITHOUT CSS3!

Answer 1

In theory you only need the top bar and the bottom bar. If you put images on the middle it won't grow properly with the text. Make your entire top bar one image, your bottom bar another and set them as backgrounds for topbar and bottombar respectively. Then you'll need to define a width for speechbubble equal to the widths of the images used for topbar and bottombar. Take the widths from the images that you would've used on the right and left and put those as padding-right and padding-left on your text, respectively. That will allow you to maintain the rounded corner effect and have your content grow.

Answer 2

You don't need complex markup to make it "growable" with the text;With the Speech bubble is actually NOT CSS3 (besides the rounded corners). The below example is all CSS1 with the exception of the ":after" selector which is CSS2

check out this fiddle : http://jsfiddle.net/FbHVk/3/

or look at the below code html and css:

HTML:

<span class="bubble"> this is some text</span>

CSS:

.bubble{
   position:relative;
   padding: 10px;
   background: #AAAAFF;
}

.bubble:after{
   position:absolute;
   content: ""; 
   top:15px;right:-10px;
   border-width: 10px 0 10px 15px;
   border-color: transparent  #AAAAFF;
   border-style: solid;
 }​

Answer 3

Why do you use some jQuery with its plugin

It saves you'r time too try this :

qTip

Answer 4

Thanks for the answer. I modified it slightly for two different people speaking.

http://jsfiddle.net/FbHVk/73/

<style type="text/css">
    .bubbleright {
        position:relative;
        padding: 10px;
        background: #ddd;
        margin: 5px 5px;
        max-width: 250px;
        left: 50px;
    }

    .bubbleright:after{
        position:absolute;
        content: ""; 
        top:15px;right:-10px;
        border-width: 10px 0 10px 15px;
        border-color: transparent  #ddd;
        border-style: solid;
     }

    .bubbleleft{
        position:relative;
        left: 15px;
        padding: 10px;
        background: #aaa;
        margin: 5px 5px;
        max-width: 250px;
    }

    .bubbleleft:before{
        position:absolute;
        content: ""; 
        top:15px;left:-10px;
        border-width: 10px 15px 10px 0px;
        border-color: transparent  #aaa;
        border-style: solid;
    }

</style>

<div class="bubbleleft">
  I say something
</div>

<div class="bubbleright">
  So does he
</div>