I would like to accomplish the same thing. I am NOT looking for one long image with my entire menu in image format. I want a three-part background image/sprite like the one I posted above that is used as the background/hover/active by repeating it on the x-axis.
I have tried for a long time to get this working but have not been able to. Please help me out.
You need to show us what you have so far, or what HTML you are trying to style. In reality, the answers are all on the site you linked to, but if you are having trouble building something similar, at least show us how far you’ve gotten. We don’t know what you need yet. Do you at least have an image of what you are trying to build, such as a Photoshop mockup?
Ah, I didn’t know line-height could be combined like that. Thanks.
deathshadow60 (or anyone who can help):
The code you provided works great; however, for some reason it’s bigger than 980px. It’s more like 1040px or so and there’s more space to the left of the first tab than there is to the right of the last tab.
I certainly wasn’t trying to complicate it, lol. I just haven’t used menus like this before now. Thank you very much for simplifying things, deathshadow60! It’s much appreciated!
Is there any way to center these tabs?
Thank you!
P.S. What is the function of making a font 14px/17px?
I would just like to extract that menu from the site and get it to work as is. From there I can go on to make adjustments.
Here’s most of the CSS the one site I mentioned uses, but something may be missing:
#mnv {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background-repeat:repeat-x;
background-position:0 -98px;
margin: 0;
padding: 0;
list-style:none;
}
#mnv, #mnv li, #mnv li a {
background: url("http://img819.imageshack.us/img819/8185/menuo.png");
}
#mnv li, #mnv li a {
width:137px;
display:block;
}
#mnv li {
height:47px;
background-repeat:no-repeat;
background-position:0 -49px;
}
#mnv li a {
padding-top:12px;
height:35px;
text-align:center;
font-size:14px;
color:#f9f9f9;
background-repeat: no-repeat;
background-position: 0 0;
}
a:hover, #mnv li.act, #mnv li.act a ,#mnv li.act:hover {
color:#333;
}
#mnv li,#mnv li a {
float: left;
}
#mnv li a:hover,#mnv li a:active,#mnv li.act,#mnv li.act a,#mnv li.act:hover {
background: none;
}
I tried using that and altering it, but no luck. I can’t get the active tab to work even when I use <li class=“act”> (as the site in question does).
The positioning is also off due to the way they have coded things (the absolute positioning, left: 0, bottom: 0, etc). I tried adjusting all that and just broke it even more.
Hmm. You seem to be using absolute positioning for no good reason… You’ve got a DIV around it for nothing… You’ve really overcomplicated something simple here.