Sitepoint Rollover Code

Discussion in 'HTML & Website Design' started by bluemanteam, Dec 10, 2007.

  1. #1
    What would be the code required to create the rollover effect seen on the navigation menu bar near the top of the website http://www.sitepoint.com

    I've been able to create basic rollovers, but this one almost looks like a gradient is being used for the for the rollover.

    Thank you
     
    bluemanteam, Dec 10, 2007 IP
  2. eruct

    eruct Well-Known Member

    Messages:
    1,189
    Likes Received:
    49
    Best Answers:
    0
    Trophy Points:
    108
    #2
    They are just using a simple rollover like the one that you are familiar with.
    One image is the solid blue, the other image has the gradients.
     
    eruct, Dec 10, 2007 IP
  3. ListedHosting

    ListedHosting Banned

    Messages:
    606
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    and when the image is rolled over the code feeds into the other image and thats just about it. they are two designs.
     
    ListedHosting, Dec 10, 2007 IP
  4. bluemanteam

    bluemanteam Peon

    Messages:
    169
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thank you.

    Does it look like the roll over image is an inverse image of the original gradient that is used?

    I've been using a premade wordpress theme that has the css already coded for a rollover color. What would be the code if instead of a color code, I used an image rollover?
     
    bluemanteam, Dec 10, 2007 IP
  5. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #5
    If your link is 100 (wide) x 20 (height) in pixels, then this would work out.

    That works in my head.. let me know if you run into problems. You may have to adjust the size.

    notes: overflow:hidden contains layouts in modern browsers, width on #nav triggers hasLayout in MSIE6, display:block is for the anchor only, background image on both li and a to avoid any IE flickers, floated elements sit side by side horizontally.
     
    soulscratch, Dec 10, 2007 IP