In this week’s web design video blog we will be completing our 2-part tutorial on how to create a CSS Sprite Navigation Bar. Last week we prepared the Sprite and the HTML list, so all we need to do now to complete the navigation, is to write the CSS.
The HTML
In part two of the video tutorial, we modify the HTML List slightly by adding IDs to the various elements of the list. Toward the end of the video we then wrap the text in span tags to hide the real HTML text from the browser.
<ul id="navigation"> <li id="nav-home"><a href="#"><span>Home</span></a></li> <li id="nav-about"><a href="#"><span>About</span></a></li> <li id="nav-gallery"><a href="#"><span>Gallery</span></a></li> <li id="nav-contact"><a href="#"><span>Contact</span></a></li> </ul>
The CSS
Whilst the CSS Sprite effect we create can be acheived in many different ways, below you will find the CSS that we have used and recommend for creating the navigation. This CSS is both short and works across all the major browsers.
#navigation { margin:0; padding:0; width:378px; height:44px; background-image:url(navigation-background.gif); }
#navigation li { margin:0; padding:0; list-style-type:none; display:inline; height:44px; text-align:center; float:left; line-height:40px; }
#navigation a { display:block; height:44px; }
#navigation a:hover { background-image:url(navigation-background.gif); }
#nav-home {width:95px; }
#nav-home a:hover { background-position:0px bottom; }
#nav-about { width:94px; }
#nav-about a:hover { background-position:-95px bottom ; }
#nav-gallery { width:93px; }
#nav-gallery a:hover { background-position:-189px bottom ; }
#nav-contact { width:96px; }
#nav-contact a:hover { background-position:-282px bottom; }
#navigation span { display:none; }
Thank you for watching this week, if you have any comments or contributions, please leave them on our supporting blog post at crearedesign.co.uk/blog/videos
This is probably the best tutorial yet! I really have learnt a lot from this tutorial. The only thing I did do was add CSS coding for the “a:active” state, because I had that state in the CSS sprite image. It works really effectively. Thanks guys.
There are a handful of CSS sprite navigation tutorials on the Internet, but this is the most well written and clear out of them all. Thanks for this, as I learned a lot from it!
hi this is brilliant but how do i position the navbar where ever i wanted like in the center on the right and left side of the page?
Awesome work guys, really enjoyed watching these tuts. I use linux so it’s fun trying to work them out using GIMP and Bluefish but it’s relatively easy!
@Alfie, have a read of this: http://www.w3schools.com/css/css_positioning.asp
Should help you out a great deal
I really like this tut because its clear and explains exactly what I need but I’ve tried it with a few different designs and every time I get it all finished up the hover state moves up. Just curious as to why it doesn’t stay in the same place. I’m using Dreamweaver CS5.
If you could help that would be great
hi thanx alot for the tutorial it helped me alot, although i have come across a slight problem, when i use the span tags to not displaying the actual links, the hover feature stops working. can u tell me as to why this is happening, and what i can do to get my navigation bar working just as normal like in the video !
Hello James how are you? I do my job like you adding the CSS and the HTML but when i saved it and after i openn it i see noting can you send the HTML and CSS in a folder in zip file for XP and MAC please i need the navigation bar for my anti-source website…..! pls pls? Hey James can you help me how i edit my anti-source company page in facebook pages pls pls i need likes and i also add you as friend in facebook pls acsept me
Hey James can you help me how i edit my anti-source company page in facebook pages pls pls i need likes and i also add you as friend in facebook pls acsept me
How can I add drop down menus to this, is it possible?
I agree with everyone else. Phenomenal. I’ve been scouring the internet and looking at source codes and CSS docs for days now, scratching my head.
You’re a life saver!
Thank you very much! That was very helpful!!!