Using images instead of text in menu tabs?

Nathan_A · November 2005

Is there anyway to use images in the menu tabs instead of text? (Discussions, Categories, Search, etc...) I want the menu to look 100% identical across all browsers / os's - and to match up with the rest of my site. Preferably with use of 3 different gif's for each menu item (1 each for TabOn, TabOff and TabOff:hover cheers

stuart · November 2005

something like this maybe?


.TabOn {
text-indent: -2000em;
background: #fff (whatever.gif) no-repeat top center;
}

changing it for the hover and off states will give the effect you want.

Felipe · November 2005

Another solution is to use text for your menu tabs in the rest of your site ;-) This is more easily accessible to a lot of people (disabled people but not only).

Nathan_A · November 2005

That's what I was thinking Stuart, but wouldn't having the text indented 2000 em to the left screw with the horizontal width and spacing between the tabs? True Felipe, but as a designer, sometimes I put more priority on the text appearing exactly as I want it, not something close to it! They are all labelled and alt tagged properly though ;)

stuart · November 2005

Sorry, ignore that snippet above, that was senseless drivel. The solution you want has been well documented, and beautifully implemented at Bryan Veloso's Avalonstar: http://avalonstar.com/featurettes/runningwithsprites the sprites approach should work for you just fine.

Nathan_A · November 2005

thanks stuart. I actually just tried what you wrote above and it didn't do anything. I'll give the avalonstar sprites approach a go tomorrow. just one quick question though. how would I specify different images for each tab? in the global.css, there's just the TabOn, TabOff and TabOff:hover tags which effect all of them. As you can see below. I can't see anyway to specify which background specifically, say, the seach tab has for instance. extract from global.css: /* TabOn/TabOff: The tabs in the main menu, which can appear different if they are identified as the current tab (TabOn). */ .TabOn, .TabOn:link, .TabOn:visited, .TabOn:hover, .TabOff, .TabOff:link, .TabOff:visited, .TabOff:hover { position: relative; padding: 0px; padding-top: 2px; padding-bottom: 2px; font-size: 13px; font-weight: bold; text-transform : uppercase; text-align: center; text-decoration: none; } .TabOn, .TabOn:link, .TabOn:visited, .TabOn:hover { color: #E9004A; } .TabOff, .TabOff:link, .TabOff:visited { color: #7C7C7C; } .TabOff:hover { color: #343434; }

stuart · November 2005

They all have unique classes too, check out this firefox screenshot: http://www.36-degrees.co.uk/files/ffvanilla.png

Krak · November 2005

Why would


.TabOn {
background: url("bg.gif");
}

not work?

Bergamot · November 2005

Well, for one, if he wants to hide the text...

Nathan_A · November 2005

Hmm... ok according to that image, (and when I view source from a browser), yes, there appears to be unique classes for each menu tab - but trying to control them from global.css doesn't seem to do anything. Typing this in below is just ignored completely. and just defaults back to whatever .TabOn is (or if I remove that, what ever the page settings are) .TabOn DiscussionsTab { display:block; width:93px; height:20px; padding: 0px; padding-top: 2px; padding-bottom: 2px; text-indent: -2000em; background-image: url(../../images/menu_discussions_on.gif); }

stuart · November 2005

remove .Tabon and just have .DiscussionsTab Or try something like .TabOn > .DiscussionsTab - which should apply styling only to the discussions tab which is adjacent to the main .TabOn styling, maybe, who knows, it's late, I'm a little bit drunk.

Nathan_A · November 2005

still doesn't seem to have any effect plus the text-indent is ignored when display:inline oh, well, I think I'll just go back to text menus then. thanks for your help stuart

timberford · November 2005

i managed to do it on my css design. i'll check out how i achieved it and post it up for you.

--------edit--------

ok here's the css...




/* list items code*/
#MenuForum {
		list-style: none; 	
		width:990px;
		background: url(bg_nav.gif) no-repeat;
		height:40px;
		padding:20px 0 0 281px;
	}
	
	#MenuForum li {
		float:left;
	}


/*tab styles*/
	/*-----------------------------------------------------------------------------------------*/

	.TabOn, .TabOn:link, .TabOn:visited, .TabOn:hover,
	.TabOff, .TabOff:link, .TabOff:visited, .TabOff:hover {
		text-decoration: none;
		text-indent: -4000px;
		height:17px;
		display:block;
	}
	
	
	/*image for each tab*/
	.DiscussionsTab{
		background:url(nav_discussions.gif) no-repeat;
		width:99px;
	}
	
	.CategoriesTab{
		background:url(nav_categories.gif) no-repeat;
		width:91px;
		margin-left:11px;
	}	
	
	.SearchTab{
		background:url(nav_search.gif) no-repeat;
		width:63px;
		margin-left:11px;
	}
	
	.SettingsTab{
		background:url(nav_settings.gif) no-repeat;
		width:73px;
		margin-left:11px;
	}
	
	.AccountTab{
		background:url(nav_account.gif) no-repeat;
		width:70px;
	}
	
	/*tab on*/
	/*-----------------------------------------------------------------------------------------*/
	
	.TabOn, .TabOff:hover{
		background-position: 0 -17px;
	}

there is extra code in there that you wont need but it should be easy to adjust to your needs.

note that you must have both link states in the same image. for example:

and then I have restricted the height to show only one half on the image at any one time. on hover you move the background image position to reveal the other part of the image. thus your roll over, very fast as well because it doesn't need to load a second image on roll over.

to make the text not show i have used text-indent: -4000px; this works because i've used float:left; rather than display:inline; - display inline doesn't work well in older browsers so i always stay clear of it anyway.

now unfortuntely in old versions of ie on mac, and possibly win i can't remember, using text-indent will also move the background image off of the screen. unfortunatley there's not much that can be done here without altering the html...

if i was to write the html for the nav i would stick a span inside the a tag and then use display:none; on the span with the background image still on the a tag. but it's up to you whether you want to change the html before the templating system is out or whether you're not fussed about the older browsers.

hope that helps.

you can see the style here

leemarrett · November 2005

nathan the problem with your css not working is because you are telling it you want to style elements with a class of DiscussionsTab whose parent is TabOn. In the html these classes are listed as TabOn DiscussionsTab which means the element has a class of both Tab On and DiscussionsTab -- they don't have a parent/child relationship. you just want to style DiscussionsTab on its own. Did that make sense? Does anyone else have the problem where they can clearly see where things are going wrong but when you try to explain it it just comes out as gobbledegook?

Bergamot · November 2005

I can't think of a way to style an element with both DiscussionTab and TabOn, but not each individually.

There are some days I just want to smack the w3 consortium upside the head.

EDIT: Apparently, it would just be .DiscussionTab.TabOn{}.

You have been spared. This time.

leemarrett · November 2005

hmmm. don't think that's going to work....

leemarrett · November 2005

oh, whoops, sorry i thought you had a space between the two selectors.

Bergamot · November 2005

Nope, sorry should have specified that. It really is a crappy little hack intended to cover up how weak the css selector syntax is, but it's there.

leemarrett · November 2005

aw, don't be mean to the poor css spec :P

Bergamot · November 2005

Why not?

leemarrett · November 2005

because deep down it's a person too

Using images instead of text in menu tabs?

Comments