Rakshit Khare's Blog- Aarambh » CSS bar http://www.rakshitk.com/blog Not just a blog but my 2nd home | The Technology Inside Wed, 11 Nov 2009 04:39:16 +0000 en hourly 1 http://wordpress.org/?v=3.1.3 How to put a Yellow Warning Bar at the top of your website http://www.rakshitk.com/blog/2008/03/28/how-to-put-a-yellow-warning-bar-at-the-top-of-your-website/ http://www.rakshitk.com/blog/2008/03/28/how-to-put-a-yellow-warning-bar-at-the-top-of-your-website/#comments Fri, 28 Mar 2008 09:35:31 +0000 Rakshit http://www.rakshitk.com/blog/2008/03/28/how-to-put-a-yellow-warning-bar-at-the-top-of-your-website/ If you are reading this article on my blog, you could clearly see a yellow bar at the top of your browser with a message “Welcome to just another day at Aarambh.”

With a little use of CSS, you can easily catch the attention of your readers. It’s really an effective way to inform your readers about important announcements and updates. Also, you can sell that space for advertisements. The CSS bar is very easy to implement. Let’s learn how to deploy it into your own blog or website.
Before doing anything just make sure that there is no margin on the BODY tag.

body {
margin: 0px;
padding: 0px;
}

Now we are going to create CSS code for the bar. Add the following CSS code to your Blog’s Stylesheet (most probably style.css file)

Code #1:

#warningbox a, #warningbox a:link, #warningbox a:visited, #warningbox a:active {

display: block;

color: #000;

width:100%;

background: #FFFFE1;

border-bottom: 1px outset;

text-decoration: none;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

Code #2:

#warningbox a:hover {

color: #FFF;

background: #3169B6;

}

Code #3:

#warningbox p{

margin:0px;

padding: 3px 10px 3px 10px;

font-size:11px;

}

Now when you are finish adding all the CSS codes, it’s time to actually use these CSS codes in our main program. We need the html code, this code will need to be at the top off your page right after the <body> tag.

<div id=“warningbox“><a href=’#'><p>This is an example of the warning box</p></a></div>

You can change the message enclosed within the <p> tag as per your requirements. Also, it is not annoying because it stays at the top of the browser and as soon as you scroll down it disappears.

Hope, you find it useful. If you encounter any problem do mention that in the comments section. I will try to resolve that to the best of my ability. Moreover, any feedback is whole heartedly appreciated.

I would like to thank DEEP for giving me an extra 1GB bandwidth as a Holi Gift when my site was down (B/W limit exceeded) few days back. I appreciate his and also my hosting Web1 hospitality. They really value their customers.


People who viewed this article also liked the following articles:-

© Rakshit Khare’s Blog- Aarambh 2007-08]]> http://www.rakshitk.com/blog/2008/03/28/how-to-put-a-yellow-warning-bar-at-the-top-of-your-website/feed/ 11