Forums

Eraser35

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

apostrophe

I would do it something like this:

<ul id=\"nav\">
<li class=\"home\"><a href=\"home\">Home</a></li>
<li class=\"about\"><a href=\"about\">About</a></li>
<li class=\"contact\"><a href=\"contact\">Contact</a></li>
</ul>

and the css:


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

Eraser35

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.

apostrophe

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.

treehouse : what would you like to learn today?

Forums

Rounded Nav Buttons w/ Selector Icons Issues (Demo)