I want to achieve a block with an image background and text centered vertically and horizontally within it, and have the entire block act as a link. I've looked at various ways of doing this with <div>s and CSS, but all seem to have cross-browser issues, so I've fallen back to using a table.

Conceptually, the following is what I want:

<table>
    <tr>
        <a href="...">
            <td>...</td>
        </a>
    </tr>
</table>

but of course doesn't work. The problem is that if I put a <div> within the table cell to act as a link object, this kills the vertical centering of the text which is the only reason I'm using a table in the first place.

I'm open to any other way of achieving the same effect, I don't have to use tables. However, I must have the text centered and the entire box clickable (it may sound a bit ugly, but this is a web site aimed at 5-year-old kids who've never used a computer before, so it needs to be bright, clear and simple).

What's the least hacky way to achieve this?

Edit: I should have said, the table cell contains an image, which should fill the cell, with the text layered on top of it. I guess one solution is not to use text at all but just incorporate the text into the image; I didn't really want to do this since technically the text is coming out of a database (even though in practice there are few enough variations on the text that I could do it with pre-rendered images).

6 answers

1
point
This was chosen as the best answer

You can do it without tables -

HTML

<div>
<a href="#">Link</a>
</div>

CSS

div {background:url(path to your background image) no-repeat 0 0; text-align:center;}
a {display:block; line-height:45px;}

Change the value for line-height to be the height of your background image, or the height you'd like the block to be, if that makes sense. Verified in FF 3.6.12 and IE7.

Answered about 6 years ago by webcodeslinger
  • That works fine provided that the text doesn't flow onto a second line. Tim Martin about 6 years ago
1
point

You can use jQuery (assuming you have or get the jQuery library):

<td id="my_clickable_cell">
   Whatever content you want
</td>

<script>
   $("td#my_clickable_cell").bind("click",function() {
      location = "url to go to when clicked";
   });
</script>
Answered about 6 years ago by Matt Brand
  • It would be slightly better to still wrap "Whatever content..." in a link element, so that it will continue to work when javascript is unavailable. Also, you might want to style the td with "cursor: pointer" Bobby Jack about 6 years ago
danwellman 5600
0
points

What is in the clickable cell? Is it just text? Could you use an image instead of text? That way you could cut the text out with the right amount of space around it and use in as an with the link around it, like this:

<td>
     <a href="url.html" title="etc">
        <img src="path/to/img.gif">
    </a>
</td>

Make the img block-level without andding any extra inline spacing, and it should take up the whole table cell (forcing it to be the size of the image), and be clickable...You might need to set a width on your table, or on the <td> as well...

Answered about 6 years ago by danwellman
  • The table cell contains an image (which should fill the cell) and some text (which should be centered). If I make the image the contents of the cell, then I can't lay text on top of it, can I? Tim Martin about 6 years ago
  • OK, re-reading it I see you were suggesting that I use text as part of the image, not HTML text. That's possible, but I'd prefer a solution where the text can be generated at run-time if possible. Tim Martin about 6 years ago
  • Is there a fixed number of words that could make up the text? Or could it literally be any word in the English language? If it is a limited number of words, like for a navigation structure or similar, instead of generating unique text on page load, you could generate a unique class name for each td and use that to set the correct background image for the text? danwellman about 6 years ago
0
points

I had originally tried and rejected the approach:

DIV.container {
   display: table-cell;
   vertical-align: middle
}

because it's widely reported that it doesn't work with IE. However, for the record, it does work with IE8 provided you have an appropriate doctype set. The following doctype worked for me:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

This won't be a widely acceptable solution due to the IE7 backwards compatibility, but for my purposes I have enough control over the client system that this worked for me.

Answered about 6 years ago by Tim Martin
0
points

I have an alternative to work around which I used in my previous design.

Create a picture/image with definite size and font-size color etc, writing the text (the same text you are writing in the cell) make the image as transparent (using photoshop or equivalent software).

keep the cell content null and use image instead there. Your cell looks same as like before. Now .. use <a/> tag inside <td> tag out-bounding the <img/> :)

something like this ::

<td>
  <a href="#">
    <img src="sample.png"/>
  </a>
</td>
 <!-- sample.png is a transparent image which contains cell contents as text within-->
Answered about 6 years ago by Infant Programmer
0
points

Usage of Javascript in the way::

<html>
<head>
<script type="text/javascript">
function functionn()
{
 document.location.href = "http://www.google.com";
}
</script>
<style type="text/css">
#MyTable
{
    cursor: pointer;
}

</style>
<body>
<a href="http://www.google.com">
</a>
<table id="MyTable" OnClick="functionn()">
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
</body>
</html>

If you want any particular cell/row to be link, then cut-paste this ::


id="MyTable" OnClick="functionn()"

inside that <tag>

Answered about 6 years ago by Infant Programmer