Welcome to WeetHet!


Managed Web Hosting by Liquid Web

Your IP address:
34.230.66.177
     
 
Print this page
- use Landscape
Search the
WeetHet Pages
WeetHet is being updated! - Current articles will slowly move to www.tweaking4all.com
For excellent webhosting that is reliable and affordable, we highly recommend: LiquidWeb

On this page ...

Putting a text over an image ...

So why should I?

Well, suppose you are creating 16 buttons on your webpage, all pointing to different pages.

You could draw an image for each and every button, or ...

HTML

The trick of putting a text over an image

Now this is a bit tricky when you first start with it, but it's not that hard once you get the idea.

What you need to do is first make a table (in the example I use a one-cell tabel):

a sample cell...

Each cell of the table can be given a background image.
So let's find us a picture. I called mine "blue_button.gif" and it looks horrible, to convince you take a look at it:

The dimensions of this image are width=100 and height=30. Don't forget these numbers now !

Next step is to adjust the table to the size of the image.
The cell above aparently doesn't match, so let's see how the code looks like and what it should be:

<table width="38%">
<tr>
<td>a sample cell...</td>
</tr>
</table>

The problem 1 is the size, expressed in percentages, which will almost never match the size you need. The next problem is that border, which we do not want. Alter the code using the dimensions of the image:

<table width="100" border="0" cellspacing="0" cellpadding="0" height="30">
<tr>
<td></td>
</tr>
</table>

We're not done yet,... where is the picture ?
Well, now we add the picture as a BACKGROUND PATTERN for the cell, as such:

<table width="100" border="0" cellspacing="0" cellpadding="0" height="30">
<tr background="blue_button.gif">
<td></td>
</tr>
</table>

which will result in a cell with the image as background (unfrotunally, since a lot of browsers do not support tables within tables with cells with different background, I cannot show you this). Now we can add text to the cell. You can change the text just as you would change regular HTML text. For example: link, bold, veranda, white, centered.

Button1

Button2

Button3

And this is how it's done,... easy once you know it isn't it... ?

Note: some browsers do not support a table within a table having a different background !


 

 


Klik hier om te wisselen naar nederlandstalige pagina's You are currently on the English pages.