Avatar of Blue Street Tech
Blue Street TechFlag for United States of America asked on

Simplify CSS Image Sprite

I was not sure if i had to do it this way or not and need expert advice.

Typically, i am use to doing sprites when each image has the same dimensions. However, each image in the nav is not the same size. So i achieved it with the code below (header HTML & CSS).

I wanted to know if i have redundancies and if there was a shorter, more concise way to do this. Thanks!
#header-nav{
	float:left; /*left*/
	margin-top:60px;
	width:705px;
}
ul#header-nav{
	margin-left:10px;		
}
ul#header-nav #nav-press{
	margin-left:20px;		
}
#header-nav li{
	display:block;
	float:left;
	margin-left:10px;
}
#header-nav li a{
	display:block;
	height:30px;
	text-indent:-9999px;
	width:85px;
}
#nav-about,
#nav-runway,
#nav-press,
#nav-social,
#nav-music,
#nav-stockist,
#nav-contact-us{
	background:url(/assets/images/nav/header-nav.gif) no-repeat 0 0;
	display:block;
	float:left;
	height:30px;
	width:85px;
}
#nav-about:hover{
	background-position:0px -30px; /*h v*/
}
#nav-runway:hover{
	background-position:-85px -30px;
}
#nav-press:hover{
	background-position:-170px -30px;
}
#nav-social:hover{
	background-position:-255px -30px;
}
#nav-music:hover{
	background-position:-340px -30px;
}
#nav-stockist:hover{
	background-position:-425px -30px;
}
#nav-contact-us:hover{
	background-position:-510px -30px;
}
#nav-about{
	background-position:0px 0px; /*h v*/
}
#nav-runway{
	background-position:-85px 0px;
}
#nav-press{
	background-position:-170px 0px;
}
#nav-social{
	background-position:-255px 0px;
}
#nav-music{
	background-position:-340px 0px;
}
#nav-stockist{
	background-position:-425px 0px;
}
#nav-contact-us{
	background-position:-510px 0px;
}
#nav-about span, 
#nav-runway span,
#nav-press span,
#nav-social span,
#nav-music span,
#nav-stockist span,
#nav-contact-us span{
	display:none;
}

Open in new window

<!-- Start: header-wrapper -->
<div id="header-wrapper" class="clearfix">
<!-- Start: header-logo -->
	<div id="header-logo">
		<a title="<%Page.Info%>" href="/"><img src="images/layout/site_logo.gif" alt="<%Company.Info%>" width="150" height="99" /></a>
  </div><!-- End: header-logo -->

<!-- Start: header-nav -->
	<ul id="header-nav">
    	<li id="nav-about"><a href="about-us.aspx" title="About"><span>About</span></a></li>
		<li id="nav-runway"><a href="runway.aspx" title="Runway"><span>Runway</span></a></li>
		<li id="nav-press"><a href="press.aspx" title="Press"><span>Press</span></a></li>
		<li id="nav-social"><a href="social.aspx" title="Social"><span>Social</span></a></li>
		<li id="nav-music"><a href="music.aspx" title="Music"><span>Music</span></a></li>
		<li id="nav-stockist"><a href="stockist.aspx" title="Stockist"><span>Stockist</span></a></li>
		<li id="nav-contact-us"><a href="contact-us.aspx" title="Contact Us"><span>Contact Us</span></a></li>
</ul><!-- End: header-nav -->

	<div id="header-search"><!-- Start: header-search -->
		<ss:search customtext="Search" type="custom" text="Search" />
	</div><!-- End: header-search -->

	<div id="header-cart-links"><!-- Start: header-cart-links -->
        <a href="shopping-lists.aspx">Wish List</a>  <a href="cart.aspx">Shopping Cart (<%Cart.Count%>)</a><br />
		<ss:choose>
			<ss:when condition="User.IsLoggedIn == false">
            	<a href="login.aspx" class="sign-in">Login</a>
            </ss:when>
          	<ss:otherwise>
				<a href="account.aspx">Welcome <%User.FirstName%></a> <a href="login.aspx?logout">Logout</a>
			</ss:otherwise>
		</ss:choose>
	</div><!-- End: header-cart-links -->
</div><!-- End: header-wrapper -->

Open in new window

CSSHTMLWeb Development

Avatar of undefined
Last Comment
LZ1

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
LZ1

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Blue Street Tech

Ok. Thanks. Sprites are awesome! I'm not sure if it is because i haven't slept in 72 hrs... but i don't know if these 4 calls have redendency...
  1. In group A do i need to have dispay on group B as well?
  2. In group B - do i need to keep all in bold, they seem duplicitive with A and D (display:none)
    1. Doesn't text-indent:-9999px do the same thing as group D?
  3. It seems a lot of the tutorials on sprites that i have seen don't use the postion att. and the position att. for hover. I have only seen them use it for hover.
  4. Do i need all these dispay:block?
/*GROUP A*/
#header-nav li{  
        display:block;  
        float:left;  
        margin-left:10px;  
}  

/*GROUP B*/
#header-nav li a{  
        display:block;  
       height:30px;  
       text-indent:-9999px;  
        width:85px;  
}

/*GROUP C*/
#nav-about,  
#nav-runway,  
#nav-press,  
#nav-social,  
#nav-music,  
#nav-stockist,  
#nav-contact-us{  
        background:url(/assets/images/nav/header-nav.gif) no-repeat 0 0;  
        display:block;  
        float:left;  
        height:30px;  
        width:85px;  

/*GROUP D*/
#nav-about span,  
#nav-runway span,  
#nav-press span,  
#nav-social span,  
#nav-music span,  
#nav-stockist span,  
#nav-contact-us span{  
        display:none;  
}
Thanks!
LZ1

  1. In group A do i need to have display on group B as well?
     - Yes, because Group A is specifying the container of the <a> tag and Group B is the <a> tag.
  2. In group B - do i need to keep all in bold, they seem duplicitive with A and D (display:none) - Theoretically you could remove the text-indent from Group B, but again your specifying a completely different element.  
  3. Doesn't text-indent:-9999px do the same thing as group D?  - Again, different elements
  4. It  seems a lot of the tutorials on sprites that i have seen don't use the  postion att. and the position att. for hover. I have only seen them use  it for hover.  - Not sure what you mean here.  If your talking about your background position, then you do have it correct.  I wouldn't have done it any other way.
  5. Do i need all these dispay:block? -  Yes, because the li's are inline elements and if you do not specify display:block, then you'll have trouble with your linking and more than likely layout of the nav.  
If you had a working page or a live link, I could tell you a lot more.  Like I said though, everything seems to be in order with no major duplication or useless code.
ASKER
Blue Street Tech

Great! Well, thank you for your input and time!. Much appreciated.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
LZ1

Not a problem.  That's what we're here for.