Corner Placed Highlights

A few weeks ago, a friend of mine asked me how the floating banner on the upper right corner was done (refer to the title image for this article). I explained the details to him already but I think it’ll be great for everyone else know how it is done, so here it is!

By the way this is also the first of the many XHTML / CSS related guides coming your way.

When To Use This

This is one of the most handy ways to inform your readers of something important. In my case, I use it to highlight promotions from goldfries.com. Some of you might remember that I’ve used this on my personal blog before as well.

The content could be and image, or just plain text or both. In fact, you could put anything in there just as how other contents are placed on a website.

Now before we move on, I wish to highlight that while this corner placed highlights function is useful, one must be careful in deciding the size of the content. Make sure it’s tastefully done to avoid any disruption to the site’s design and purpose.

The CSS Portion

#thecorner /* put any name you want. it has to be unique.*/
{
	position:absolute;
	top:0px;
	right:0px; 
	/*use left:0px if you would like 
	the banner to appear on the left. */
}

With the above CSS, the highlight will appear on the upper right side of the page. It’s less distracting and it doesn’t collide with the main image header.

You could also specify the width of the holder by defining the WIDTH property.

The HTML Portion

Now as you can see, I’m loading an image and making the image a link to a page of my choice. That doesn’t mean you have to do the same. Remember, it could be any content. A short paragraph, image and paragraph combo, or even a tiny FLASH content. It’s entirely up to you!

So there ya have it, give it a try. Do drop by if you need any assistance on implementing this on your site.