I created a banner for the upper left corner of our website and I wanted to share the images and code with everyone.




Check it out on our website. Code and images below the fold.

UPPER-LEFT

CSS Code: (remove all instances of the asterisk * to make this code work)

#obama {
position: absolute;
left: 0;
top: 0;
display: block;
height: 83px;
width: 83px;
background: url(http:*//feb28.com/images/obama-ul.png) no-repeat;
text-indent: -999em;
text-decoration: none;
}

UPPER-RIGHT

CSS Code: (remove all instances of the asterisk * to make this code work)

#obama {
position: absolute;
left: 0;
top: 0;
display: block;
height: 83px;
width: 83px;
background: url(http:*//feb28.com/images/obama-ur.png) no-repeat;
text-indent: -999em;
text-decoration: none;
}

HTML Code: (remove all instances of the asterisk * to make this code work)

< *a* id="obama" href="http://www.barackobama.com/" title*="Obama '08" >Obama '08< */a*>

If you want to use my images, that's fine, we have a enough bandwidth to handle the load. But, of course, it's always preferable to save the image and localize your code. Also note that the images are saved as .PNG's, which Internet Explorer 6 still has some issues with (specifically, transparency). So here are the same images modified and saved as .GIF's...