Grow your CSS skills. Land your dream job.

Rounded Nav Buttons w/ Selector Icons Issues (Demo)

  • # May 23, 2009 at 3:38 am

    I am having two problems:

    Demo: https://dl.getdropbox.com/u/9191/website/index.html <– For those new to this post, the nav has been updated to solve the problems listed below…

    Issue 1. When you rollover the nav buttons, I would like for the respective nav icons to display within the rounded yellow button.

    Issue 2. As you can see when you rollover the nav buttons, the buttons jump to the left. How do I eliminate this?

    Code:

    HTML

    <html>
    <head>
    <title>Website</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
    <div>
    <ul>
    <li><a class="nav" href="home">Home</a></li>
    <li><a class="nav" href="about">About</a></li>
    <li><a class="nav" href="contact">Contact</a></li>
    </ul>
    </div>
    </body>
    </html>

    CSS

    body {
    background: url(header.gif) repeat-x scroll 0 0;
    }

    li {
    display: inline;
    }

    .nav {
    padding-left: 20px;
    }

    a[href="home"]{background: transparent url(home.png) 0 50% no-repeat;}
    a[href="about"]{background: transparent url(about.png) 0 50% no-repeat;}
    a[href="contact"]{background: transparent url(contact.png) 0 50% no-repeat;}

    .nav:link, .nav:visited, .nav:active {
    text-decoration: none;
    color: #134270;
    margin: 5px;
    }

    .nav:hover, .nav:focus {
    color: #4377d0;
    text-decoration: none;
    background-color: #FFFFCC;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    padding: 5px;
    }

    # May 23, 2009 at 4:53 am

    I would do it something like this:

    and the css:

    Code:
    ul#nav li {
    float: left;
    display inline;
    list-style:none;
    margin: 0 5px;
    }

    ul#nav li a {
    color:#134270;
    paddingt: 5px 5px 5px 20px;
    text-decoration:none;
    }

    ul#nav li.home a {
    background: url(home.png) no-repeat 0 50%;
    }

    ul#nav li.about a {
    background: url(about.png) no-repeat 0 50%;
    }

    ul#nav li.contact a {
    background: url(contact.png) no-repeat 0 50%;
    }

    ul#nav li a:hover {
    background-color: #FFFFCC;
    color: #4377d0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    }

    # May 23, 2009 at 10:29 am

    Thanks apostrophe. I got it working. Check out the demo if you’d like.

    Demo: https://dl.getdropbox.com/u/9191/website/index.html

    One more question concerning this. How can I add some space to the left of each icon so that they can breathe? Right now the icons are crammed up against the wall of the yellow button on rollover.

    # May 23, 2009 at 11:51 am

    Tbh the only simple solution I can see is to take your images back into photoshop and give each one an extra 5 pixels of transparancy on the left side.
    That or forget your rounded corners and use sprites instead.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".