SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    big HELLO to everyone

    Hi there

    Im a graphic/web designer but trying to get into the code side which brought me to this forum after working through sitepoints book 'Build your own site the right way' - great book by the way if like me you have only used tables in the past.

    anyway im building my first site using css and have a technical question...

    i have used a table to display upcoming gigs and venues, is it possible to make the enitre row a link with hover state etc?

    heres a link to show the site as it is, at the minute just the th(date is a link)

    http://www.readd.karoo.net/circusenvy/

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to SitePoint!

    Quote Originally Posted by darren.read
    is it possible to make the enitre row a link with hover state etc?
    You can achieve a visual 'hover' state using CSS only, although it won't work in Internet Explorer 6 or older.
    Code:
    tr:hover td {
      background-color:#ff0;
      color:#000;
    }
    To make the whole row a 'link', you must use JavaScript. You can do something similar by enclosing the content of each cell in a link (provided it's inline elements only), and then use CSS to highlight the whole row on hover (in modern browsers).
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Addict Jamieharrop's Avatar
    Join Date
    Mar 2005
    Location
    West Yorkshire, UK
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As Tommy said, the only way you can do exactly what you want is by using Javascript.

    HTML Code:
    <tr onclick="window.location='somepage.html'" onmouseover="this.style.cursor='hand'"><td>Content Here</td></tr>
    To get this to work properly in IE5.5, IE6, Fx, and Opera, you will need to add some CSS to define the cursor style for that <tr>

    So, give the <tr> an id or class, by using this:

    HTML Code:
    <tr id="cursor_id" onclick="window.location='somepage.html'" onmouseover="this.style.cursor='hand'"><td>Content Here</td></tr>
    Then in your CSS add this:

    Code:
    #cursor_id {
    cursor: pointer;
    }
    Regards,
    Jamie Harrop

  4. #4
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for that tommy, i have gone with your suggestion and it works great apart form ie6.

    i have used a hover style underline on the 'a' element on the date (th) and venue (td) in ie, shame you cant get them both to underline together as in firefox etc using the tr:hover.

    http://www.readd.karoo.net/circusenvy/


Bookmarks

Posting Permissions

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