Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    Junior Member
    Join Date
    Feb 2003
    Location
    Elgin, Scotland
    Posts
    28
    Member #
    617
    I'm learning a bit about css but am not that knowledgeable yet! I have a design for a web page but am unsure about how to create it using css. Basically i want to have a background image with a layer on top of it containg a table. When the pointer hovers over a row of the table I want the background of the row to be none so that the background image shows through. See my attachment for design. Any hints on how to do this?
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    when you hover (so basically the whole row would be a link i guess) put background-color: transparent;

    that means on a non-hover (:link, :visited, :active) you would have background-color: #something;
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    background-color: transparent; works? I've never seen this used but it would be supremely cool!

  5. #4
    Member Juvenall's Avatar
    Join Date
    Sep 2004
    Location
    #!/usr/bin/Detroit
    Posts
    67
    Member #
    7716
    Hum. If you're using a table for the design (which isn't as bad considering you're dealing with tabular data), I don't believe there is a way to do this with just CSS and have things work cross browser. The problem is that IE only supports the :hover pusdo-class on link elements. So something like tr:hover {background-color:red;} wouldn't work. In that case, you would need to add something like <tr onmouseover="this.style.backgroundColor='red';"> (and then an onmouseout event to change it back..there are other ways to go about it with getElementById, but I think that's beyond the scope of this post..lol)

    I know someone will correct me if I'm wrong..heh
    Juvenall Wilson_______[juvenall@gmail.com]_________________
    Forum Directory - ForumFox.com
    YaBB Project Admin/Former allmusic.com designer

  6. #5
    Senior Member echoSwe's Avatar
    Join Date
    May 2004
    Posts
    332
    Member #
    5926
    Naah, you're right. But concidering the image he posted it would be hard. He had a special color (to make it more "3D") above and beneath the selected row.

    If he want to make this accoring to the looks (which I encourage, because it's not so traditional) then he might be better off using flash.

  7. #6
    Senior Member Holokai's Avatar
    Join Date
    Sep 2004
    Location
    Honolulu, HI
    Posts
    127
    Member #
    7707
    Dig the idea, that's gonna look sweet when it's done... long as the background image isn't too "busy"
    -----------------------------------------------
    I know just enough to be dangerous to myself and others around me... I'm more of a CSS kamikaze than a CSS ninja...

  8. #7
    Junior Member
    Join Date
    Feb 2003
    Location
    Elgin, Scotland
    Posts
    28
    Member #
    617
    I came across an example of getting the 3D look using css by making the top and bottom borders contrasting colours so that shouldn't be a problem.

  9. #8
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    or you link every cell...

    but yes... the transparent works
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  10. #9
    Junior Member
    Join Date
    Feb 2003
    Location
    Elgin, Scotland
    Posts
    28
    Member #
    617
    How do you link the cells?

  11. #10
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    ?!?
    Code:
    <td><a href="..">...</a></td>
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

css table rollover pattern

,

how to create a rollover in a table with css

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:50 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com