CSS Horizontal Sprite Menu using ONE background image. Please help!

I am looking to make a navigation menu similar to the following:

http://www.coremediadesign.co.uk/website_design_company/about_core_media_design.html

This is the sprite image they use.

http://img819.imageshack.us/img819/8185/menuo.png

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.

P.S. What is the function of making a font 14px/17px?

It’s good typography. 14px font size/ 17px line height… gives it “breathing room”

Hi NyK, welcome to SitePoint! :slight_smile:

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. :slight_smile:

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.

Any idea why or how this can be fixed?

Thank you.

I’m still using the code that was provided to me.

The layout I’m using is from Matthew James Taylor, but wrapped in a 980px div as per his instructions:

At the top of the layout, before the 980px wrap div, I have this header (so part of the layout spans 100%):

CSS


#header {
	width:100%;
	height: 150px;
	background: black;
	padding:0;
	margin:0;
}

HTML


<div id="header">
<div style="height: 101px">&nbsp;</div> /* This is just a filler for now */
<ul id="mainMenu">
	<li class="current"><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
	<li><a href="#">Tab 4</a></li>
	<li><a href="#">Tab 5</a></li>
	<li><a href="#">Tab 6</a></li>
	<li><a href="#">Tab 7</a></li>
</ul>
</div>

Have you got a link to your current code? I assume the code above is out of date now.

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?

Alright, I think I got it to work. I’ll post again if I run into more issues.

Thanks for the welcome, ralph.m. :slight_smile:

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.

The HTML is just:


<div style="width: 980px; text-align:left; margin:0 auto">
<ul id="mnv">
<li class="act"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>

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.


<ul id="mainMenu">
	<li class="current"><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
</ul>

#mainMenu {
	list-style:none;
	overflow:hidden; /* wrap floats */
	width:980px; /* also trips haslayout, wrapping floats IE */
	margin:0 auto;
}

#mainMenu li {
	display:inline; /* basically strip formatting and pretend these don't exist */
}

#mainMenu a {
	float:left;
	width:137px;
	padding:16px 0;
	text-align:center;
	font:normal 14px/17px arial,helvetica,sans-serif;
	background:url(images/menuo.png) 0 0 no-repeat;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	background-position:0 -49px;
}

#mainMenu .current a {
	background-position:0 -98px;
}

WAY simpler… should work all the way back to IE 5.x