I'm rather new to design a site in full CSS.
I have some CSS code for a navigation bar. It works fine and everything, but I would like to see if there is a way of modifying it a little.
The CSS is using ONE graphic that has 3 button states in it.........this is all for one link. So the button states are "on, out, hover".
They use a technique to basically change the vertical position for that ONE graphic as background graphic, so it shows different button states.
Now, It's royal pain(for me anyway) to make ONE graphic with 3 equally sized buttons stacked vertically and make them fit exactly. I much rather PREFER to make 3 single graphics for each state instead of doing ONE graphic.
So I wonder if someone could check out this code for the ONE graphic per link solution and let me know if there is a way of doing the same stuff but using 3 graphics instead.
It does work if I only have "off" and "hover" states by using two graphics. But I don't know how to implement the code to CSS to use the "on" state.
The "on" state is set on each page in the body code like this <body class="about">......etc.
Here is the current CSS code for the ONE graphic solution
HTML Code:/* Main Navigation */ /* This sets the main-nav div height to 50px, and strips all margins from the datalist. */ #main-nav { height: 65px; } #main-nav dl { margin: 0; padding: 0; } /* IE5 Mac Hack \*/ #main-nav { padding-left: 80px; padding-top:60px; } /*/ #main-nav { padding-left: 11px; overflow: hidden; } /* End Hack */ /* This sets the definition titles (our individual nav item containers) to float left, which stacks them left to right, instead of one under the other. */ #main-nav dt { float: left; } /* Sets the link to the same dimensions as its surrounding container, and hides the text using the overflow property. */ #main-nav dt a { display: block; height: 0px !important; height /**/:65px; /* IE 5/Win hack */ padding: 65px 0 0 0; overflow: hidden; background-repeat: no-repeat; } /* Sets the background position to move up 50px when a link is hovered. */ #main-nav dt a:hover { background-position: 0 -60px; } /* Sets the individual widths of each nav item, and the paths to each image. Now if all your images are named as they are above, and are saved in the correct place, your navigation should work. Last thing we need to do to make the navigation work, is to get the selected button states to show up when you are on the corresponding page. */ #main-nav dt#about, #main-nav dt#about a { width: 70px; background-image: url(images/button_about.png); } #main-nav dt#services, #main-nav dt#services a { width: 70px; background-image: url(images/button_service.png); } #main-nav dt#portfolio, #main-nav dt#portfolio a { width: 95px; background-image: url(images/nav_portfolio.gif); } #main-nav dt#contact, #main-nav dt#contact a { width: 106px; background-image: url(images/nav_contact.gif); } body.about dt#about, body.about dt#about a, body.services dt#services, body.services dt#services a, body.portfolio dt#portfolio, body.portfolio dt#portfolio a, body.contact dt#contact, body.contact dt#contact a { background-position: 0 -126px; }
Bookmarks