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.
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.
This is some comment.
This is some comment.
The single image used:
The CSS:
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 4 of 6 pages « First < 2 3 4 5 6 >
Very nice ! Thnk...
this is mad cool, thank for the tip
Hi, I want this 'Comment box' with arrow placed at the right side of the page... is this possible?
Because the box cán be placed right but then the image doesn't connect with the box... can somebody maybe help me please!
Because the box cán be placed right but then the image doesn't connect with the box... can somebody maybe help me please!
i've been looking all over for something like this! Great work!
Sweet! This code is cool.
Hey,
This shall work..
But CSS is used for comments but you fogot to post the php part of the comment(include sql)...
This shall work..
But CSS is used for comments but you fogot to post the php part of the comment(include sql)...
Billy,
Did you download the file?
After that, if you have a site go to smartftp and do the following(same with no site)
Download the image http://www.dynamicdrive.com/cssexamples/media/arrow.gif ,
now put the following code:
Then you need to add the class to a div...
There you go..
Who ever wants me to help make it a real guestbook
email me at nile55@nile55.phpnet.us
so i can help...
@Admin
If you unband Yoshi555(me)
im alot better at codes now and i know php, css, js, vbe, and html mostly..
PS: NO DUMB CODES I PROMISE!
Did you download the file?
After that, if you have a site go to smartftp and do the following(same with no site)
Download the image http://www.dynamicdrive.com/cssexamples/media/arrow.gif ,
now put the following code:
<style language="css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.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;
}
</style>
Then you need to add the class to a div...
<div class="commentbox">
This is some comment.
This is some comment.
This is some comment.
</div>
<div class="commentfooter">Posted by Dynamic Drive on 05/10, 03:39 AM</div>
There you go..
Who ever wants me to help make it a real guestbook
email me at nile55@nile55.phpnet.us
so i can help...
@Admin
If you unband Yoshi555(me)
im alot better at codes now and i know php, css, js, vbe, and html mostly..
PS: NO DUMB CODES I PROMISE!
srry my real email is nile@nile55.phpnet.us
Very nice, thank you for taking the time to put this post out here.
how do u integrate with blogger comments? i dont understnad how to do it. pls help, than kyou.
Commenting is not available in this weblog entry.
This is some comment.
This is some comment.