12-22-2009, 10:18 PM
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 :
Here are the two images used for this example :
The CSS content is this :
The HTML content is this :
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...
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 :
Here are the two images used for this example :
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...
