Some CSS/HTML help please...

[Guest Brivtech]

I'm working on a menu system at the moment - I can create table cells that change background colour by linking to a background in a CSS file.

It works great, however, the user will still need to click on the text in the cell to perform the hyperlink. In some of the cells there's a lot of space, and I can't crop the cells to fit the text because it would throw the table out. With the background changing colour on mouseover, it gives the impression that the whole cell is clickable. but it isn't! - It needs to be though.

Is there any easy way to alter the hyperlinks, so that if the cell is clicked, the hyperlink is performed, rather than clicking just the text in the cell?

I'm beaten on this one. Also, it's too late and I'm off to bed! :)

[roban]

Not too sure about this one but couldn't you do a clickable map area.

www.cs.tut.fi/~jkorpela/HTML3.2/5.37.html

[Guest Brivtech]

I know I can do it by generating an image (through GD) from the cell content that then fills the cell, but this is messy, and the images have to be regenerated on each page refresh, as the content changes - Slows the page load times down a lot.

Image map may also be too Fiddly Roban.

[Guest groovejuice]

I've done this before using straight CSS. Please PM me for a link.

'ansuk-edit' groovejuice - you know better than to provide outside links. Please PM Britvech the link hun

[Guest Brivtech]

Oops!

PM sent.

[Guest groovejuice]

My apologies! I thought that general tutorial weblinks were allowed. :)

[Guest Brivtech]

PM received back, and the solution was exactly what I was looking for and not that difficult to adapt either.

Many thanks and very greatly appreciated. :)

[Guest groovejuice]

For those who are looking for a similar effect, here is the code from an article by Frank Manno:

<ul id="nav">

<li><a href="#">Mango</a></li>

<li><a href="#">Cherries</a></li>

<li><a href="#">Strawberries</a></li>

<li><a href="#">Peaches</a></li>

<li><a href="#">Kiwi</a></li>

</ul>



CSS:

nav{

margin: 0;

padding: 0;

list-style-type: none;

background-color: #94A0AB;

width: auto;

}



#nav li{

padding: 0;

margin: 0;

display: inline;

background-color: #94A0AB; 

}



#nav li a{ 

float: left;

font-family: georgia, Arial, Helvetica, sans-serif;

color: #000;

border-bottom: 3px solid #94A0AB;

background-color: #94A0AB; 

text-decoration: none;

padding: 3px 5px;

}



#nav li a:hover{

border-bottom: 3px solid #000;

background-color: #C7CFD7;

}



#nav li#mango a:hover{ background-color: #FFD700; }

#nav li#cherry a:hover{ background-color: #F90000; }

#nav li#sb a:hover{ background-color: #FF5757; }

#nav li#peach a:hover{ background-color: #FFD17B; }

#nav li#kiwi a:hover{ background-color: #00BD02; }