Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Rounded Nav Buttons w/ Selector Icons Issues (Demo)

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #24930
    Eraser35
    Member

    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;
    }

    #58016
    apostrophe
    Participant

    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;
    }

    #58024
    Eraser35
    Member

    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.

    #58050
    apostrophe
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.