Table cell as link

Python

On the devdreams homepage, http://www.devdreams.com in the header I am trying to make the main navigation boxes clickable instead of just the text...

How can I do this? I take it that CSS is involved.
Thanks

tony

probably not the best way but instead of having the silver as a background why not just have it as a picture? that way you can just make the image a link

Python

because images are not as search engine friendly as text links are

CannonBallGuy

Just make the "http://www.devdreams.com/images/img_06.gif"'s or whatever links too.

Python

but those images are set as backgrounds...

you cannot do <a href="link">background="/images/img_06.gif"</a>

that simply wouldnt work , lol

Unless you meant another way?

CannonBallGuy

Ok... True.

How about:
Your current code:

<td width="144" height="30" background="/images/img_06.gif"> 
      <div align="center"><font size="2" color="#000000"><b><a href="/tutorials" class="mainmenu">Tutorials</a></b></font></div>
    </td>

Eddited code:

<td width="144" height="30" background="/images/img_06.gif"> 
      <a href="/tutorials" class="mainmenu"><div align="center"><font size="2" color="#000000"><b>Tutorials</b></font></div></a>
    </td>

BTW: You shouldn't be using <b> or <font> anymore. And I think the same might apply to the align attribute too.

Python

yeah your probably right i shouldnt be using those old tags... But it works for now and Im fine with it. One day when I get time I will update on the way I code

Chroder

Use some Javascript. Here's a 'navToLink' function that would suit you nicely, I think. It will direct the user to the location contained in the first link of the cell.

/**
 * Navigate to the first link contained with the object
 * @param object The object that contains the link
 * @return true
 */
function navToLink(obj)
{
    if(obj && obj.getElementsByTagName)
    {
        var sublinks = obj.getElementsByTagName('a');

        if(sublinks[0])
        {
            window.location = sublinks[0].href;
        }
    }

    return true;
}

I'd change your code to something like:
[html]<td style="background-image:url(/images/img_06.gif); font-weight:bold; height:30px; width:144px; text-align:center;" onclick="navToLink(this)">
<a href="/tutorials" class="mainmenu">Tutorials</a>
</td>[/html]
Use CSS for all of it. Or better yet, put your style info into your stylesheet and give the td a class name so you dont have to apply a classname to any links within the cell (you can just specify to style all links that are under the cell).

ie:

.navcell {
    background-image: url(/images/img_06.gif);
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    height: 30px;
    width: 144px;
    text-align:center;
}

.navcell a {
    display: block;
}

[html]<td class="navcell" onclick="navToLink(this)"><a href="/tutorials">Tutorials</a></td>[/html]