|
Subject:
|
Table cells as links
|
|
Posted By:
|
gjeardle
|
Post Date:
|
1/19/2007 8:39:20 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
|
|
Reply By:
|
meow
|
Reply Date:
|
1/19/2007 9:12:28 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.
<!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
|
|
Reply By:
|
gjeardle
|
Reply Date:
|
1/19/2007 9:31:10 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
|
|
Reply By:
|
meow
|
Reply Date:
|
1/19/2007 9:39:38 AM
|
It's flash.
--
http://yupapa.com
|
|
Reply By:
|
gjeardle
|
Reply Date:
|
1/22/2007 5:06:19 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?
|
|
Reply By:
|
meow
|
Reply Date:
|
1/22/2007 10:51:31 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
|
|
Reply By:
|
gjeardle
|
Reply Date:
|
1/22/2007 11:05:27 AM
|
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?
|
|
Reply By:
|
meow
|
Reply Date:
|
1/22/2007 12:36:46 PM
|
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:
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:
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
|
|
Reply By:
|
meow
|
Reply Date:
|
1/22/2007 12:38:27 PM
|
P.S. There's a vast difference between how something really is and what it looks like it is. 
--
http://yupapa.com
|
|
Reply By:
|
Imar
|
Reply Date:
|
1/22/2007 2:21:27 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.
|
|
Reply By:
|
gjeardle
|
Reply Date:
|
1/23/2007 7:45:01 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
|
|
Reply By:
|
Imar
|
Reply Date:
|
1/23/2007 7:56:46 AM
|
Did you *try* meow's suggestion? It does exacrly that.....
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
gjeardle
|
Reply Date:
|
1/23/2007 9:42:01 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
|
|
Reply By:
|
Imar
|
Reply Date:
|
1/23/2007 2:46:32 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.
|
|
Reply By:
|
meow
|
Reply Date:
|
1/23/2007 6:39:24 PM
|
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
|
|
Reply By:
|
gjeardle
|
Reply Date:
|
1/24/2007 10:33:23 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.
|
|
Reply By:
|
meow
|
Reply Date:
|
1/24/2007 11:08:52 AM
|
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
|
