Menu bar, text hover = ok, bgcolor = wrong

Discussion in 'CSS' started by Lommis, Aug 8, 2007.

  1. #1
    Hi, sorry for the (maybe) confusing title!
    I'm trying to get a menu like this: http://www.lommis.net/menu1.jpg
    I think I'm very close, but this is what I got right now: http://www.lommis.net/menu2.jpg

    As you can see the text is correct (black when hovering) but the background (table cell) is in the wrong color.

    My CSS code right now is:
    <style type="text/css">
    a:link       { color: #3988C1; text-decoration: none }
    a:visited   { color: #3988C1; text-decoration: none }
    a:active   { color: #454445; text-decoration: none }
    a:hover    { color: #000000; text-decoration: none }
    </style>
    Code (markup):
    HTML code for the menu:
    <table cellpadding="2" cellspacing="2" width="100%">
        <tr bgcolor="#BFE0F3">
        <th bgcolor="#96D1F3"><a href="?page=games">JAVASPILL</a></th>
        <th bgcolor="#96D1F3"><a href="?page=ringtones">RINGETONER</a></th>
        <th bgcolor="#96D1F3"><a href="?page=animations">ANIMASJONER</a></th>
        <th bgcolor="#96D1F3"><a href="?page=wallpapers">BILDER</a></th>
        <th bgcolor="#96D1F3"><a href="?page=videos">VIDEO</a></th>
        <th bgcolor="#96D1F3"><a href="?page=funtones">FUNTONES</a></th>
        <th bgcolor="#96D1F3"><a href="?page=support">SUPPORT</a></th>
        </tr>
    </table>
    Code (markup):
    Thanks in advance for any help! :)
     
    Lommis, Aug 8, 2007 IP
  2. ennio

    ennio Peon

    Messages:
    60
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    <table cellpadding="2" cellspacing="2" width="100%">
    <tr>
    <th><a href="?page=games">JAVASPILL</a></th>
    <th><a href="?page=ringtones">RINGETONER</a></th>
    <th><a href="?page=animations">ANIMASJONER</a></th>
    <th><a href="?page=wallpapers">BILDER</a></th>
    <th><a href="?page=videos">VIDEO</a></th>
    <th><a href="?page=funtones">FUNTONES</a></th>
    <th><a href="?page=support">SUPPORT</a></th>
    </tr>
    </table>


    <style type="text/css">
    a { color: #3988C1; text-decoration: none; }
    a:hover { background-color: #COLOR; }
    </style>

    replace "COLOR"

    P.S. menu have to be in <ul> <li>
     
    ennio, Aug 8, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    *sniff* That was beautiful, ennio.

    Instead of telling every little section of your table what colour it must be, let CSS do the work for you and tell the whole table what colour it must be.
     
    Stomme poes, Aug 8, 2007 IP
  4. Lommis

    Lommis Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thank you so much ! :D
     
    Lommis, Aug 9, 2007 IP