Results 1 to 3 of 3

Thread: Seemingly simple placement of comment bubble.

  1. #1
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Seemingly simple placement of comment bubble.

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

  2. #2
    Join Date
    May 2011
    Location
    SFBA, CA, USA
    Posts
    94
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Default

    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

  3. #3
    Join Date
    May 2011
    Location
    SFBA, CA, USA
    Posts
    94
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Default

    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
    Last edited by deathbycheese; 07-14-2011 at 09:34 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •