Image and Text Dual Navbar

[Dirty Dan]

Hey guys! I'm a HTML and CSS newbie and figured that joining this site would be the logical thing to do if I run into a un-google'able predicament!

Anywho, I designed a navbar in Photoshop, it is 960 pixels in length and 45 pixels in height (excluding the border).



The idea was to hover over each individual button and have the text AND the gif change to their opposite colors.

Not only did that prove too difficult for me, I couldn't even get the base design set up. I can't even set up the images and links in their proper location!

I'm rolling the dice here and hoping someone would recreate or atleast give me an overview of how I'm supposed to do this.

I'd be extremely grateful for any help provided. Kudos.

[COBOLdinosaur]

Post your code or a link to the page please.

[Dirty Dan]

Well, it's not like my code is of any worth. It doesn't even remotely look like what I wanted or work even. I'd rather someone shows me the proper way to do it, from scratch.

[COBOLdinosaur]

I'd rather someone shows me the proper way to do it, from scratch.

Of course you would. Anytime you can get someone else to do your work for you it is great. However that is generally not how these kind of sites work.

I will advise, consult, mentor, guide, and do what I can to help you learn how to do what you need, but I am not going to do it for you, because you will learn nothing and the simple code required has very little intrinsic value.

The only way the thread has value is if you get your hands dirty with a little code and learn from the experience.

[tempz]

What you want to do is sprite all of the icons in to one large png file i.e http://s.ytimg.com/yts/imgbin/www-hi...-vflmnaCdT.png

Then edit the icons for a color change icon and do the same.

Then for each menu li you will assign a class i.e

<li class="home"><a href="home">Home</a></li>

Now using the image file you have added all the icons to..

CSS:

.home {
background: no-repeat url(//imagelocation) -90px -108px; /* these will hide the other icons */
width: 16px;
height: 16px;

Understand what I mean?

[Dirty Dan]

I understood that! Thanks! Ill go give it a shot and post my code. Because I will have undoubtedly made another mistake.

[Excavator]

Hello Dirty Dan,
I'm not sure what your reason for text is, it's not like those menu items will need to change. I would make the menu buttons icon and word both an image.

I have a demo of a sprite menu like this. It's a three state menu so there is a third part of the image that is used to show what page you're on. Maybe more complicated than what you're looking for...

This is the image it uses -


See the demo here. Click on the Markup and CSS links to see how it's done.