Web Analytics Made Easy -
StatCounter Whole TD linkable - CodingForum

Announcement

Collapse
No announcement yet.

Whole TD linkable

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Whole TD linkable

    I tried searching but I couldn't find what I'm looking for even though I think I remember seeing this question a while ago...

    I'm looking for a way to make an entire td or tr tag linkable. I currently have a navigation using CSS rollovers to give the impression of buttons without acually making them images. I can make them into images if I have to but the customer always changes his mind about the links so I would love to find a way to do this through CSS or JavaScript to speed up the updating process.

    http://www.discoveryhomeinspection.com

    Any ideas?
    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #2
    I dont know about any really smart CSS ways to do this. You could just use a javascript function and window.location, so providing that you still had your standard links (<a href="") people with javascript disabled would have to click on the word itself, and people that had it enabled could click anywhere on the button.

    You could look on http://www.alistapart.org, as they may have some kind of solution to this.
    PHP Weekly - A PHP Developers Resource
    PHP 5.1.4 and Ruby on Rails web hosting
    Moderator of PHP and Work offers and Requests
    Install Apache/PHP/MySQL
    (by marek_mar) | TinyPlugin Architecture

    Comment


    • #3
      I thought that maybe if you set the <a> tags to display as blocks (like a <td> tag) then you'd be able to click it all and style it nicely with CSS. I've put them into a list because it's a list of links. It looks fine in IE6 and Firefox 0.8.

      Code:
      <style>
      ul, li {
      padding: 0;
      margin: 0;
      list-style-type: none;
      }
      
      #menu li a {
      display: block;
      width:167px;
      padding: 2px;
      margin: 2px;
      background-color: #822323;
      font: bold 8pt ARIAL;
      color: #ffffff;
      text-decoration: none
      }
      
      #menu li a:hover {
      background-color: #989898;
      }
      </style>
      
      <ul id="menu">
      	<li><a href="pia.html">Request Inspection</a></li>
      	<li><a href="pia.html">Request Inspection</a></li>
      	<li><a href="pia.html">Request Inspection</a></li>
      	<li><a href="pia.html">Request Inspection</a></li>
      </ul>
      This method means that you dont have to have JavaScript for it to work, and it should still be functional in older browsers.

      Hope that helps
      redhead

      Comment


      • #4
        Great, I knew you guys would hook me up, thanks!
        -WebMark Art
        Programming is 80% thinking and 20% spelling

        Comment


        • #5
          no problem
          redhead

          Comment

          Working...
          X