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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    Raleigh, NC
    Posts
    484
    Thanks
    0
    Thanked 0 Times in 0 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
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    Raleigh, NC
    Posts
    484
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great, I knew you guys would hook me up, thanks!
    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no problem


  •  

    Posting Permissions

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