Dialog box new

Annyeonghaseyo,excited to show you this.
Here is the demo. | Click here for demo |

So,here is the code:

<style type="text/css">
.downarrowdiv{
font: 8px 'tinytots';
width:230px;
min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: #F8E0E0;
color:#fff;
padding:5px;
position:absolute;
word-wrap:break-word;
-moz-border-radius:7px; /*add some nice CSS3 round corners*/
-webkit-border-radius:7px;
border-radius:7px;
margin-bottom:2em;
}

.downarrowdiv:after{ /*arrow added to downarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:100%; /*should be set to 100% */
left:10px;
width:0;
height:0;
border-color: #F8E0E0 transparent transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
</style>

<br />
<div style="background-color: transparent; border: 1px transparent dashed; font: 8px 'tinytots'; margin: 5px; padding: 4px; position: absolute; width: 220px;">
<div class="downarrowdiv">
<center>
CHANGE WITH YOUR WORDS/OR SOMETHING!</center>
<br />
<br /></div>
</div>
</center>

1.Copy and paste on html script

2.Now,add this below </style> under the div code,i mean in the div style code

top:120px; left: 260px; 

3.Change the number on the code above,according to you.If you want to get nearer to the left,so decreases the number,you can use negative sign "-" on the number,to make it decreasing.And so to increase it.

4.Adjust it until you think it great.

5.Color code,the background and font-color you can change,if you want.

6.Then,save.

7.Recommended to use as date header background and text,and do not change the position,unless you will find it it's moving,while you scrolling.