SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Non-Member
    Join Date
    Feb 2005
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A little bit of help with a CSS menu

    Hello,

    I have built a really simple menu for my site

    Now when you hover over the links a red stapline appears above it, which is what I want, only thing is though it drops the text down.

    How can I get the red line to appear when you hover over the links, but the text stay in the same position with the line above the text? Anyone kindly help? Thanks

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>Test Menu</title>
     <style>
     #nav {
     font-family: arial;
     font-weight:bold;
     width:940px;
     height:36px;
     font-size: 120%;
     color:#666666;
     list-style-type:none;
     background:#fff;
     padding: 0 20px;
    }
    #nav li {
     float:left;
     width:auto;
     height:16px;
     padding:10px 15px;
    }
    #nav li a {
     display:block;
     color:#666666;
     text-decoration:none;
    }
    #nav li a:hover {
     text-decoration:none;
     color:#CC0000;
     border-top:7px solid #cc0000;
    }
     
     </style>
     </head>
    <body>
    <ul id="nav">
     <li><a href="">Option 1</a></li>
     <li><a href="">Option 2</a></li>
     <li><a href="">Option 3</a></li>
     <li><a href="">Option 4</a></li>
     <li><a href="">Option 5</a></li>
    </ul>
    </body>
    </html>

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    add padding-top:-3px; to #nav li a:hover
    Ryan B | My Blog | Twitter

  3. #3
    Non-Member
    Join Date
    Feb 2005
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers, tried that but not working:

    Code:
    #nav li a:hover {
     text-decoration:none;
     color:#CC0000;
     border-top:7px solid #cc0000;
     padding-top:-3px;
    }

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #nav li a:hover {
    text-decoration:none;
    color:#CC0000;
    border-top:7px solid #cc0000;
    margin-top: -7px;
    }


    or better yet


    #nav li a {
    display:block;
    color:#666666;
    text-decoration:none;
    border-top:7px solid transparent;
    }
    #nav li a:hover {
    text-decoration:none;
    color:#CC0000;
    border-color:#cc0000;
    }

  5. #5
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    sorry my bad margin-top:-7px;. Didn't test it at first
    Ryan B | My Blog | Twitter

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Or a third way

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test Menu</title>
    <style>
    #nav {
        font-family: arial;
        font-weight:bold;
        width:940px;
        height:36px;
        font-size: 120&#37;;
        color:#666666;
        list-style-type:none;
        background:#fff;
        padding: 0 20px;
    }
    #nav li {
        float:left;
        width:auto;
        height:16px;
        padding:3px 15px 10px;
    }
    #nav li a {
        display:block;
        color:#666666;
        text-decoration:none;
        padding-top:7px
    }
    #nav li a:hover {
        text-decoration:none;
        color:#CC0000;
        padding-top:0;
        border-top:7px solid #cc0000;
    }
    </style>
    </head>
    <body>
    <ul id="nav">
        <li><a href="">Option 1</a></li>
        <li><a href="">Option 2</a></li>
        <li><a href="">Option 3</a></li>
        <li><a href="">Option 4</a></li>
        <li><a href="">Option 5</a></li>
    </ul>
    </body>
    </html>

  7. #7
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, ok

    but i believe my second one is more adequate. the border doesn't do any circus tricks appearing and disappearing, the <a> element doesn't push up and down <li>'s insides like an alien baby trying to get borned

    all in all, less calculations upon hover on the box models for the elements in question. a good thing, i say

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post
    ok, ok

    but i believe my second one is more adequate. the border doesn't do any circus tricks appearing and disappearing, the <a> element doesn't push up and down <li>'s insides like an alien baby trying to get borned

    all in all, less calculations upon hover on the box models for the elements in question. a good thing, i say
    Yes, your method was best

    I just offered an alternative as IE6 doesn't do transparent borders and would render the border in the current foreground color which ruins the effect. (You could set it to white but that would not work on a coloured background etc.)

  9. #9
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    didn't accounted for that.

    i hear good news (?) on SP blogs: Google Frame is out. maybe the days to worry about ie6 are over? i surely hope so

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Until companies upgrade I'd say we still have IE6 to worry a bout, many major sites are dropping IE6 support, but until companies get the hint to upgrade, we are SOL
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!


Bookmarks

Posting Permissions

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