How to Add Text to Blank Banners

This 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 Works

The 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:

BoogieJack.com

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

A graphic's dimensions are listed as width first and height second (as reported by a browser). Use this to set the width and height of the table.
The table width and height should be set the same as the dimensions of the banner you're using for the background image. While many people know you can specify the width of a table, most don't realize you can also specify the height using CSS. As long as the content doesn't exceed the size you set and force the table larger, it will be the size you code.
You need to specify a value of 0 (zero) for the cellspacing, cellpadding, and border or some browsers will cut off part of your banner image.
The text centering and other attributes are set using inline CSS (Cascading Style Sheets). Modify these values to suit.

Armed with your new knowledge, why not go take a look at my blank banners? As long as you agree to my simple terms, they are free to use. You'll find them right about here, just scroll down the page to get to them.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

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 ]