Organizing for America | Feb28: Obama Banner for the Upper Corner of Your Website

Post from Feb28:

Obama Banner for the Upper Corner of Your Website

By Ethan Allen Smith - Feb 10th, 2007 at 9:20 pm EST

Comments | Mail to a Friend | Report Objectionable Content

Tags: banner, css, image

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...

Reader Comments	Comments RSS
Comments are closed for this post.

Thank you! | Report to Admin

By Scott McDaniel Feb 2nd 2008 at 8:53 pm EST

Using this on my site, BabyGotMac.com. Great idea and will certainly catch peoples eye!

Quick Fix | Report to Admin

By Tyler from Brooklyn, NY Feb 3rd 2008 at 5:59 pm EST

Hello,

Great job on these. One quick change to the CSS code for the upper-right banner—change "left: 0;" to "right: 0;". Also, I've created transparent gifs to deal with the IE6 issue.

Upper-Left: Link
Upper-Right: Link

You can see the GIF banners in use on the following sites:

Whiskey and Aspirin: Link
Inherently Funny: Link
Bored Button: Link
Meat Junkie: Link
Extraordinary Bear: Link

Thanks again, and go Obama!

Tyler

Thanks! | Report to Admin

By EricaJoy Feb 5th 2008 at 10:43 pm EST

Thanks so much for this! I'm using it at Link.

Re: Thanks! | Report to Admin

By John from Philadelphia, PA Feb 14th 2008 at 9:19 am EST

Thanks guys! I'm using it as well at my website.

John

Re: Thanks! | Report to Admin

By John from Philadelphia, PA Feb 14th 2008 at 9:21 am EST

Hmm...didn't read the part about html being disallowed. My site is at Link

John

Great Work! | Report to Admin

By KrisKhaos Feb 14th 2008 at 10:16 am EST

Very nice job!! Thanks for releasing them!

Exactly what I was looking for! | Report to Admin

By The Downward Spiral Feb 20th 2008 at 5:51 pm EST

I was just thinking about adding something like this to my site, and wondered if someone had already made one to save me some time, so I typed in "obama css banner" into Google and this page came up first! lol

Thanks for making these!

I have mine up at itcamefromtheinternet.com

Link

Thanks for the great banner! | Report to Admin

By Matthew Wade Davis Jul 23rd 2008 at 10:40 pm EDT

Was a breeze to add this to our little artists website! Localized the image file as well so as not to leach bandwidth. Treatzone.com in the Obama house!!! Link

Thanks for the great banner! | Report to Admin

By Matthew Wade Davis Jul 23rd 2008 at 10:43 pm EDT

Was a breeze to add this to our little artists website! Localized the image file as well so as not to leach bandwidth. Treatzone.com in the Obama house!!! Link

ps---I actually found this badge while randomly reading Erica's blog above. Goooooobama!!!

Thank You! | Report to Admin

By Ivan Rott Jul 25th 2008 at 4:58 pm EDT

Works like a charm: Link

Content on blogs in My.BarackObama represents the opinions of community members and in no way should be interpreted as endorsed or approved by the campaign.