How to create ballons talking text...

[exdiogene]

Post HTML Suite Plugin's DEMO

*** If you are looking for an affordable hosting with great support quality, click here! ***

This tutorial will show you how easy it can be to show speech bubbles.

The method used is a table with different CSS backgrounds using only two small images. Here is an example of what you can do to display your text :

<iframe src="Tutorials/Bubble.html" width="716" height="360"></iframe>

Here are the two images used for this example :

<div style="background-color:#806000;width:700px; padding:8px;"><img src="Tutorials/Bubble.gif" width="700">

<img src="Tutorials/BubbleCenter.gif" width="700"></div>

The CSS content is this :

PHP Code:[Highlight]

.table_bubble{
  background-color : transparent;
  padding:0;
  margin:0;
  spacing:0;
  border: none;
}
.table_bubble_top_left{
  background : transparent url(Bubble.gif) no-repeat left top;
  padding-top: 32px;
  padding-left: 32px;
  padding-bottom: 8px;
  font-weight: bold;
}
.table_bubble_top_right{
  background: transparent url(Bubble.gif) no-repeat right top;
  width: 40px;
}
.table_bubble_center_left{
  background : transparent url(BubbleCenter.gif) left top;
  padding-left: 32px;
  color:#0000ff;
}
.table_bubble_center_right{
  background : transparent url(BubbleCenter.gif) right top;
  width: 40px;
}
.table_bubble_bottom_left{
  background : transparent url(Bubble.gif) no-repeat left bottom;
  height : 48px;
}
.table_bubble_bottom_right{
  background: transparent url(Bubble.gif) no-repeat right bottom;
  width: 40px;
} 


The HTML content is this :

PHP Code:[Highlight]

<table class="table_bubble" cellpadding="0" cellspacing="0">
 <tr>
  <td class="table_bubble_top_left">Speech bubble sample #1</td>
  <td  class="table_bubble_top_right"></td>
 </tr>
 <tr>
  <td  class="table_bubble_center_left">
   You can have a very long line of text displayed with no interruptions...
  </td>
  <td class="table_bubble_center_right"></td>
 </tr>
 <tr>
  <td class="table_bubble_bottom_left"></td>
  <td class="table_bubble_bottom_right"></td>
 </tr>
</table>
<table class="table_bubble" cellpadding="0" cellspacing="0">
 <tr>
  <td class="table_bubble_top_left">Speech bubble sample #2</td>
  <td  class="table_bubble_top_right"></td>
 </tr>
 <tr>
  <td  class="table_bubble_center_left">
   Or you can<br / >
   have multiple<br / >
   lines over<br / >
   each other...
  </td>
  <td class="table_bubble_center_right"></td>
 </tr>
 <tr>
  <td class="table_bubble_bottom_left"></td>
  <td class="table_bubble_bottom_right"></td>
 </tr>
</table> 


As you can see this is quite simple to do, the trick is only use a 2 columns 3 rows table!

More explanations will come soon...