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?:

Code:

<!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:

but I get:

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:

Code:

<!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:

Code:

<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

Thread: Seemingly simple placement of comment bubble.

Thread Tools

Search Thread

Seemingly simple placement of comment bubble.

Bookmarks

Bookmarks

Posting Permissions