p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   HTML Code Clinic (http://p2p.wrox.com/forumdisplay.php?f=90)
-   -   Table cells as links (http://p2p.wrox.com/showthread.php?t=52937)

gjeardle January 19th, 2007 09:39 AM

Table cells as links
 
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. [:p]


--
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. [:o)]

--
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.

gjeardle January 23rd, 2007 08:45 AM

thanks, i may be best using the table row method as i dont want the link to span the entire cell visually. what i want is that when the 'little hand' enters the cell, the colour changes and the link is available throughout


Imar January 23rd, 2007 08:56 AM

Did you *try* meow's suggestion? It does exacrly that.....

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

gjeardle January 23rd, 2007 10:42 AM

My apologies.. it seems to be fine now, im just not familiar with the styling code. Is there anywhere i can obtain notes on the text/CSS formatting? thanks


Imar January 23rd, 2007 03:46 PM

You'll find a lot of useful, but sometimes hard to understand information on the W3C site: http://www.w3.org/Style/CSS/

There's also a great Wrox book about CSS: Beginning CSS: Cascading Style Sheets for Web Design by Richard York.

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.

meow January 23rd, 2007 07:39 PM

Quote:

quote:Originally posted by gjeardle
 thanks, i may be best using the table row method as i dont want the link to span the entire cell visually. what i want is that when the 'little hand' enters the cell, the colour changes and the link is available throughout
Now I'm confused. Isn't what you describe as what you want exactly what you first say you don't want - that the link spans the whole cell visually? ;)

And don't hang on so hard to those cells. As you've seen you can create a square box without a table, so what do you need it for?

--
http://yupapa.com

gjeardle January 24th, 2007 11:33 AM

ok meow, sorry for the confusion, its down to my being a web novice.

anyway.. what i have looks fine, but im struggling with the padding element, my menu is looking good, but dont understand how the '.5em & .3em' (padding) works.. ive tried to change the size, length & gap between cells and its messing me up.


meow January 24th, 2007 12:08 PM

In my example? 'padding' is shorthand for all 4 padding properties. -top, -right, -bottom and -left in that order.
http://www.w3.org/TR/CSS2/box.html#propdef-padding

The gap is caused by 'margin-bottom'.

You may find this introduction useful. It's CSS 1 only, but that doesn't matter. It explains the concept in not too many words..
http://www.htmlhelp.com/reference/css/structure.html
Or maybe start here.
http://www.htmlhelp.com/reference/css/


--
http://yupapa.com


All times are GMT -4. The time now is 05:15 PM.

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.