Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: DIVs and containers: Here

Arrow Comment Box

Author: Dynamic Drive

Using a simple "arrow" image, this CSS code transforms a regular DIV into a fancy box with sub text appearing beneath it. It's a nice interface to use for your blog's comment boxes, for example.

This is some comment.
This is some comment.
This is some comment.
Posted by Dynamic Drive on 05/10, 03:39 AM

The arrow image is being used as a background image, meaning you can in fact easily control how much of it is shown just by altering the background image's horizontal and vertical positions:

This is some comment.
This is some comment.
This is some comment.
Posted by Dynamic Drive on 05/10, 03:39 AM

The single image used:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 05/10/2006

Revision History: None

Usage Terms: Click here

Your Comments (59)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 2 of 6 pages  <  1 2 3 4 >  Last »

Actually having comments on a webpage is more difficult than just CSS. You may want to take a look at some PHP tutorials for this.
Posted by Dren T. Martin on 05/25, 04:18 PM
can someone help me i dont now where the body of the page is on freewebs users!
Posted by ambo1000 on 05/27, 12:42 PM
ambo1000, all pages should have a body tag by default. If not, just add it in, directly beneath the </head> tag.
Posted by ddadmin on 05/28, 02:40 PM
Cool script. Very very clean looking. I like it!
Posted by Nathan on 05/29, 10:06 AM
I love this!
Posted by yandar on 06/04, 04:17 PM
Do you know why the gray box might have a different width depending on which browser is used (IE vs. NS)?

I've tried and here's the result: http://www.wam.umd.edu/~rzuckerm/comment_box.html

On this Dynamic Drive webpage, the problem doesn't occur though. I'm not sure why.

Otherwise, I think the code is great.
Posted by Rachel on 06/09, 09:04 PM
Does anyone know of a tutorial on how to use these comment boxes on a typeapd blog? Thanks.
Posted by Russell James on 06/25, 05:40 PM
Fantastic! I really like this site :D
Posted by Daniel Neri on 07/13, 03:20 PM
great!! very helpful...
but i still confuse with css..
Posted by nasroelz on 07/22, 01:05 PM
so simple and so nice :)
Posted by Yury on 07/25, 11:29 AM

Comment Pages 2 of 6 pages  <  1 2 3 4 >  Last »


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.