Solved

Simplify CSS Image Sprite

Posted on 2010-11-11
5
431 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:Diverse IT
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 34110980
When it comes to sprites it looks like you have everything the way it needs to be.  Your only calling your background image once and only setting your background position against hovers.  

Overall it looks good
0
 
LVL 25

Author Comment

by:Diverse IT
ID: 34111067
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!
0
 
LVL 30

Expert Comment

by:LZ1
ID: 34111956
  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.
0
 
LVL 25

Author Comment

by:Diverse IT
ID: 34112002
Great! Well, thank you for your input and time!. Much appreciated.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 34112009
Not a problem.  That's what we're here for.
0

Featured Post

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS - Centering an image 2 28
CSS for <center> 14 35
CSS question 4 28
form isn't working is it missing a document 21 30
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remaiā€¦
The viewer will learn how to dynamically set the form action using jQuery.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question