Transforming a whole cell into a link

Evander · 02-21-2007, 10:30 PM

Hi everyone!

On the page i'm creating there is a 3 columns table. Is it possible to make it so that if someone click anywhere in the first 2 cells of a row they get directed to a page and if they click anywhere in the 3rd cell they are directed to another one. I've tried playing a bit with the display in the css code but without finding how to achieve this effect.

Thanks for taking a look!

Evander

Html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/sub.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<link href="css/3.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

<body>
<div id="navbar">
	<ul>
		<li><a name="top" id="top"></a><a href="index.html" title="Accueil">Accueil</a></li>
		<li><a href="hebergement_ile_orleans.html" title="Hébergement">Hébergement</a></li>
		<li><a href="restaurants_ile_orleans.html" title="Restauration">Restauration</a></li>
		<li><a href="spectacles_ile_orleans.html" title="Spectacles">Spectacles</a></li>
		<li><a href="livres_ile_orleans.html" title="Livres">Livres</a></li>
		<li><a href="artisans_ile_orleans.html" title="Artisans">Artisans</a></li>
		<li><a href="" title="Tourisme">Tourisme</a></li>
		<li><a href="partenaires_ile_orleans.html" title="Partenaires">Partenaires</a></li>
	</ul>
</div>
<div id="container">
  <!-- InstanceBeginEditable name="contain1" -->

  <table summary="Saint-Laurent" id="stlaurent">
  <caption>Saint-Laurent-de-l'Île-d'Orléans</caption>

    <tr>
      <td class="c1"><img name="" src="" width="100" height="100" alt="logo ou image" /></td>
      <td class="c2">
	  	<h2>Le moulin de St-Laurent</h2>
	  <p>Restaurant saisonnier, offrant une fine cuisine r&eacute;gionale. Le moulin de St-Laurent saura combler les plus exigeant.</p></td>
     <td class="c3">
	 <ul>
	  	<li><a href="restaurants_ile_orleans/moulin_st-laurent/reserver.html">R&eacute;server</a></li>
     	<li> <a href="restaurants_ile_orleans/moulin_st-laurent/info.html">Plus d'information..</a></li>
	</ul>
	</td>
    </tr>
    <tr>
      <td class="c1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</td>
      <td class="c2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</td>
      <td class="c3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <!-- InstanceEndEditable --></div>
<div id="sidebar">
	<ul>
	  <!-- InstanceBeginEditable name="navbare" -->
     	 <li><a href="#stpierre">Saint-Pierre</a></li>
	    <li><a href="#stepetronille">Sainte-Pétronille</a></li>
	    <li><a href="#stlaurent">Saint-Laurent</a></li>
	    <li><a href="#stjean">Saint-Jean</a></li>
		<li><a href="#stfrancois">Saint-François</a></li>
		<li><a href="#stefamille">Sainte-Famille</a></li>
      <!-- InstanceEndEditable -->
  </ul>
</div>
<div id="siteinfo">
<p>© 2007 - Sylvain Delisle | <a href="termes.html" title="Termes et condititions">Termes et conditions</a> | <a href="contact.html" title="Contact">Contactez-moi</a> | English version</p></div>
	<div id="border1"></div>
</body>
<!-- InstanceEnd --></html>

css

Code:

* {padding: 0 0; margin: 0 0;} /* les marges et le padding sera de 0 par défaut à moins de spécifier le contraire */


/* ---------- Structure ---------- */
#container {
	float: left;
	padding: 2em 12em 0 5em /* padding right doit être plus grand que la largeur de #sidebar */
}

#sidebar {
	float: right;
	position: fixed;
	top: 150px;
	right: 0;
	background-color: #b80000;
	width: 10em; /* doit être plus petit que le padding right de #container */
}

#siteinfo {
	clear: both;
	text-align: center;
	padding-left: 2em;
}

#border1 {
	background-image: url(../images/bd_rouge.png);
	background-repeat: repeat-y;
	background-position: left top;
	top: 0;
	position: fixed;
	width: 45px;
	height: 100%;
	z-index: 100;
}
/* ---------- Style --------- */


#container h1 {
	color:#0a238e;
	font-size: 1.5em;
	padding-top: .75em;
	font-family: Georgia, "Times New Roman", Times, serif;
}

#container h2 {
	font-size: 1em;
	font-family: Georgia, "Times New Roman", Times, serif;
}



#navbar a{
	color: #FFFFFF;
	padding: 0.4em;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: bold;
}
#navbar a:hover{
	background-color:#051cfd;
}
#container a{
	color:#0a238e;
	text-decoration: none;
	font-weight: bold;
}

#container a:hover{
	color:#CCCCCC;
}

#sidebar a{
	display: block;
	text-decoration: none;
	color:#FFFFFF;
	font-family:Geneva, Arial, Helvetica, sans-serif
	
}

#siteinfo a{
	color:#0a238e;
	text-decoration: none;
	font-weight: bold;
}

#container p {
	padding-top: 1em;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 165%;
	font-size: .80em;
}

#siteinfo p {
	padding-top: 1em;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 165%;
	font-size: .80em;
}

#navbar ul{
	background-image: url(../images/nav1.gif);
	background-position: bottom;
	background-repeat: repeat-x;
	background-color:#051cfd;
	text-align: center;
	padding: 0.4em 0 0.5em 2em; /* maintenir identique en largeur à #branding */
	position:relative;
	z-index: 4;
}

#navbar li{
	list-style-type: none;
	display: inline;
}

#sidebar li{
	list-style-type: none;
	text-align: center;
}

#container li{
	list-style-type: none;
	padding-bottom: 10px;
}

#container div{
	border-bottom:solid 1px;
}

/*---------- Table ----------*/

table,tr,td {
	border-collapse:collapse;
}

.c1 {
	width: 100px;
	padding: 10px;
	border-top: 1px solid;
	border-left: 1px solid;
	border-bottom: 1px solid;
}

.c2 {
	width: 100%;
	padding: 10px;
	border-top: 1px solid;
	border-bottom: 1px solid;
}
.c3 {
	width: 100px;
	padding: 10px;
	border-top: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
}

caption {
	text-align: left;
	color:#0a238e;
	font-weight: bold;
	font-size: 1.5em;
	padding-top: .75em;
	font-family: Georgia, "Times New Roman", Times, serif;
}

JohnDubya · 02-21-2007, 10:49 PM

Just use some simple Javascript and an onclick() to do this. If you want just one column to be clickable, put this inside the <td> tag. If you want the entire row to be clickable, put this inside the <tr> tag. If you were using it with a <td>, it would look like this:

Code:

<td onclick="location.href='http://link_here.com/';">Text here</td>

Good luck!

Evander · 02-21-2007, 11:02 PM

Thank you for your answer.

JohnDubya · 02-21-2007, 11:09 PM

You're welcome! You could also do some pretty cool stuff with that if you used some CSS. If you wanted any <td> that had an onclick attribute to be a different color, you could put this in your CSS:

Code:

td[onclick] {
    background-color: #CCCCCC;
}

[note: the [] attribute selector doesn't work in IE6, so the user would have to have an updated browser to see what this code does.]

This CSS code would make it so that if you had any <td> tag linked with the onclick attribute, the background color of that cell would be #CCCCCC. Pretty cool, huh?

rmedek · 02-22-2007, 12:39 AM

Why onclick and not a link?

Evander · 02-22-2007, 05:50 PM

Hi again!

I tested JohnDubya's solution it's working but it's not exactly what i wanted.

1st the cell is not acting exaclty like a link. The cursor is not replaced by a small hand indicationg it's a clickable region. I could easely add some hover effect but i would like to have the cursor effect too.

2nd I'm not sure I want scripts in my page. The visitors of the page i'm creating will be far from being tech savy and for that reason I would prefer that they don't receive a message telling them that my page may be unsafe due to activeX scripts.

Any other idea to get the effect I want?

Thanks

JohnDubya · 02-22-2007, 05:57 PM

I heard that it is possible to surround a <tr> or <td> tag with an <a> tag to make the row or cell linkable. I haven't tested that, so I'm not for sure. I found the Javascript solution by Googling your question, so you can do the same, and you should find an answer. Good luck!

rmedek · 02-22-2007, 06:15 PM

I'm so confused. Why not:

Code:

<td>
 <a href="somewhere">something</a>
</td>

As far as the other stuff:

Quote:

The cursor is not replaced by a small hand indicationg it's a clickable region. I could easely add some hover effect but i would like to have the cursor effect too.

Use CSS:

Code:

td:hover { cursor: pointer; } /* needs javascript (google "sfhover") to work in IE 6 */

Quote:

I would prefer that they don't receive a message telling them that my page may be unsafe due to activeX scripts.

A Javascript-powered event isn't the same as an ActiveX script; I doubt you'd get any warning (er, said the Mac user).

Arbitrator · 02-22-2007, 06:32 PM

Quote:

Originally Posted by JohnDubya

I heard that it is possible to surround a <tr> or <td> tag with an <a> tag to make the row or cell linkable.

That would be incorrect (X)HTML. You can’t nest table elements inside of anchor elements.

What you can do is put an anchor element inside a table cell and set its width and height equal to the size of the cell so that it creates the effect that the entire cell is clickable. There are some caveats though: the cell can’t have padding or content that isn’t inline-level. Example:

CSS:

Code:

td { padding: 0; }
a { display: block; width: 100%; height: 100%; }

HTML:

Code:

<table>
  <tr>
    <td><a href="…">…</a></td>
    <td><a href="…">…</a></td>
    <td><a href="…">…</a></td>
  </tr>
</table>

Quote:

Originally Posted by rmedek

A Javascript-powered event isn't the same as an ActiveX script; I doubt you'd get any warning (er, said the Mac user).

Internet Explorer 7 disables JavaScript by default and produces a yellow bar at the top that must be clicked to activate scripts. It reads: “To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options…”. Of course, this only seems to apply to the My Computer zone (files from one’s own computer and not Web sites). Why Internet Explorer thinks files on one’s computer are more dangerous than those in the Internet zone escapes me.

JohnDubya · 02-22-2007, 06:41 PM

Quote:

Originally Posted by Arbitrator

Why Internet Explorer thinks files on one’s computer are more dangerous than those in the Internet zone escapes me.

It's Microsoft. Need I say more?

Evander · 02-22-2007, 06:46 PM

So you're saying that it's only because the file is offline that I receive this message in ie? If it was a real site it would not happens?

Anyway thank you all for your answers. I'll try making some changes later today and I'll let you know how it turn out.

JohnDubya · 02-22-2007, 06:48 PM

Quote:

Originally Posted by Evander

So you're saying that it's only because the file is offline that I receive this message in ie? If it was a real site it would not happens?

Anyway thank you all for your answers. I'll try making some changes later today and I'll let you know how it turn out.

If the file is online, the Javascript should run without any warnings. If it's a local file, it normally does do what Abitrator said.

zach4618 · 02-24-2007, 04:07 AM

I have been experimenting recently, trying to find the best way to link an entire cell. I have found this to be the best way:

<td onclick="location='wherever'" onmouseover="className='whatever'" onmouseout="className='whatever'">whatever</td>

I used the onmouseover and onmouseout events to achieve the effects I wanted, such as the curser, padding, color, background-color, etc...

FullMetal_Ed · 02-24-2007, 07:31 PM

if you have a link in a table, you could use CSS to make the whole cell a link, you just need to define your links

Code:

td a{
width: 100%;
}

that will make the whole cell a link

for a DIV you would do the same

Code:

#navbar a{
	color: #FFFFFF;
	padding: 0.4em;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: bold;
width: 100%;
}

that should make it work

Excavator · 02-24-2007, 07:57 PM

An example using XHTML and CSS... ie: no tables! See link in my sig below.

Code:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body{
	text-align: center;
	background-color: #99CCCC;
}
* {
	margin: 0;
	padding: 0;
}
#cell {
	width: 150px;
	height: 20px;
	margin: 100px auto 0 auto;
	background-color: #CCFFFF;
}
.linked_cell {
	display: block;
	height: 20px;
	width: 150px;
}
</style>
</head>
<body>
<div id="cell"><a href="http://www.nopeople.com/" class="linked_cell">link text here</a></div>
</body>
</html>