Wed, 2005-09-21 00:33
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]
Wed, 2005-09-21 00:45
#1
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.
Wed, 2005-09-21 00:48
#2
Thankyou
Could you give me an eg. please. Sorry to be a nuisance.
Wed, 2005-09-21 01:04
#3
Making a table cell a link or...
your wish ...
<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?
Wed, 2005-09-21 01:08
#4
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??? 
Wed, 2005-09-21 01:13
#5
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 
:D
Wed, 2005-09-21 01:25
#6
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 :?
Wed, 2005-09-21 01:35
#7
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 
Wed, 2005-09-21 02:01
#8
Re: Whats the thing with tables?
Luke2000 wrote:
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. 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
Wed, 2005-09-21 02:11
#9
I see
Thankyou for enlightening me. I always thought tables where a design tool.
Wed, 2005-09-21 02:14
#10
Chris S
How did you specify the height fo your table cells in the example you gave?
Wed, 2005-09-21 02:27
#11
Re: I see
Luke2000 wrote:
Well, I've seen people pound a nail with a pair of pliers. Thankyou for enlightening me. I always thought tables where a design tool.
You must read this: http://www.hotdesign.com/seybold/index.html
Wed, 2005-09-21 02:47
#12
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 
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
Wed, 2005-09-21 02:59
#13
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.
Wed, 2005-09-21 03:07
#14
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
Wed, 2005-09-21 09:03
#15
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
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.
Wed, 2005-09-21 09:56
#16
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 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
Hugo.
Wed, 2005-09-21 10:12
#17
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. lol