Announcement box

[Zero - HosterBin]

AM trying to find the code to be able to make a box like the image below. It will be in my main page. But i want to make sure they can close it. If possible be able to choose my background color.




Thanks ahead of time.

Zero - HosterBin Reviewed by Zero - HosterBin on 25th Mar 2012. Announcement box AM trying to find the code to be able to make a box like the image below. It will be in my main page. But i want to make sure they can close it. If possible be able to choose my background color. http://i.imgur.com/YnubX.png Thanks ahead of time. Rating: 5

[pi0tr3k]

Contact me on msn

[Zero - HosterBin]

Okay thanks

[soft2050]

This should work out as you wanted:

<style>.info-box {
    background: #EBF6FF;
    border: 1px solid #AAD9F5;
    border-radius: 3px 3px 3px 3px;
    padding: 5px;
}</style>

<div class="info-box">asd</div> 

Live Example: http://pastehtml.com/view/bsk5jdt0p.html
You just need to change the background color property.

[Zero - HosterBin]

How can i make it close?

[Lock Down]

This should work out as you wanted:

<style>.info-box {
    background: #EBF6FF;
    border: 1px solid #AAD9F5;
    border-radius: 3px 3px 3px 3px;
    padding: 5px;
}</style>

<div class="info-box" id="info-box">asd</div> 

Using this example Close included

<style>.info-box {
    background: #EBF6FF;
    border: 1px solid #AAD9F5;
    border-radius: 3px 3px 3px 3px;
    padding: 5px;
}</style>

<div class="info-box" id="info-box">asd
<input style="float: right; margin-right: 20px; align-text: right;" 
type="button" value="close" 
onclick="document.getElementById('info-box').style.visibility = 'hidden';"></div> 

[Apathetic]

You could also make the border-radius compatible with other/old browsers:

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;