student101 Posted June 29, 2010 Share Posted June 29, 2010 Every attempt just does not work! How do I get this sprite to work? Is the attached image correct?MENU: <ul id="nav"><li id="nav_home"><a href="index.php">Home</a></li><li id="nav_about"><a href="about.php">About</a></li><li id="nav_gallery"><a href="gallery.php">Gallery</a></li><li id="nav_services"><a href="services.php">Services</a></li><li id="nav_contact"><a href="contact.php">Contact</a></li></ul> CSS: /* Default */#nav {width: 150px;height: 125px;position: relative;background: url(../img/sprite.png);margin: 0;padding: 0;}#nav li {float: left;}#nav li a {position: absolute;top: 0;margin: 0;padding: 0;display: block;height: 25px;background: url(../img/sprite.png) no-repeat;text-indent: -9999px;overflow: hidden;}/*up state*/li#nav_home a {left: 0;width: 150px;background-position: 0 0;}li#nav_about a {top: 25px;width: 150px;background-position: 150px 50px;}li#nav_gallery a {top: 50px;width: 150px;background-position: 150px 100px;}li#nav_services a {top: 75px;width: 150px;background-position: 150px 125px;}li#nav_contact a {top: 125px;width: 150px;background-position: 150px 0;}/*hover state*/li#nav_home a:hover {background-position: 300px 0;}li#nav_about a:hover {background-position: 300px 0;}li#nav_gallery a:hover {background-position: 450px 0;}li#nav_services a:hover {background-position: 435px 0;}li#nav_contact a:hover {background-position: 580px 0;}/*current state*/#body_home li#nav_home a {background-position: 0 -300px;}#body_about li#nav_about a {background-position: -150px -300px;}#body_gallery li#nav_gallery a {background-position: -290px -300px;}#body_services li#nav_services a {background-position: -290px -300px;}#body_contact li#nav_contact a {background-position: -290px -300px;} Link to comment Share on other sites More sharing options...
student101 Posted June 29, 2010 Author Share Posted June 29, 2010 Can't delete post;Solved!Less code, less image AND more thinking!I have absolutely NO CLUE how I coded this! <style type="text/css">img { border: 0px none;} a{ outline: none;}#menu a { width:150px; margin: 0em; padding:0px; font: bold 14px/1 sans-serif; color:#c60; background: url("images/autogen/newsprite.png") 0 0 no-repeat; text-decoration: none; height: auto; text-align: center; display: block;}#menu a:hover { background-position: -304px 0;color: #E9BE75;}#menu a:active {background-position: -304px 0;color:white;}#menu .current {background-position: -456px 0;color:white;}#menu a:hover.current {background-position: -151.5px 0;color:white;}#menu a span { font: normal 14px/24px tahoma, verdana, arial, helvetica, sans-serif; color: #313C29; margin: 0px; padding: 0px;}</style><div id="menu"><a href="home.php"><span>Home</span></a><a href="about.php" class="current"><span>About Us</span></a><a href=""><span>Service</span></a><a href=""><span>Location</span></a><a href=""><span>Contact Us</span></a></div> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.