Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Transforming a whole cell into a link

    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;
    }

  • #2
    Super Moderator JohnDubya's Avatar
    Join Date
    Nov 2006
    Location
    Missouri
    Posts
    634
    Thanks
    12
    Thanked 18 Times in 18 Posts
    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!

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your answer.

  • #4
    Super Moderator JohnDubya's Avatar
    Join Date
    Nov 2006
    Location
    Missouri
    Posts
    634
    Thanks
    12
    Thanked 18 Times in 18 Posts
    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?

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Why onclick and not a link?

  • #6
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Super Moderator JohnDubya's Avatar
    Join Date
    Nov 2006
    Location
    Missouri
    Posts
    634
    Thanks
    12
    Thanked 18 Times in 18 Posts
    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!

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I'm so confused. Why not:

    Code:
    <td>
     <a href="somewhere">something</a>
    </td>
    As far as the other stuff:

    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 */
    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).

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by JohnDubya View Post
    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 View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    Super Moderator JohnDubya's Avatar
    Join Date
    Nov 2006
    Location
    Missouri
    Posts
    634
    Thanks
    12
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by Arbitrator View Post
    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?

  • #11
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Super Moderator JohnDubya's Avatar
    Join Date
    Nov 2006
    Location
    Missouri
    Posts
    634
    Thanks
    12
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by Evander View Post
    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.

  • #13
    New Coder
    Join Date
    Feb 2007
    Location
    Albany, Oregon
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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...
    Last edited by zach4618; 02-24-2007 at 04:17 AM.

  • #14
    New Coder
    Join Date
    Dec 2006
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •