Thanks To Our Veterans!
We wanted to thank our veterans and active military for all that they do to help keep us safe, so we created a banner for our site. Then we thought, why stop there? So, being a tutorial site, we created a quick “how-to” on adding this to your own web site.
We created three versions, one with a link back to this article to help others add this to their web site, a second with simply the banner, and a smaller version.
Link-Back Version:
To create a version of this banner that links to our tutorial, simply add this just below the <body> tag on your web site:
<div id="veterans"><a href="http://www.dynamixlabs.com/2009/11/11/thanks-to-our-veterans/"><span>Click Here to Show Your Support!</span></a></div>
Next, add this CSS to your stylesheet:
#veterans{width:100%;height:130px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day.jpg) no-repeat top center;border-bottom:1px solid #000;}
#veterans a{display:block;width:100%;height:130px;}
#veterans span{position:absolute;top:-999em;}
If you would prefer to download and use the image on your own, here it is (right-click and save):
No Link-Back Version:
This is the same banner, but without the link back and the “Show Your Support With This Banner!” text. Simply add this just below the </body> tag on your web site:
<div id="veterans"></div>
Next, add this CSS to your stylesheet:
#veterans{width:100%;height:130px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day-No-Link.jpg) no-repeat top center;border-bottom:1px solid #000;}
If you would prefer to download and use the image on your own, here it is (right-click and save):
Small Version:
This banner is just 70 pixels high, instead of the 130 pixels in the first two, and the text centers perfectly on an 800 pixel wide site. Simply add this just below the </body> tag on your web site to use this banner:
<div id="veterans"></div>
Next, add this CSS to your stylesheet:
#veterans{width:100%;height:70px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day-Small.jpg) no-repeat top center;border-bottom:1px solid #000;}
If you would prefer to download and use the image on your own, here it is (right-click and save):
We would love a comment on where you have used this, though it is certainly not a requirement. We would also be happy to release the original .PSD file if desired, just let us know in the comments!
A Short List Of Several Sites Already Using This Banner:
– Omni International
– Charis Hills
– DynamiX Web Design
Tags: active and retired military, support troops, thanks to our veterans, veterans day
