How to put clickable text "over" an image?

[Whiskers]

I would like to know how I can put clickable text "over" or "inside" an image. All I can seem to do is get it all around the edges, but not actually like a layer on top of an image. How can this be done? An example I have seen of this is on xbox.com in the top right.

 

Thanks!

[Guest]

Your image should be set as a background. You can hard code this or use css.

 

A hard code example:

 

<table width="100" align="center"><tr><td background="images/yourimage.gif" vAlign="middle" width="100" align="center"><a href="http://www.yourlink.com">Some Text</a></td></tr></table>

[Whiskers]

Your image should be set as a background. You can hard code this or use css.

 

A hard code example:

 

<table width="100" align="center"><tr><td background="images/yourimage.gif" vAlign="middle" width="100" align="center"><a href="http://www.yourlink.com">Some Text</a></td></tr></table>

 

Thanks Hal. I am going to try this out in a moment. I have my shop centred at a width of 900 and am thinking about making an image for the background, but how if the height determined because when different pages are clicked, like when you go to view a product the page gets longer than the index page for example. :(

[Guest]

Do not set the height attribute.

[Whiskers]

Do not set the height attribute.

 

But what size height should the image be? I mean if I make it with a height of say 600 and then the page goes to 800 will the images be out of proportion?

[Guest]

Ok, you are going about this wrong. We are obviously talking about two different things here. If you want to use a background image for your whole web site, it would normally be a very small image, like 10px X 10px and this would take care of the entire background no matter the size of the page(s). That said, normally it would be a pattern image or a solid color image. This is used when you don't want to simply state a background color for your site.

 

Now, getting back to having links over images. If you just want a couple of links at the top of your page for instance, and then you want a couple more links somewhere else on the page, but these areas have images where you want the links, simply make those images a backgroud image in those spaces of your web site using tables as shown in the ealier post.

[Whiskers]

Ok, you are going about this wrong. We are obviously talking about two different things here. If you want to use a background image for your whole web site, it would normally be a very small image, like 10px X 10px and this would take care of the entire background no matter the size of the page(s). That said, normally it would be a pattern image or a solid color image. This is used when you don't want to simply state a background color for your site.

 

Now, getting back to having links over images. If you just want a couple of links at the top of your page for instance, and then you want a couple more links somewhere else on the page, but these areas have images where you want the links, simply make those images a backgroud image in those spaces of your web site using tables as shown in the ealier post.

 

Ok I will address the background image separately. So far I have worked out putting the image in with the clickable text, but for some reason there is a little white border around the edge. About 1px. :(

[jigga1234]

Ok I will address the background image separately. So far I have worked out putting the image in with the clickable text, but for some reason there is a little white border around the edge. About 1px. :(

border="0" will get rid of it

[Whiskers]

border="0" will get rid of it

 

I must be doing somethign wrong. I have doen it like this but still have a little border:

 

<table border="0" width="900" height="80" align="center">

[Whiskers]

I must be doing somethign wrong. I have doen it like this but still have a little border:

 

<table border="0" width="900" height="80" align="center">

 

Also how can I ge the search bar in the image? I am using a add-on that uses this code for placement:

 

<td align="middle" valign="bottom"><?php include(DIR_WS_BOXES . 'search2.php'); ?></td>

 

or is there a simpler way?

[Guest]

Can you post a link to the site so we can take a look?

[Whiskers]

Can you post a link to the site so we can take a look?

 

I will do later or PM it to you for safety. I was just uploading my header.php when my ISP has decided to restrict my bandwidth what with it now being peak time and I have no header at all! :(

[Whiskers]

I will do later or PM it to you for safety. I was just uploading my header.php when my ISP has decided to restrict my bandwidth what with it now being peak time and I have no header at all! :(

 

PM sent. Thanks.

[Whiskers]

Ok, so I have come to the conclusion that I can't get my padding issue fixed, but how can I get my search bar in the image? :)