Joomla Templates Club 406,261 posts

[gswaddell Friend gswaddellJoin date: July 2010Posts: 8Downloads:0Uploads:0]

#152950

I am having a hard time getting the bubble class to look like the one on the Demo. Here is the code I’m using:


<div class="bubble1">
<div><div><div><div>This is a sample Bubble. Wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div></div></div></div>
<span class="author">ROUNDED SPEECH BUBBLE</span>
</div>


Here is what it looks like:

Notice how the text runs outside the bubble. I don’t think that’s the way it’s supposed to work, is it?

[gswaddell Friend gswaddellJoin date: July 2010Posts: 8Downloads:0Uploads:0]

#351134

I did some fiddling with the css and got the bubbles to work. Here is what works for me for bubble1

[
]
div.bubble1 div {
background: url(../images/bub1-br.gif) no-repeat bottom right;
margin: 0;
width: 100%;
padding-right: 10px;
}

div.bubble1 div div {
background: url(../images/bub1-bl.gif) no-repeat bottom left;
}

div.bubble1 div div div {
background: url(../images/bub1-tr.gif) no-repeat top right;
padding-right: 10px; /*This padding value was added*/
}

div.bubble1 div div div div {
background: transparent url(../images/bub1-tl.gif) no-repeat top left;
padding-left: 10px; /*These padding values were added*/
padding-top: 15px;
padding-bottom: 24px;
}

div.bubble1 div div div div div {
margin: 0;
width: auto;
/*padding: 10px 15px 20px; This padding value was deleted*/
}
[
]

[Author]

Posts