Creating a horizontal menu with different images for hover/down/active

[cgacfox]

Ok I spent some time looking on the Internet for tutorials on horizontal menus but nothing really has what I am trying to achieve. I have a background that the buttons sit on. The buttons are all sliced (6 of them for the "up" state and 6 for the "hover/down/active" state. I need a jump start to get this going. All buttons as sliced individually....don't know if that is correct. I have my unordered list and I know that I have to make it in-line to get get it horizontal...at least I think I do. If you could explain how this is done and what is the easiest way to do this so I can reuse the code in the future.

Here is the HTML

<div id="nav_bg">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">History</a></li>
<li><a href="#">How Can We Help?</a></li>
<li><a href="#">Design Pricing</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Here is the CSS so far...I have the nav background but am not sure where to start for the actual buttons.

#nav_bg {
background-image: url(../images/nav_bg.png);
background-repeat: no-repeat;
margin-left: 115px;
height: 117px;
}

[Luki_be]

display:inline on the li get's them horizontal alright. I'm in a hurry now but you could use a technique that's called sprites: it uses one image instead of several different images. The result is achieved by adjusting the positioning.

Here's a nice how to.

[RyanReese]

Basically give

#nav li{float:left;}

And sprites is something you should look into. You combine many images into 1 file and then you assign (for example) all <li>'s the background image, then assign each <li> a specific class and use the background-position property to move the image around to make a particular section of hte image you put in there show .

[Luki_be]

Basically give

#nav li{float:left;}

And sprites is something you should look into. You combine many images into 1 file and then you assign (for example) all <li>'s the background image, then assign each <li> a specific class and use the background-position property to move the image around to make a particular section of hte image you put in there show .

You like to float huh? lol

[cgacfox]

I have read the tutorial on sprites and it looks interesting. However, those images are all attached to each other. I do want spaces between the buttons. How do I achieve this? Or do I just have an image such as I attached with the upper row and the lower row with no space between the rows? I am sorry that I am such a newbie at this...I really am trying to keep up with the ever-changing world of web design.

[Luki_be]

If you want gaps between your images then you will have to adjust the background position in the css accordingly. The trick is to use the positioning to decide where the image shows up :-)

[cgacfox]

LOL well my first attempt really screwed things up...I have to go to work now but I will play with this tonight. I did upload it to www.foxdenwebsolutions.com/CSS_site/index.html.

[cgacfox]

Never mind...I cut and pasted the code from the tutorial and didn't change the names of things....silly me!

[cgacfox]

I also need to change the dimensions to mine...as I said I will play with this tonight after work.

[RyanReese]

You like to float huh? lol

Yup . It's slightly more buggy in IE but once you know what bugs are going to be triggered, fixing them before they appear makes it much funner to use them .

[Luki_be]

Off Topic:

Yeah well, you probably now how much i like to float

[cgacfox]

Ok I need help...I have uploaded what I have using the tutorial and the math is all wrong for the positioning. The button is width 111px height 51px and there are 6 buttons. Could someone please tell me where I am messing up? Thanks.

[RyanReese]

In the image get rid of the space between the images and the edge of the image. Like, don't allow for any whitespace in the image. It makes it harder to then place the image accordingly.

Right now, you are close with the background-positions, but the extra whitespace in the iamge is screwing it up

[Luki_be]

Ok I need help...I have uploaded what I have using the tutorial and the math is all wrong for the positioning. The button is width 111px height 51px and there are 6 buttons. Could someone please tell me where I am messing up? Thanks.

Maybe (probably) i wasn't clear in my answer about the space: leave the image as it is in the tutorial: no whitespace in the image itself. Use the css background-position to create the space between the buttons :-)

Sorry for that.

[cgacfox]

I reworked the graphics and redid the math and got it to work. However, I don't like it as much as the graphics with the spaces between the buttons or the pillow emboss I had on it. I might play with it some more to figure out the right spacing to be able to keep how I originally designed it unless there is another way to do it besides the sprite way.

[cgacfox]

Ah just saw your answer after I posted my response...I will go ahead and redo the pillow emboss and rework the positioning then.

[Luki_be]

It's up to you hat technique you use lol but using 1 image has a benefit:

Each separate images is a separate HTTP-Request, and the more of those you have, the less efficient your page is. So having 6 images for your nav instead of 1 ....

[cgacfox]

YAY got the nav to work like I needed! Thank you so much for all your help Luki and Ryan. Now I am moving on to getting all images centered on the page and getting the text centered in the content area. I had to remove all my wrappers and containers because it broke and I was getting confused. I will start a new thread for help on that. That way others can follow the progression of this better.

[Luki_be]

Glad it worked :-)