One of the important and unavoidable features on every blog are guest comments. In this article you can read about proper comments section HTML and also download some FREE comments css examples.
One of the important and unavoidable features on every blog are guest comments. You want your readers to get involved and post comments, it tells you how much they're interested in the topic and are willing to have their say. The thing that will invite users to read and post comments on your blog is taking the extra effort in styling comments properly and make them more readable.
Proper Comments Section Markup
We will start at the beginning, with HTML code. Let's see what the comments really are. Basically it is a list of users remarks about certain topic. More so, that list has a chronological component since users post their comments one after another, no mixing here... So, the choice for the HTML element we'll use with comments is pretty obvious – we're going with ordered list <li>.
Comments has meta data that is common for each entry. Things like commenter's name, url, date when he or she wrote it etc. are info that helps us follow the comment “timeline". Apart from this meta data we have the comment content itself. We can then say that each comment has 2 separate sections: comment meta data and comment body.
Let's translate all of this into HTML. We said that we're using ordered list for comments:
<ol class="comments"> <li></li> </ol>
I used class although you can easily go with ID. I doubt that there will be a situation where you'll have 2 or more comment lists on on page.
Next, the meta data we mentioned. We have:
- gravatar (this is optional really...)
- commenter's name
- commenter's homepage
- the date when comment was posted
When you look at it like that, you can say that this is a list of meta data. Because they have no particular order (we can move them around as we please) we're using unordered list <ul>. For the comment body we are using simple <div>. That is more than suitable in this case. DIVs mark up the divisions or sections of the document which comment body most certainly is.
Now our comment's markup looks like this:
<ol class="comments"> <li> <ul class="meta"> <li><img src="path-to-gravatar.gif" alt="Author's name" /></li> <li><a href="url-to-authors-homepage.html">Author's name</a></li> <li>posted on date-goes-here</li> </ul> <div class="body">Comment text goes here...</div> </li> </ol>
Note that we combined author's url and his name into one list item.
To gain even more control add class names for each of the items in meta data list
<ul class="meta"> <li class="image"><img src="path-to-gravatar.gif" alt="Author's name" /></li> <li class="author"><a href="url-to-authors-homepage.html">Author's name</a></li> <li class="date">posted on date-goes-here</li> </ul>
Some of you might want to take somewhat different way and put all of those meta data into one sentence. In that case we will use paragraph <p> instead of unordered list <ul>:
<ol class="comments"> <li> <p class="meta"><img src="path-to-gravatar.gif" alt="Author's name" /> On date-goes-here <a href="url-to-authors-homepage.html">Author's name</a> wrote:</p> <div class="body">Comment text goes here...</div> </li> </ol>
Styling the Comment Section
We'll start with basic styling, setting up margins and paddings for comment list:
.comments{
margin:1em 0;
padding:0;
}
.comments li{
margin:0;
padding:0;
list-style:none;
}
If we choose to use unordered list for meta data we might want to reset the default styling for that list as well:
.comments .meta, .comments .meta li{
margin:0;
padding:0;
list-style:none;
}
Style 1
.comments, .comments ul, #comments li{
margin:0;
padding:0;
list-style:none;
}
.comments li{
margin:1.5em 0;
position:relative;
font-size:13px;
}
.comments a{color:#5a7981;text-decoration:none;}
.comments a:hover{color:#555;}
.comments .meta{
padding-bottom:32px;
background:url(01/bg_comments1.gif) no-repeat 0 100%;
}
.comments .meta li{
margin:0;
display:inline;
font-size:12px;
color:#777;
position:static;
}
.comments .meta .author{
font-size:14px;
font-weight:bold;
}
.comments .meta img{
position:absolute;
left:28px;
top:68px;
z-index:100;
border:1px solid #bfd5da;
}
.comments .body{
padding:10px 28px 20px 100px;
background:url(01/bg_comments2.gif) no-repeat 0 100%;
min-height:58px;
}
Style 2
.comments, .comments ul, #comments li{
margin:0;
padding:0;
list-style:none;
}
.comments li{
margin:1.5em 0;
position:relative;
font-size:13px;
}
.comments a{color:#89c140;text-decoration:none;}
.comments a:hover{color:#555;}
.comments .meta{}
.comments .meta li{
margin:0;
display:inline;
font-size:13px;
color:#777;
position:static;
}
.comments .meta .image{display:none;}
.comments .meta .author{
float:left;
font-weight:bold;
padding-left:35px;
line-height:36px;
background:url(02/ico_comments.gif) no-repeat 0 50%;
}
.comments .meta .date{
float:right;
color:#999;
font-style:italic;
font-size:11px;
line-height:36px;
}
.comments .body{
clear:both;
padding:20px 20px;
background:#fff url(02/bg_comments.gif) repeat-x;
}
Style 3
.comments, .comments ul, #comments li{
margin:0;
padding:0;
list-style:none;
}
.comments li{
margin:1.5em 0;
position:relative;
font-size:13px;
background:url(03/bg_comments.gif) no-repeat 0 0;
overflow:hidden;
}
.comments a{color:#5a7981;}
.comments a:hover{color:#555;text-decoration:none;}
.comments .meta{
float:left;
display:inline;
width:100px;
}
.comments .meta li{
background:none;
margin:0;
}
.comments .meta .date{
color:#999;
font-size:11px;
}
.comments .meta img{
border:1px solid #bfd5da;
}
.comments .body{
float:left;
display:inline;
width:425px;
padding:1em 0;
margin-left:47px;
}
Style 4
I used only one image for this example so it can be easily customized.
.comments, .comments ul, #comments li{
margin:0;
padding:0;
list-style:none;
}
.comments li{
margin:1.5em 0;
position:relative;
font-size:13px;
background:url(04/bg_comments.gif) no-repeat 0 0;
overflow:hidden;
}
.comments a{color:#edecd8;text-decoration:none;}
.comments a:hover{color:#fff;}
.comments .meta{}
.comments .meta li{
margin:0;
display:inline;
color:#777;
background:none;
}
.comments .meta .image{display:none;}
.comments .meta .author{
float:left;
font-weight:bold;
padding-left:40px;
line-height:39px;
margin-bottom:10px;
}
.comments .meta .date{
float:right;
color:#fff;
font-style:italic;
font-size:11px;
line-height:39px;
margin-right:12px;
}
.comments .body{
clear:both;
padding:10px 28px 40px 28px;
background:#fff url(04/bg_comments.gif) no-repeat 0 100%;
}
Alen Grakalic is a designer, developer and a passionate standardista with large experience in all types of front-end work. Started to get involved with web in 1999. and turned freelance in 2005., the same year he started Css Globe. Alen's work has been featured on numerous css galleries including famous Css Zen Garden official list.
Most recent blog updates
- 29 Sep, 2009 - Styling Blog Comments: Correct Markup and Free Examples
- 17 Sep, 2009 - New Premium Css Template - PSD included
- 17 May, 2009 - Red CSS Template
- 24 Mar, 2009 - Grid Based Template
- 1 Feb, 2009 - Templatica Twitter Contest Results
Jasmin Halkic on 29 Sep, 2009 wrote:
Very nice article. Thank you.Antonio on 29 Sep, 2009 wrote:
Thank you, very useful hints.Nik Makhov on 1 Oct, 2009 wrote:
Great article, thank you very much, I've just translated it into Russian, for our web-masters page - http://web-grower.ru/razmetka-dlya-kommentariev-v-bloge.htmlLiam on 1 Oct, 2009 wrote:
These are great but being a bit of a Wordpress noob can you tell me how to setup the third example in my Wordpress blog? I assume I can copy and paste the css over the default comment css however I'm confused as what to do in the comments.php file?Quicken Websites on 2 Oct, 2009 wrote:
Great! Easy and very well put) Thank you for your great job!Sean on 2 Oct, 2009 wrote:
This will come in handy on my next blog design project.Roberto on 2 Oct, 2009 wrote:
Wow, great work! Thank you for sharing.Mike Tok on 5 Oct, 2009 wrote:
Thank you for sharing your idea . At least now I got a reference to read if I'm facing problem coding the comments template.. Hope to see more articles from you in the future.Jack Bremer on 6 Oct, 2009 wrote:
You didn't mention about putting nofollow in there too!TheBigO on 11 Oct, 2009 wrote:
Good article.School Grant Help on 15 Oct, 2009 wrote:
your idea helped me in clearing my questions.... thanksrapid4me on 19 Oct, 2009 wrote:
Markup is still a dark horse for me, I am thus to get any info about it. Your post is well written and easily understtod. thank you!Bank on 21 Oct, 2009 wrote:
you should use it on this site...Autonomy on 24 Oct, 2009 wrote:
Ha! Word, @Bank - that is a great point. This site could use Alen's advice.Thanks for the article.
Rachit Bhargava on 27 Oct, 2009 wrote:
heyy dude its a great blog...just keep goin...
Rachit Bhargava
Google
Skech on 30 Oct, 2009 wrote:
Thanks. Your post helped me a lot.Rahul - Web Guru on 16 Nov, 2009 wrote:
Thanks for the styles, have downloaded my copy of the examples.Cheers.
Torbjoern Karlevid on 17 Dec, 2009 wrote:
Errors found while checking this document as XHTML 1.0 Transitional!http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ftemplatica.com%2Farticles%2Fcomments%2F01.html
Sorry! We found the following errors (1)
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Ftemplatica.com%2Farticles%2Fcomments%2F01.html
shoaib hussain on 21 Dec, 2009 wrote:
awesome n cool n grabbing the blue one with bubble in it,.hizlindir on 22 Dec, 2009 wrote:
thank you for informationhizlindir on 22 Dec, 2009 wrote:
sorry. l wrote my web site adress mistake. :D again thanksNick Matyas on 7 Jan, 2010 wrote:
Really wonderful post. this blog is awesome.Posts with more information will be great.
Webroyalty
Deaf school on 12 Jan, 2010 wrote:
is still a dark horse for me, I am thus to get any info about it. Your post is well written and easily understtod. thank you!Custom Stickers on 18 Jan, 2010 wrote:
Great blog and great information thanks for share this coding information.Promotional Giveaways on 23 Jan, 2010 wrote:
It's really very strange thing that you have such a great site and blog. But you don't update it. This is my first visit here. You should update this awesome blog.Valentine Sms on 27 Jan, 2010 wrote:
yah i like it thanks and keep postings.Funny text messages on 27 Jan, 2010 wrote:
its really very nice and informative posting thanks for sharing this with us...volkan on 30 Jan, 2010 wrote:
I think it is a bit complicated but I've liked.it is better if you check it again.
It is well liked as summarized
sanem on 30 Jan, 2010 wrote:
I congratulate you for this blog.I've really enjoyed.
I sincerely thank you again
aceite de onagra on 31 Jan, 2010 wrote:
great post, very interesting and informative.i enjoy reading your blog and your templates too
thanks
Wine Shaker on 4 Feb, 2010 wrote:
nice post , thanks for help my question!warren farrell on 5 Feb, 2010 wrote:
great blog posting..thanks for share coding info.....