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

gibbs · May 15, 2012

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 May 15, 2012 by gibbs

gibbs · May 19, 2012

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" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

">

<html xmlns="

http://www.w3.org/1999/xhtml

">

<head>

<title>Sprite Test</title>

#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(

http://www.reneebuller.com/_temp/navigation.gif

) 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:hover,

#mainNav li a#navThree.current { background-position: -160px -68px; }

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

</style>

</head>

<body>

<ul>

<li><a id="navThree" href="#">Three</a></li>

</ul>

</div>

</body>

</html>

Sign In

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

Recommended Posts

gibbs

Link to comment

Share on other sites

gibbs

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity