Friday, June 11, 2010

CSS DIV Arrow Comment Box

Add a simple arrow comment box using css and an "arrow" image and sub texts right beneath it. It's a nice interface to use for your blog's comment boxes, for example. The arrow image is being used as a background image, meaning you can control how much of it is shown by adjusting it's horizontal and vertical positions.

/ demo / - / download /



CSS Code
.commentbox{
background-color: #ececec;
width: 450px;
padding: 10px;
}

.commentfooter{
background: url(media/arrow.gif) 20px 0 no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
padding-left: 58px;
padding-top: 1px;
margin-bottom: 2em;
font-size: 90%;
color: #4A4A4A;
}
HTML Code
<div class="commentbox">
This is some comment.<br />This is some comment.<br />This is some comment.
</div>
<div class="commentfooter">Posted by Author on 05/10, 03:39 AM</div>

Labels: , , ,

2 Comments:

Blogger Beben said...

its a cool...any style theres :P

June 13, 2010  
Blogger Windsor Exports said...

We are one of the renowned manufacturers and suppliers of Agriculture Machinery Parts which are used in manufacturing various agricultural related machines such as tractors and combines harvester machined parts.

March 15, 2011  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home