Extra Credit: Stage 2 Creating the Menu and Footer

The menu images are being created using a concept called sprites. There are plenty of pages online that can explain it a lot better than me, but here's the basic idea of what's going on. Imagine that you are standing in front of a wall that has a 1 inch by 1 inch window in it. You can see through that window to the other side, but you can't see through the rest of the wall. Now imagine someone is standing on the other side of the wall and has a big sheet of paper with a bunch of different 1 inch by 1 inch pictures on it, which he is holding up to the window. As the other guy moves the sheet of paper around behind the wall, the picture that you see through the window changes, right? That's what's going on with CSS sprites. The location on the screen where your menu item is positioned correspond to the window in the wall in the above example. Setting the background-position property is what's causing the proper image from the big list of images to be positioned in front of the window. Does that make sense? The reason it's done like this is because it's more efficient for the browser to request a single larger image file than a bunch of smaller image files.

To get the correct image to display in your menu, you need to figure out where your company_info image appears in the overall sprite image. If, for example, your company_info image were 400 pixels down from the top of the sprite, then you would want this

.header .nav .li.company_info a {background-position: 0px -400px;}

That CSS style says to go 0 pixels to the right and 400 pixels down in the main sprite, and treat that location as the start of the image (so drawing begins from there). Another one of the styles in the CSS

.header .nav li a {
    color: white;
    text-decoration: none;
    display: block;
    line-height: 95px;
    padding: 10px 0 0;
    margin: 0 0 0 40px;
    width: 90px;
    text-align: right;
    background: url('../img/nav-sprite.png') no-repeat 0px 105px;
    text-transform: uppercase;
    white-space: nowrap; 
}

causes the image for each link to be 100 pixels wide 105 pixels tall (once you account for the padding), so the browser will draw a 100x105 pixel chunk from your main sprite, starting at the background position that you assigned.

It sounds like you're on the right track to add your new image. Did you add another CSS class for your new image's <li> tag within the menu, and did you assign that class's background-position property in style.css?

Try clearing your browser's cache for that page. Control+F5 should clear the page's cache and reload the page. If that doesn't fix the issue, post the line you added to style.css and the line you added to header.php

Gah! Just deleted my super in depth response to you on accident! Basically I actually edited the image file they provided and added my icon to it. With the help of your ctrl +F5 i was able to see it, but I had put mine over a nearly invisible cart icon that lets the cart appear highlighted with hovered over. Therefore, I'm assuming if I extended the length of the image I could make things work...BUT...my brain is not able to wrap around how they are getting a vertical image of icons to display horizontally and in perfect alignment with their words.

I know it has something to do with the background-position that they have set for each nav li class but since my mind doesn't get it, I have no idea where to start with my newly elongated image.

I added the 4th line in this snippet from the header.php file for my "company_info"

<ul class="nav">
     <li class="shirts <?php if ($section =="shirts") {echo "on";} ?>"><a href="shirts.php">Shirts</a></li>
     <li class="contact <?php if ($section =="contact") {echo "on";} ?>"><a href="contact.php">Contact</a></li>
     <li class="company_info <?php if ($section =="company_info") {echo "on";} ?>"><a href="company_info.php">Company Info</a></li>
     <li class="cart"><a href="#">Shopping Cart</a></li>
</ul>

I'm assuming I need to mess around with these in the CSS stylesheets, but I don't understand the how the background positioning works to do it.

.header .nav li.shirts a {background-position: 0px 0px;}
.header .nav li.contact a {background-position: 0px -105px;}
.header .nav li.company_info a {background-position: ????;}
.header .nav li.cart a {
    width: 122px;
    font-size: 0/95px serif;
    text-shadow: none;
    color: transparent;
    background-position: 16px -216px;
    margin: 0;
}

Thanks again for your help. If it makes more sense just to add another file instead of combining, how would I do that because it would sit on top of the other background image, right?

ooh sorry, markup for css didn't show up well...

.header .nav li.shirts a {background-position: 0px 0px;}
.header .nav li.contact a {background-position: 0px -105px;}
.header .nav li.company_info a {background-position: ????;}
.header .nav li.cart a {
    width: 122px;
    font-size: 0/95px serif;
    text-shadow: none;
    color: transparent;
    background-position: 16px -216px;
    margin: 0;
}

Wow so helpful! Thank you very much! I really appreciate you taking the time. Yeah I definitely didn't know this concept and would have spent COUNTLESS hours doing trial and error.

How did you edit the sprites to include your image? What program did you view it with? I have it open in preview and can't find an option to edit it.

You don't need to edit the images. The idea of using sprites is move your main image around so that the correct part of it displays.

For this extra credit we need to create an icon that will go behind the "Company Info" link. I assume that icon needs to be added to the sprite file so that it can be displayed since there isn't already an extra image on the sprite file. Before this I tried to just use an image separate from the Sprite file but it didn't show up.

Thanks Ben, I'm downloading GIMP now. Then I'll edit the file with my new icon, work out the location of the new icon, and add the css.