Jump to content

CSS Sprite Based Navigation - Error if I change order of links.


Recommended Posts

I have created a css sprite based navigation. The navigation looks fine if I order the navigation items in the same order as they are in the .gif file and the CSS definitions, but if I rearrange them, something strange is happening to the image, and I'm not sure what. Here are three examples: 1. All the LI items in the same order as the .gif and CSS definition. http://www.reneebull...navigation.html (Note the top link "One" is a different color becuase it is stled as "current") Everthing is fine here.2. LI items two and three are rearranged, notice how the image for two and three are distorted somehow. http://www.reneebull...avigation2.html3. LI item two is omitted, so now the images for three, four, five, and six are distorted: http://www.reneebull...avigation3.html Source Code Example 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css"> /* Needed to remove Tab/Indent from Unorderd Navigation List */li {margin: 0px;padding: 0px;}ul {margin: 0px;padding: 0px;}/* Needed to remove Tab/Indent from Unorderd Navigation List */ #mainNav {float: left;width: 160px;background: url(navigation.gif) no-repeat scroll left top;} #mainNav li { list-style: none; }#mainNav li a { width: 160px; display: block; }#mainNav ul li#navOne a, #mainNav ul li#navTwo a, #mainNav ul li#navThree a, #mainNav ul li#navFour a,#mainNav ul li#navFive a, #mainNav ul li#navSix a {background-image: url(navigation.gif) ;background-repeat: no-repeat;padding: 0px;text-indent: -9000px;border-style: none;width: 160px;overflow: hidden;} #mainNav ul li#navOne { background-position: 0px 0px; }#mainNav ul li#navOne a { height: 34px; background-position: 0px 0px }#mainNav ul li#navOne a:hover, #mainNav ul li#navOne a.current { background-position: -160px 0px; }#mainNav ul li#navTwo { background-position: 0px -60px; }#mainNav ul li#navTwo a { height: 34px; background-position: 0px -34px; }#mainNav ul li#navTwo a:hover, #mainNav ul li#navTwo a.current { background-position: -160px -34px; }#mainNav ul li#navThree { background-position: 0px -68px; }#mainNav ul li#navThree a { height: 34px; background-position: 0px -68px; }#mainNav ul li#navThree a:hover, #mainNav ul li#navThree a.current { background-position: -160px -68px; }#mainNav ul li#navFour { background-position: 0px -102px; }#mainNav ul li#navFour a { height: 34px; background-position: 0px -102px; }#mainNav ul li#navFour a:hover, #mainNav ul li#navFour a.current { background-position: -160px -102px; }#mainNav ul li#navFive { background-position: 0px -136px; }#mainNav ul li#navFive a { height: 34px; background-position: 0px -136px; }#mainNav ul li#navFive a:hover, #mainNav ul li#navFive a.current { background-position: -160px -136px; }#mainNav ul li#navSix { background-position: 0px -170px; }#mainNav ul li#navSix a { height: 34px; background-position: 0px -170px; }#mainNav ul li#navSix a:hover, #mainNav ul li#navSix a.current { background-position: -160px -170px; } </style></head><body><DIV id="mainNav"><UL>  <LI id=navOne><A class="current" href="#">One</A></LI>  <LI id=navTwo><A class="" href="#">Two</A></LI>  <LI id=navThree><A class="" href="#">Three</A></LI>  <LI id=navFour><A class="" href="#">Four</A></LI>  <LI id=navFive><A class="" href="#">Five</A></LI>  <LI id=navSix><A class="" href="#">Six</A></LI></UL></DIV></body></html> 

Source Code Example 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css"> /* Needed to remove Tab/Indent from Unorderd Navigation List */li {margin: 0px;padding: 0px;}ul {margin: 0px;padding: 0px;}/* Needed to remove Tab/Indent from Unorderd Navigation List */ #mainNav {float: left;width: 160px;background: url(navigation.gif) no-repeat scroll left top;} #mainNav li { list-style: none; }#mainNav li a { width: 160px; display: block; }#mainNav ul li#navOne a, #mainNav ul li#navTwo a, #mainNav ul li#navThree a, #mainNav ul li#navFour a,#mainNav ul li#navFive a, #mainNav ul li#navSix a {background-image: url(navigation.gif) ;background-repeat: no-repeat;padding: 0px;text-indent: -9000px;border-style: none;width: 160px;overflow: hidden;} #mainNav ul li#navOne { background-position: 0px 0px; }#mainNav ul li#navOne a { height: 34px; background-position: 0px 0px }#mainNav ul li#navOne a:hover, #mainNav ul li#navOne a.current { background-position: -160px 0px; }#mainNav ul li#navTwo { background-position: 0px -60px; }#mainNav ul li#navTwo a { height: 34px; background-position: 0px -34px; }#mainNav ul li#navTwo a:hover, #mainNav ul li#navTwo a.current { background-position: -160px -34px; }#mainNav ul li#navThree { background-position: 0px -68px; }#mainNav ul li#navThree a { height: 34px; background-position: 0px -68px; }#mainNav ul li#navThree a:hover, #mainNav ul li#navThree a.current { background-position: -160px -68px; }#mainNav ul li#navFour { background-position: 0px -102px; }#mainNav ul li#navFour a { height: 34px; background-position: 0px -102px; }#mainNav ul li#navFour a:hover, #mainNav ul li#navFour a.current { background-position: -160px -102px; }#mainNav ul li#navFive { background-position: 0px -136px; }#mainNav ul li#navFive a { height: 34px; background-position: 0px -136px; }#mainNav ul li#navFive a:hover, #mainNav ul li#navFive a.current { background-position: -160px -136px; }#mainNav ul li#navSix { background-position: 0px -170px; }#mainNav ul li#navSix a { height: 34px; background-position: 0px -170px; }#mainNav ul li#navSix a:hover, #mainNav ul li#navSix a.current { background-position: -160px -170px; } </style></head><body><DIV id="mainNav"><UL>  <LI id=navOne><A class="current" href="#">One</A></LI>  <!-- LI id=navTwo and Three are switched -->  <LI id=navThree><A class="" href="#">Two</A></LI>  <LI id=navTwo><A class="" href="#">Three</A></LI>  <LI id=navFour><A class="" href="#">Four</A></LI>  <LI id=navFive><A class="" href="#">Five</A></LI>  <LI id=navSix><A class="" href="#">Six</A></LI></UL></DIV></body></html>

Source Code Example 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css"> /* Needed to remove Tab/Indent from Unorderd Navigation List */li {margin: 0px;padding: 0px;}ul {margin: 0px;padding: 0px;}/* Needed to remove Tab/Indent from Unorderd Navigation List */ #mainNav {float: left;width: 160px;background: url(navigation.gif) no-repeat scroll left top;} #mainNav li { list-style: none; }#mainNav li a { width: 160px; display: block; }#mainNav ul li#navOne a, #mainNav ul li#navTwo a, #mainNav ul li#navThree a, #mainNav ul li#navFour a,#mainNav ul li#navFive a, #mainNav ul li#navSix a {background-image: url(navigation.gif) ;background-repeat: no-repeat;padding: 0px;text-indent: -9000px;border-style: none;width: 160px;overflow: hidden;} #mainNav ul li#navOne { background-position: 0px 0px; }#mainNav ul li#navOne a { height: 34px; background-position: 0px 0px }#mainNav ul li#navOne a:hover, #mainNav ul li#navOne a.current { background-position: -160px 0px; }#mainNav ul li#navTwo { background-position: 0px -60px; }#mainNav ul li#navTwo a { height: 34px; background-position: 0px -34px; }#mainNav ul li#navTwo a:hover, #mainNav ul li#navTwo a.current { background-position: -160px -34px; }#mainNav ul li#navThree { background-position: 0px -68px; }#mainNav ul li#navThree a { height: 34px; background-position: 0px -68px; }#mainNav ul li#navThree a:hover, #mainNav ul li#navThree a.current { background-position: -160px -68px; }#mainNav ul li#navFour { background-position: 0px -102px; }#mainNav ul li#navFour a { height: 34px; background-position: 0px -102px; }#mainNav ul li#navFour a:hover, #mainNav ul li#navFour a.current { background-position: -160px -102px; }#mainNav ul li#navFive { background-position: 0px -136px; }#mainNav ul li#navFive a { height: 34px; background-position: 0px -136px; }#mainNav ul li#navFive a:hover, #mainNav ul li#navFive a.current { background-position: -160px -136px; }#mainNav ul li#navSix { background-position: 0px -170px; }#mainNav ul li#navSix a { height: 34px; background-position: 0px -170px; }#mainNav ul li#navSix a:hover, #mainNav ul li#navSix a.current { background-position: -160px -170px; } </style></head><body><DIV id="mainNav"><UL>  <LI id=navOne><A class="current" href="#">One</A></LI>  <!-- LI id=navTwo is removed -->  <LI id=navThree><A class="" href="#">Three</A></LI>  <LI id=navFour><A class="" href="#">Four</A></LI>  <LI id=navFive><A class="" href="#">Five</A></LI>  <LI id=navSix><A class="" href="#">Six</A></LI></UL></DIV></body></html>

Edited by gibbs
Link to post
Share on other sites

This anwer posted on an Adobe Forum works. Try this instead of what you have now. I changed UPPER CASE tags to lowers case & applied IDs to anchors instead of lists. Now if you switch order or remove an item in the list, it won't break the menu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
">
<html xmlns="
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sprite Test</title>
<style type="text/css">
#mainNav {
float: left;
width: 160px;
}
#mainNav ul li { list-style: none; margin:0; padding:0 }
/**style for all anchors**/
#mainNav li a {
width: 160px;
display: block;
background: url(
) no-repeat;
text-indent: -9999em;
line-height: 34px }
#mainNav li a#navOne {background-position: 0px 0px; }
#mainNav li a#navOne.current {background-position: -160px 0px; }
#mainNav li a#navTwo { background-position: 0px -60px; }
#mainNav li a#navTwo { background-position: 0px -34px; }
#mainNav li a#navTwo:hover,
#mainNav li a#navTwo.current { background-position: -160px -34px; }
#mainNav li a#navThree { background-position: 0px -68px; }
#mainNav li a#navThree { background-position: 0px -68px; }
#mainNav li a#navThree:hover,
#mainNav li a#navThree.current { background-position: -160px -68px; }
#mainNav li a#navFour { background-position: 0px -102px; }
#mainNav li a#navFour { background-position: 0px -102px; }
#mainNav li a#navFour:hover,
#mainNav li a#navFour.current { background-position: -160px -102px; }
#mainNav li a#navFive { background-position: 0px -136px; }
#mainNav li a#navFive { background-position: 0px -136px; }
#mainNav li a#navFive:hover,
#mainNav li a#navFive.current { background-position: -160px -136px; }
#mainNav li a#navSix { background-position: 0px -170px; }
#mainNav li a#navSix {34px; background-position: 0px -170px; }
#mainNav li a#navSix:hover,
#mainNav li a#navSix.current { background-position: -160px -170px; }
<!-- end mainNav-->
</style>
</head>
<body>
<div id="mainNav">
<ul>
<li><a id="navOne" class="current" href="#">One</a></li>
<li><a id="navTwo" href="#">Two</a></li>
<li><a id="navThree" href="#">Three</a></li>
<li><a id="navFour" href="#">Four</a></li>
<li><a id="navFive" href="#">Five</a></li>
<li><a id="navSix" href="#">Six</a></li>
</ul>
</div>
</body>
</html>

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...