Log in

View Full Version : Seemingly simple placement of comment bubble.


tgc
07-14-2011, 03:57 PM
I have a seemingly easy requirement to place a comment bubble next to a title in a list of articles that would contain the number of comments it's received.

I tried to put an div with the bubble as a background with centered text to put the number of comments in.

The only say I seem to be able to do it it either disregards my sizing of the div so the bubble isn't visible, or I set the display to block which puts it on a new line which isn't what I want.

My code seems straight forward?:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

body, p, td, div {
font-family:Arial, Helvetica, sans-serif;
font-size:12px
}

div.article {
clear:both;
padding-bottom:60px;
}
div.article img{
float:left;
padding:0px 10px 10px 0px;
}
div.article .articleTitle{
font-size:16px;
font-weight:bold;
color:#36F;
}
div.article .articleDate{
font-size:10px;
font-weight:bold;
color:#666;
}

div.commentBubble{
background-image: url(comment_bubble.gif);
background-repeat: no-repeat;
text-align: center;
display:inline;
color: #666;
font-weight: bold;
font-size: 12px;
width: 32px;
height: 30px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

</style>
</head>

<body>

<div class="article">
<img src="shake.jpg" width="89" height="89" alt="shake" />
<span class="articleTitle">Title of story 1<div class="commentBubble">45</div><br /></span>
<span class="articleDate">July 11, 2011<br /></span>
Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum
text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem
ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.
Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.
</div>
</body>
</html>



A mock up of what I want is simply:
http://www.kamunga.com/bubble/commentbubble.jpg

but I get:
http://www.kamunga.com/bubble/commentbubble2.jpg

and a copy of the code to play with is:
http://www.kamunga.com/bubble/commentBubble.zip

Any help or hints would be greatly appreciated!!
deathbycheese
07-14-2011, 07:54 PM
Well, I'm not sure this is the best work-around, but I made it work like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

body, p, td, div {
font-family:Arial, Helvetica, sans-serif;
font-size:12px
}

div.article {
clear:both;
padding-bottom:60px;
}
div.article img{
float:left;
padding:0px 10px 10px 0px;
}
div.article .articleTitle{
font-size:16px;
font-weight:bold;
color:#36F;
}

.articleTitle img {
display:inline;
position:relative;
left:145px;
z-index:-5;
}


div.article .articleDate{
font-size:10px;
font-weight:bold;
color:#666;
}

.commentBubble{
text-align: center;
display:inline;
color: #666;
font-weight: bold;
font-size: 12px;
width: 32px;
height: 30px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

</style>
</head>

<body>

<div class="article">
<img src="shake.jpg" width="89" height="89" alt="shake" />
<h1 class="articleTitle">Title of story 1&nbsp;&nbsp;<span class="commentBubble">45</span><img src="speech_bubble.png" width="25" height="25" alt="bubble" /></h1>
<h5 class="articleDate">July 11, 2011</h5>
<p>Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum
text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem
ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.
Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.
</p>
</div>
</body>



</html>


Hope this is an ok answer for you!

Oh, and see attached for the .png I used.

dbc
deathbycheese
07-14-2011, 08:23 PM
Ok. That was NOT your best solution. LOL

Here's one that seems to be better and more dynamic - using a little table:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

body, p, td, div {
font-family:Arial, Helvetica, sans-serif;
font-size:12px
}

div.article {
width:500px;
clear:both;
padding-bottom:60px;
}
div.article img{
float:left;
padding:0px 10px 10px 0px;
}

h1{
font-size:16px;
font-weight:bold;
color:#36F;
}

.bubble {
vertical-align:bottom;
z-index:-5;
}


div.article .articleDate{
font-size:10px;
font-weight:bold;
color:#666;
}

.commentBubble{
text-align: center;
color: #666;
font-weight: bold;
font-size: 12px;
position:relative;
left:-30px;
top:3px;
}

</style>
</head>

<body>

<div class="article">
<img src="shake.jpg" width="89" height="89" alt="shake" />
<table>
<tr>
<td><h1 class="articleTitle">This is the Title of a very very long story 1</h1></td>
<td><span class="commentBubble">45</span><img class="bubble" src="speech_bubble.png" width="25" height="25" alt="bubble" /></td>
</tr>
</table>
<h5 class="articleDate">July 11, 2011</h5>
<p>Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum
text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem
ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.
Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.
</p>
</div>
</body>

Let me know if this works for you.

dbc