Some CSS Help

Discussion in 'Web Design and Development' started by Me1000, Feb 24, 2007.

  1. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #1
    Hello,

    ok let me describe my setup, I have a simple table,

    The table has a background image set in the HTML, now I want to make it so that when the user moves the mouse over any of the cells in the table it have a hover effect,

    The effect would (in theory) be a 1x1px image (white) and it would stretch to fill the whole cell automatically, but the image would also have to be about 75-90% transparent.

    If im not mistaken this can be done with CSS, easily,
    Im defiantly not a CSS expert, but i know enough to do some editing!



    Thanks,
     
  2. ebouwman macrumors 6502a

    Joined:
    Jan 5, 2007
    Location:
    Canada
    #2
    well starts out with... i'm pretty sure...
    table:hover {

    }

    i'm not sure what the rest is, i have a really good refrence book for this sort of thing but i lost it...
     
  3. ebouwman macrumors 6502a

    Joined:
    Jan 5, 2007
    Location:
    Canada
    #3
    td:hover{
    background-image : <url>;
    background-repeat : repeat;
    background-attachment : fixed;
    }

    i think something like that should do it

    :edit: oops forgot transperancy, isn't listed in my reference, but i think you could use a an image that was a GIF that was transperant already.
     
  4. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #4
    ok one more quicky, this is only for one set of cells, if i read it correctly, that would make it id for all the cells, on the page, how do I name it? :eek:
     
  5. ebouwman macrumors 6502a

    Joined:
    Jan 5, 2007
    Location:
    Canada
    #5
    so you want only certain cells to have this effect when you put the mouse over it?

    ummm, not sure how to do this
     
  6. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #6
    well its not just one cell its a group of cells,
     
  7. ebouwman macrumors 6502a

    Joined:
    Jan 5, 2007
    Location:
    Canada
    #7
    oh right, i was thinking for a sec that it would only be that one cell because the html code is

    table
    tr
    td
    text
    /td
    /tr
    /table

    so i thought it would only affect that one cell.
     
  8. ebouwman macrumors 6502a

    Joined:
    Jan 5, 2007
    Location:
    Canada
    #8
    also i'm not entirely sure that the code i gave you will work at all:eek:
     
  9. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #9
    thinking about it again, there is really no need for an image, a simple background color, with a transparency would do...


    here is what i have so far...
    Code:
    
    .subnav td:hover{
    background: #FFFFFF;
    filter:alpha(opacity=50);   /* Internet Explorer       */
    -moz-opacity:0.5;           /* Mozilla 1.6 and below   */
    opacity: 0.5;               /* newer Mozilla and CSS-3 */
    
    }
    and this is part of the page

    Code:
    <td id="subnav" class="subnav"><a href="http://www.link.com/"><b><div id="subnav">LINK 1</div></b></a></td>
    
    and I am aware that some of my page's code is redundant, but I was going to mess with it until it worked, then get rid of the redundant stuff, but feel free to tell me,

    What is the difference between ID, and class? lol
     
  10. ebouwman macrumors 6502a

    Joined:
    Jan 5, 2007
    Location:
    Canada
    #10
    i think not realy sure though, that the difference between the class and id is so that you could have more than one set of css properties associated with it
     
  11. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #11
    It has to be translucent though, because it will show up over a multicolor background...
     
  12. ebouwman macrumors 6502a

    Joined:
    Jan 5, 2007
    Location:
    Canada
    #12
    i'm sorry i don't know how to do the opacity... but looking at your code, does that work right

    i'm using safari, and i can only get the stylesheet to work if i have something like

    td.subnav:hover {
    ...
    }
     
  13. ebouwman macrumors 6502a

    Joined:
    Jan 5, 2007
    Location:
    Canada
    #13
    when i use this code it works for me in safari:

    td.subnav:hover {
    background-color : red;
    opacity: 0.1;
    }
     
  14. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #14
    ok, thanks

    That got me around the first hump,

    I hope I am able to fix the small bugs now!


    Thanks for all your help!
     
  15. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #15
    ok now I have another question,

    I have declared a class (subnav)
    the links for this class need to be different than all the other links on the page

    Here is what I have, but the syntax is wrong,

    Code:
    .sub_nav {
    	color: #FFFFFF;
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 14;
    	font-weight: bold;
    }
    a.sub_nav:link {
    	color: #FFFFFF;
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    a.sub_nav:visited{
    	color: #FFFFFF;
    }
    a.sub_nav:hover {
    	color: #FF0000;
    	background-color : white;
    	opacity: 0.25;
    }
    a.sub_nav:active {
    	color: #237cc4;
    }
     
  16. ebouwman macrumors 6502a

    Joined:
    Jan 5, 2007
    Location:
    Canada
    #16
    the class before was "subnav"
    now it's "sub_nav" ??
    what exactly is wrong with it... what isn't it doing?
    the last set, a.sub_nav:active, the color code isn't the propper hexidecimal type
     
  17. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #17
    well its not doing anything, when I move over the link it stays the same as the normal state, (of the sub_nav class)

    here is the HTML

    Code:
    <a href="http://www.google.com/"><b><div class="sub_nav">LINK 1</div></b></a>
    if I move the div tags outside the <a> tags then the links are treated like regular links,

    for now, when i rollover the regular white text the textcolor should change to red, but it stays white!
     
  18. ebouwman macrumors 6502a

    Joined:
    Jan 5, 2007
    Location:
    Canada
    #18
    you need to put class="sub_nav" into the <a> tag
     
  19. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #19
    No, lol ;)

    I took them out, but it didnt change anything!
     
  20. ebouwman macrumors 6502a

    Joined:
    Jan 5, 2007
    Location:
    Canada
  21. ebouwman macrumors 6502a

    Joined:
    Jan 5, 2007
    Location:
    Canada
    #21
    is there another css set that applies to the <a href tag? or the <div tag?
     
  22. ebouwman macrumors 6502a

    Joined:
    Jan 5, 2007
    Location:
    Canada
    #22
    all the info for sub_nav is for if you have a link that is of the class sub_nav
    so you have to have the link be of the sub_nav class and delete the div tags

    OR

    change all the css stuff to have div instead of a
    ex
    div.sub_nav:hover { ...
     
  23. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #23
    I figured it out...

    not exactly what i want though,

    to get the desired effect, I removed the Div tags,
    and added the class inside the <a> tag

    Code:
    <a class="subnav" href="http://www.google.com/">LINK 1</a>
    now what I really would like to do, is set the dif tags outside all the links in the table

    Code:
    <tr><div class="subnav" >
        <td><a href="index.php"><b>Home</b></a></td>
        <td><a href="index.php?page_id=2"><b>CONTACT US</b></a></td>
        <td><a href="index.php?page_id=49"><b>GUESTBOOK</b></a></td>
        <td><a href="index.php?page_id=3"><b>LINK TO US</b></a></td>
        <td><a href="index.php?page_id=5"><b>NEWS/UPDATES</b></a></td>
     </div> </tr>
    Then I can set it so that if its not a link do something, if it is a link do what i have it set to...

    ill keep playing, cuz i know there is a way,
    but feel free to tell me how I will be checking back here as I get frustrated lol
     

Share This Page