- This topic is empty.
-
AuthorPosts
-
May 23, 2009 at 3:38 am #24930Eraser35Member
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 #58016apostropheParticipantI 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 #58024Eraser35MemberThanks 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 #58050apostropheParticipantTbh 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. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.