Designing a CSS Sprite navigation bar -- Part 2

[prepre73]

hello i know this is not exactly what you have here but i have simple unordered list with a background gradient and was wondering if you know away of having one background gradient for the whole list and not one for each individual list item. currently each list item has its own gradient background and a space between each items hope that makes sense thanks.

[Mr68Ibo]

please could you tell me the size of the nav bar???

[j0m8s]

Good tutorial - though is float actually needed if you're using inline? I thought float would only be beneficial if you want equal width buttons?

[Dave311Freak]

Fantastic tutorial. Made navigation design soooooo much easier for me!!! You guys are awesome.

[AMR0DYS]

Really Helpful Tutorial.

Thanks a lot lot

[andrewme404]

can you do a video on editing out people in videos with no talking parts? That would be cool you could then play it alongside this one to freshen it up ;)

Clearly presented tutorial

[SoniStreet]

Great tutorial, thanks a bunch

[11thbao]

Thank you so much! This made my technology assignment about CSS look awsome, and so easy to navigate around with a professional look! ^^ AWESOME!

[Erwinroossien]

nice got it working but whats the best way to make one tab active

[vegametal01]

This does not work for IE not even on firefox... only works on Dreamweaver live view. Try better next time guys... I think real web designer care about compability. Even tho... it's pretty easy to fix from there... just a few changes:

#home a:hover {background-position:bottom left;}

#aboutus a:hover {background-position: -164px bottom;}

#products a:hover {background-position: -351px bottom;}

#gallery a:hover {background-position: -554px bottom;}

Same thing for last one sorry no characters left

[vegametal01]

@vegametal01

Also remember to use YOUR meassurements not mine... and that "nav-home" thing I simple use home,aboutus,products... as you can see. 

[crearegroup]

@vegametal01 Hey Vegametal0 - indeed you are correct, when I filmed the tutorial, some code is slightly wrong for cross-browser compatibility, as per my previous comment to MrNuun. Simply go to the supporting blog post in the video description for the improved, cross-platform code. James.

[bastiat666]

Thank You!

That was fantastically excellent!

[iDusten]

Very helpful! However i typed in everything correctly yet for some reason it will not display my navigation bar picture? Any idea's what i did wrong?

[MrNuun]

Cool :D but i've got 1 problem. In the Live view in Dreamweaver and in Safari it displays it properly. But in Firefox and IE it displays wrong. In Firefox and IE it shows the Home Icon throughout the whole bar when I hover over the buttons. Help?

[crearegroup]

@MrNuun

MrNuun, sorry about that, A little embarassing, but the code in the video is very slightly wrong in the sense that I didn't check its' compatibility with IE, click on the video discription above, and click through to our supporting blog post where you can copy and paste the correct text needed for our method to work on IE etc.

[MrNuun]

@crearegroup Okay, Thanks for the reply. I'll finish it off now. Thanks a lot!

[medwsc]

great stuff - like the accessibility and modern styling combined, well executed, thanks! Please do more tutorials like these for creating modern web sites :)

[edv11nas]

awesome ;)

[soundscapenyc]

A+++