|Home | Web Design Tutorials | Free Graphics | Custom Graphics | Newsletter | Products | Specials | SEO | Sound Effects | Benefits | Login | View Cart|
How to Add Text to Blank BannersThis tutorial will show you how to add text to a blank banner using HTML only, no graphics editor involved. It will also work for buttons, which I call the Mighty Mouseover Buttons. With one single button image to download, your page can have as many buttons as you need with text that changes color when the cursor is placed on it. Naturally with only one image to download that will help your page to load faster. The more buttons you need the faster it will speed up the page.
Using HTML-only does restrict the fonts you can use to those commonly found installed on most computers, but that is the only drawback, and that's not much of a drawback as you want to use an easy-to-read font like Arial, Verdana, or Times New Roman anyway.
How It WorksThe way it works is to create a table around the graphic, and use the banner (or button) as a background image. To do this, you'll first have to know the dimensions of the graphic. If you don't have a graphics program that shows the size, you can view the image with a browser and right click on it, then choose the 'Properties' option from the pop up menu. In the next pop up, among the information listed will be the size of the graphic.
Here's a sample of a blank banner using HTML to create the text:
Here's how that was accomplished...
<table align="center" cellpadding="0" cellspacing="0" border="0" style="margin-top: 17px; margin-bottom: 17px; width: 428px; height: 100px;"> <tr> <td style="background-image: url(images/banner.jpg); text-align: center; vertical-align: middle; color: #3e2002; font-family: Arial Black; font-size: 32px;"> BoogieJack.com </div> </td> </tr> </table>
» Points to Note
Almost a NewsletterSubscribe today and get a free gift, The Science of Getting Rich. Learn more, or subcribe below:
Did you know...The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
Home | Web Design Tutorials | Free Graphics | Newsletter | Products | Specials | SEO | Sound Effects | Press Room