Easy CSS Top Corner Banner

Filed in: Web Development — September 28th, 2006

There are may ways to add a top corner banner image to your website. But I found the code at exploding-boy to be the easiest and most simple.

It is plain CSS code, no JavaScript. The code will create a linkable top corner (left or right) banner.

Before we begin, you need to prepare a 125×125 image as the top corner banner image. In the example, the image file is “TRbanner.gif”. If you are using different size image, please remember to change the “height” and “width” in the CSS code accordingly.

The CSS codes

Top Right Banner

#topright {
position: absolute;
right: 0;
top: 0;
display: block;
height: 125px;
width: 125px;
background: url(TRbanner.gif) no-repeat;
text-indent: -999em;
text-decoration: none;}

Top Left Banner

#topleft {
position: absolute;
left: 0;
top: 0;
display: block;
height: 125px;
width: 125px;
background: url(TLbanner.gif) no-repeat;
text-indent: -999em;
text-decoration: none;}

Tip: You should replace “TLbanner.gif” with the path of your top corner image file.

The HTML codes

To add a top corner banner, we need to add single line of HTML code to your web page. Open and edit your web page file (e.g. index.html), find <body>. After the line, add one of the following HTML code:

If it is a Top Right Banner…

<a id="topright" href="#" title="TopRight">Top Right Link Text</a>

If it is a Top Left Banner…

<a id="topleft" href="#" title="TopLeft">Top Left Link Text</a>

Tip: Replace “#” with the URL you want to use.

That’s it. You will have a top corner banner on your web page now. You can see the example at Easy Top Corner Banners

technorati tags , , , , , ,

Like this post? Please share:

Follow me on Twitter and Facebook. Subscribe to free newsletter for updates like this article..

  • http://yeejen.blogspot.com/ jen

    the css id should be “topleft” for Top Left Banner html code. I think you forget to change. :P

  • http://yeejen.blogspot.com jen

    the css id should be “topleft” for Top Left Banner html code. I think you forget to change. :P

  • LcF

    Thank you, jen.

  • LcF

    Thank you, jen.

  • http://ajaydsouza.com/ Ajay D’Souza

    Hey thanks. I always kept wondering how to do this!

  • http://ajaydsouza.com/ Ajay D’Souza

    Hey thanks. I always kept wondering how to do this!

  • Pingback: 我的家，我的wordpress at The Terminal - John’s Blog

  • noris

    it seems to me that these code only workd on IE not FF. any thought?

  • http://- noris

    it seems to me that these code only workd on IE not FF. any thought?

  • Pingback: Nine Over Ten 9/10 » The Thing About Corner Banners and How to Implement Them

t
<-- viglink -->