17 replies [Last post]
Luke2000
Offline
Enthusiast
Last seen: 15 years 5 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Is it possible to do the following. I have some text inside a table cell. I want to make it so that when the user rolls over the text in the cell the whole of the table cell background (not just that background of the text) changes color. I DO NOT WANT TO USE JAVASCRIPT because it is not used as widely as I would like. I know it can be done because I have seen it on another site (http://www.realityhouse.co.uk/index.htm). Any suggestions? Thankyou.[/url]

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Making a table cell a link or...

Probably best to make the link display:block and set its height and width to match the cell's height and width. If you only want the cell background to change when hovering over the text (not if hovering over blank space in the cell) you will have to resort to javascript. Even in browsers which support :hover on all elements you can't write a style rule so an element can affect its antecedents.

Luke2000
Offline
Enthusiast
Last seen: 15 years 5 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Thankyou

Could you give me an eg. please. Sorry to be a nuisance.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Making a table cell a link or...

your wish ...

example

<table><tr><td><a href=''>somelink</a></td></tr></table>

td a {display: block; height: 100%;}
td a:hover {background: #f93;}

You wouldn't be constructing a menu by chance?

Luke2000
Offline
Enthusiast
Last seen: 15 years 5 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Thankyou

If by menu you mean a navbar or a series of buttons in a row etc. then yes I am. If you dont then sorry for being such a noob... lol, thankyou for my code. How many wishes do i have left oh genie of the lamp??? Tongue

Luke2000
Offline
Enthusiast
Last seen: 15 years 5 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

BTW

You are an absolute diamond. That script works perfectly. And the ppl in the javascript forum said it couldn't be done without javascript... huh. Thankyou very much, greatly appreciated Laughing out loud :D Laughing out loud

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Re: Thankyou

Luke2000 wrote:
And the ppl in the javascript forum said it couldn't be done without javascript...

Pfft, what do they know. By the sound of that advice you may even get better javascript advice here too :?

Luke2000 wrote:
If by menu you mean a navbar or a series of buttons in a row etc. then yes I am.

In this forum we don't advocate using tables for any other content besides tabular data. Which means your navbar is most likely better implemented as an unordered list or perhaps a paragraph.

.menu {margin: 0; padding: 0; list-style: none;}
.menu li {float: left; }
.menu a {display: block; padding: 0.5em; border: 1px solid black;}
p.menu a {float: left;}
.menu a:hover {background: #f93;}


<ul class='menu'>
 <li><a href='#'>link 1</a></li>
 <li><a href='#'>link 2</a></li>
 <li><a href='#'>link 3</a></li>
</ul>

<p><a href='#'>link 1</a><a href='#'>link 2</a><a href='#'>link 2</a></p>

*there is a bit of javascript on the page in my previous post, for IE only - its does the hovering over the cells without links. No javascript is required for modern browsers. Also it doesn't work in IE :?

Luke2000
Offline
Enthusiast
Last seen: 15 years 5 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Whats the thing with tables?

Why is that with tables? They do the job... Is it because ppl are trying to revert xhtml to its roots, framework so to speak? If so, I agree with that entirely, but surely a table IS a framework, a container for elements? Please explain to me this dismissal of tables Smile

Anonymous
Anonymous's picture
Guru

Re: Whats the thing with tables?

Luke2000 wrote:
Why is that with tables? They do the job... Is it because ppl are trying to revert xhtml to its roots, framework so to speak? If so, I agree with that entirely, but surely a table IS a framework, a container for elements? Please explain to me this dismissal of tables Smile
It's all about semantics. Using elements for what they are intended to be used. Tables are not designed for layout, they are designed for tabular data. Tables are also not designed for lists...use lists for that. Smile

Luke2000
Offline
Enthusiast
Last seen: 15 years 5 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

I see

Thankyou for enlightening me. I always thought tables where a design tool. Smile

Luke2000
Offline
Enthusiast
Last seen: 15 years 5 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Chris S

How did you specify the height fo your table cells in the example you gave?

Anonymous
Anonymous's picture
Guru

Re: I see

Luke2000 wrote:
Thankyou for enlightening me. I always thought tables where a design tool. Smile
Well, I've seen people pound a nail with a pair of pliers. Wink

You must read this: http://www.hotdesign.com/seybold/index.html

Luke2000
Offline
Enthusiast
Last seen: 15 years 5 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Ok

I read it but I am scared if the truth be known... lol. Can you give me an EXACT alternative to this without using tables? I wouldn't know where to begin... please help me Sad

Quote:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/textstyles.css" rel="stylesheet" type="text/css" />
<link href="css/images.css" rel="stylesheet" type="text/css" />
<link href="css/navs.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div><h1 id="version">v1.0</h1></div>
<div><img id="logo" src="pic.jpg" width="590" height="97" border="0" alt="Pic" /></div>
<hr id="strapbar" size="3px solid" color="#666666">
<table id="navbar" cellpadding="0" cellspacing="1">
<tr>
<td id="toplink1"><h2 class="links"><a href="test">Text Here</a></h2></td>
<td id="toplink2"><h2 class="links"><a href="test">Text Here</a></h2></td>
<td id="toplink3"><h2 class="links"><a href="test">Text Here</a></h2></td>
<td id="toplink4"><h2 class="links"><a href="test">Text Here</a></h2></td>
<td id="toplink5"><h2 class="links"><a href="test">Text Here</a></h2></td>
</tr>
</table>
<table id="navpics" cellpadding="0" cellspacing="1">
<tr>
<td id="link1"><img class="imgset" src="pic.jpg" width="150" height="150" border="0" alt="Pic" /></td>
<td id="link2"><img class="imgset" src="pic.jpg" width="150" height="150" border="0" alt="Pic" /></td>
<td id="link3"><img class="imgset" src="pic.jpg" width="150" height="150" border="0" alt="Pic" /></td>
<td id="link4"><img class="imgset" src="pic.jpg" width="150" height="150" border="0" alt="Pic" /></td>
<td id="link5"><img class="imgset" src="pic.jpg" width="150" height="150" border="0" alt="Pic" /></td>
</tr>
</table>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>

</html>

The CSS are here:

layout.css:

Quote:
body { margin: 0;
padding: 0;
background-color: #fff; }

div, h1#version { margin: 0;
padding: 0; }

hr#strapbar { margin: 0;
padding: 0;
color: #666666;
background-color: #666666;
position: absolute;
top: 111px;
width: 100%; }

table#navbar { position: relative;
top: 100px;
width: 100%; }

td#toplink1 { vertical-align: middle;
width: 20%;
background-color: #cdcdcd; }

td#toplink2 { vertical-align: middle;
width: 20%;
background-color: #cdcdcd; }

td#toplink3 { vertical-align: middle;
width: 20%;
background-color: #cdcdcd; }

td#toplink4 { vertical-align: middle;
width: 20%;
background-color: #cdcdcd; }

td#toplink5 { vertical-align: middle;
width: 20%;
background-color: #cdcdcd; }

td, h2.links { vertical-align: middle;
height: 100%;
margin: 0;
padding: 0; }

table#navpics { position: relative;
top: 99px;
width: 100%;
height: 250px; }

td, img.imgset { vertical-align: bottom;
text-align: right;
margin: 0;
padding: 0; }

td#link1 { background-color: #9afde0; }

td#link2 { background-color: #8ad9e6; }

td#link3 { background-color: #7bb6ec; }

td#link4 { background-color: #6b91f2; }

td#link5 { background-color: #5c6ff8; }

textstyles.css:

Quote:
h1#version { padding: 1px 0px 1px 0px;
font-family: arial;
font-size: 7pt;
font-weight: normal;
color: #cdcdcd;
background-color: #666666;
text-indent: 8px; }

h2.links { padding: 0;
text-align: center;
vertical-align: middle;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #666666;
background-color: #cdcdcd; }

images.css:

Quote:
img { border: 0; }

img#logo { width: 590px;
height: 97px;
position: absolute;
top: 14px;
left: 2px;
z-index: 2; }

img.imgset { width: 150px;
height: 150px; }

navs.css:

Quote:
a { text-decoration: none; }

td#toplink1 a { display: block;
width: 100%;
height: 100%; }

td#toplink1 a:hover { color: #000;
background-color: #fff; }

If you can give me an EXACT alternative to this without tables (bear-in-mind that I don't want any content to overlap when the window is resized and made narrower, neither do I want it to go underneath each other etc.) then I vow never to mis-use tables for as long as we both shall live... thankyou Laughing out loud

Anonymous
Anonymous's picture
Guru

Making a table cell a link or...

Instead of all that how about a link? Are you saying it can't be done?

More semantics for you. Use the "code" tag when showing code, not the "quote" tag.

Luke2000
Offline
Enthusiast
Last seen: 15 years 5 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

OK

Will do from now on. Sorry. The page isn't on the web yet, i'm still working on it off-line. So that's why I didn't post a link. I wasn't saying it can't be done, I am sure it can. I mean I would have absolutley NO IDEA how to achieve it Sad

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Re: OK

Luke2000 wrote:
Will do from now on. Sorry. The page isn't on the web yet, i'm still working on it off-line. So that's why I didn't post a link. I wasn't saying it can't be done, I am sure it can. I mean I would have absolutley NO IDEA how to achieve it Sad

And that is the raison d'etre for this forum. To help people make the transition from tables (or anywhere else) to good CSS based design!

The height in my example is determined by the browser, so its based on the largest cells - the ones with the images in them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Making a table cell a link or...

As Chris states the Raison d'etre of this forum is to provide help and guidance in matters relating to css coding; however the distinction must be made between help and guidance and providing a fix up /layout production service. Asking for help on constructing/converting a layout is fine asking that a member convert an entire layout from tables to a purely CSS based layout is asking for a service is at best cheeky and at worst abusing the forums purpose to a large extent. It's always expected that someone would actually have an attempt at the exercise in hand with perhaps initial instruction and guidance on where to begin and when things became problematical they would turn to us for further help and explanation of techniques, a certain amount of leg work must be performed by the poster as regards basic CSS understanding.

I do not for one minute think that you are not willing to learn and put the time in with the code and I don't think that you really were just seeking someone to do the job for you, but the last post can read that way and is a bit too much to ask of forum members, who themselves are likely quite busy with their own work.

Do ask for all the help you need Luke but can you just be careful about asking that people take layouts and convert them for you, even if just for you to study, converting existing table layouts to CSS can be both tricky and time consuming.

I seem to have become your Nemesis and no doubt a right royal PITA to you Laughing out loud sorry about that but it's important that certain conventions are understood, it's not meant in anyway to antagonize you but really is more of a general pointer for all on the forum

Next time I promise I'll try and have something more constructive to offer Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Luke2000
Offline
Enthusiast
Last seen: 15 years 5 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

No problem...

I didn't mean for people to do it for me, I meant for them to offer any advice on how to do it. I had a go myself last night (instead of sleeping). You can see my rather dire results in the layout forum. Sad lol