Table cells as links

gjeardle · January 19th, 2007, 09:39 AM

Hi, i hope someone can help me in relation to this; ive scoured the web without much joy. Im no HTML expert but i expect that what i want to do requires either Java or XHTML...

Basically i'm creating a basic frameset-type website with a menu in the navigation frame with the contents of the pages in each menu displayed in the frame to the right of the nav frame.

Ok, i have that shell set up, but im struggling with the menu (in the nav frame). So i believe i should have have a table; 1 column, 6 rows (6 menus). I want those 6 cells to be links to their respective web pages in the frame to the right. But i also want the complete cell to be the link (not just the word) and i want the table cell to change colour when the mouse is over it.

Any ideas?
Graham

meow · January 19th, 2007, 10:12 AM

Nope, you don't need any of that, not even the table. All you need is a little CSS.

This would be more structurally sound if the links were in an UL, but it's easier to see what's going on if kept as simple as possible.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Blah</title>

<style type="text/css">
body        { color: black; background: white }
#nav        { width: 10em }
#nav a      { display: block;
              padding: .5em 0 .5em .3em;
              margin-bottom: .3em;
              border: 2px solid black;
              font: bold 100% Arial, sans-serif;
              text-decoration: none;
              color: white; background: black }
#nav a:hover { color: red; background: white }
</style>

</head>


<body> 

<div id="nav">
<a href="http://google.com">Google</a>
<a href="http://google.com">Google</a>
<a href="http://google.com">Google</a>
<a href="http://google.com">Google</a>
</div>

</body>
</html>

--
http://yupapa.com

gjeardle · January 19th, 2007, 10:31 AM

thanks meow, very helpful.. that should give some food for thought.

As a further question, do you or does anyone know what type of coding produces the home page in the following website? Its basically what im looking for. Looks good but simple? coding..

www.watervillegolflinks.ie

meow · January 19th, 2007, 10:39 AM

It's flash.

--
http://yupapa.com

gjeardle · January 22nd, 2007, 06:06 AM

Hi meow, it worked well, thanks.. however, i was looking for the complete table cell to link to the respective page, not just the actual word.. can you tell me what adjustment i need to make to the code?

meow · January 22nd, 2007, 11:51 AM

You can't link a whole table cell. You can make the link fill the whole cell though by using 'display: block' and 'width' and 'height' if needed.

--
http://yupapa.com

gjeardle · January 22nd, 2007, 12:05 PM

thanks Meow, but i belive you actually can have the whole cell as a link.

if you go to the website i mentioned earlier in the thread, the cell background changes colour when you simply hover the mouse over anywhere in the cell and not just the word..

and, if you click anywhere in the cell it goes to the link - not when you only click on the word... any ideas?

meow · January 22nd, 2007, 01:36 PM

Quote:

quote:Originally posted by gjeardle
thanks Meow, but i belive you actually can have the whole cell as a link.

No, you can't.

Quote:

quote:if you go to the website i mentioned earlier in the thread, the cell background changes colour when you simply hover the mouse over anywhere in the cell and not just the word..

Do you mean the menu on this page?
http://www.watervillegolflinks.ie/html/frameset.cfm
The page you link to is just a flash file.
That can be done as I showed you above. It can be done with JavaScript too. It still doesn't make the cell a link. Of course you can link all the content in a cell, provided it's just text and images, not block level tags as for example P.

Quote:

quote:and, if you click anywhere in the cell it goes to the link - not when you only click on the word... any ideas?

Yeah, you didn't try the example I posted above.

--
http://yupapa.com

meow · January 22nd, 2007, 01:38 PM

P.S. There's a vast difference between how something really is and what it looks like it is.

--
http://yupapa.com

Imar · January 22nd, 2007, 03:21 PM

In addition to what meow says, the links in the page you're linked to are images with a specific width. The entire image is wrapped inside the <a> making it clickable everywhere.

Do what meow says and make the <a> just as big as the containing element; that way, the entire cell appears to be clickable; not because the cell is clickable, but because the link spans the entire cell.

If you want to link an entire row, check here: http://imar.spaanjaars.com/QuickDocId.aspx?quickdoc=312

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.