Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old January 19th, 2007, 09:39 AM
Authorized User
 
Join Date: Jan 2007
Location: , , .
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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

Reply With Quote
  #2 (permalink)  
Old January 19th, 2007, 10:12 AM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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
Reply With Quote
  #3 (permalink)  
Old January 19th, 2007, 10:31 AM
Authorized User
 
Join Date: Jan 2007
Location: , , .
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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 With Quote
  #4 (permalink)  
Old January 19th, 2007, 10:39 AM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

It's flash.

--
http://yupapa.com
Reply With Quote
  #5 (permalink)  
Old January 22nd, 2007, 06:06 AM
Authorized User
 
Join Date: Jan 2007
Location: , , .
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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 With Quote
  #6 (permalink)  
Old January 22nd, 2007, 11:51 AM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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 With Quote
  #7 (permalink)  
Old January 22nd, 2007, 12:05 PM
Authorized User
 
Join Date: Jan 2007
Location: , , .
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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 With Quote
  #8 (permalink)  
Old January 22nd, 2007, 01:36 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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
Reply With Quote
  #9 (permalink)  
Old January 22nd, 2007, 01:38 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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

--
http://yupapa.com
Reply With Quote
  #10 (permalink)  
Old January 22nd, 2007, 03:21 PM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

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 With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Contentpage stretching table cells rsearing ASP.NET 2.0 Basics 3 November 14th, 2006 10:39 PM
How to know cells in table is merging?? DorisTan VB How-To 0 January 13th, 2005 09:50 PM
Table Links samdavis HTML Code Clinic 2 November 30th, 2004 06:38 AM
links in table fields (td) amc Dreamweaver (all versions) 0 August 30th, 2004 09:20 PM
Addling table links from VB MoyesBlue Crystal Reports 0 May 20th, 2004 04:36 AM



All times are GMT -4. The time now is 01:18 AM.


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