rollover question

Discussion in 'CSS' started by i_am_dhaval, Aug 22, 2007.

0
  1. #1
    i_am_dhaval, Aug 22, 2007 IP
  2. YIAM

    YIAM Notable Member

    Messages:
    2,480
    Likes Received:
    240
    Best Answers:
    0
    Trophy Points:
    280
    #2
    In css try this

    a { background: url(image1.gif); }

    a:hover { background: url(image2.gif); }
     
    YIAM, Aug 22, 2007 IP
  3. i_am_dhaval

    i_am_dhaval Well-Known Member

    Messages:
    1,364
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    138
    #3
    i try this but not parfectly working in both broeser i.e and firefox
     
    i_am_dhaval, Aug 22, 2007 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #4
    HTML:

    <ul id="nav">
    <li><a href="#foo">Foo.</a></li>
    </ul>

    CSS:

    *{margin:0;padding:0;}

    ul#nav li { list-style:none; }

    ul#nav li a { display:block; width:100px; height:20px;
    background:url(http://gandhidhaval.googlepages.com/button-blue.gif) no-repeat center left;}

    /* CHANGE the width/height to what you need */

    ul#nav li a:hover { background-image:url(http://gandhidhaval.googlepages.com/Copyof5button.gif); }

    You might need padding on the LI, and you should probably combine both images into one image (equal to the height of your anchor times 2) so that it doesnt flicker/stutter on hover... and just change the position but the above should do.
     
    soulscratch, Aug 22, 2007 IP
  5. i_am_dhaval

    i_am_dhaval Well-Known Member

    Messages:
    1,364
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    138
    #5
    still somthing missing.....
     
    i_am_dhaval, Aug 22, 2007 IP
  6. Grumps

    Grumps Peon

    Messages:
    592
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I think IE will have problem with the :hover effect. Its not compatible for anything besides a:hover
     
    Grumps, Aug 22, 2007 IP
  7. i_am_dhaval

    i_am_dhaval Well-Known Member

    Messages:
    1,364
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    138
    #7
    yes I.E. and fire fox giving me different result..

    as well as no propar.

    how can i solve this probs......
     
    i_am_dhaval, Aug 22, 2007 IP
  8. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #8
    soulscratch, Aug 22, 2007 IP
  9. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #9
    That should work.

    Can we see a working page of what you have so far?
     
    twistedspikes, Aug 22, 2007 IP
  10. i_am_dhaval

    i_am_dhaval Well-Known Member

    Messages:
    1,364
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    138
    #10
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>G</title>
    <style type="text/css">
    @import url("css.css");
    </style>
    </head>
    <body>
    <div id="wrapper">
    <ul id="nav">

    <li>
    <a href="#">Clothing</a>
    <li>
    <a href="#">Bedding</a>
    <li>
    <a href="#">Body Products</a>
    <li>
    <a href="#">Books</a>
    <li>
    <a href="#">Toyes</a>
    <li>
    <a href="#">Nappies</a>
    <li>
    <a href="#">Bio Paint</a>
    <li>
    <a href="#">Bathroom</a>
    <li>
    <a href="#">Furniture</a>
    <li>
    <a href="#">Stationary</a>
    <li>
    <a href="#">Bio Cleaners</a>
    <li>
    <a href="#">DVD's</a></li>
    </ul>

    </div>

    </html>


    -css-------


    *{margin:0;padding:0;}
    #wrapper {
    width: 1200px;
    height: 1000px;
    position: relative;
    background-color:#2e1e13;
    }
    ul#nav li { list-style:none; }

    ul#nav li a { display:block; width:100px; height:20px;
    background:url(http://gandhidhaval.googlepages.com/button-blue.gif) no-repeat center left;}

    /* CHANGE the width/height to what you need */

    ul#nav li a:hover { background-image:url(http://gandhidhaval.googlepages.com/Copyof5button.gif); }
     
    i_am_dhaval, Aug 22, 2007 IP
  11. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #11
    The code provided above seems to work fine in both IE6 and Firefox.
     
    GWiz, Aug 24, 2007 IP