View Full Version : Horizontal Menu using images instead of text

09-26-2006, 09:06 PM
I'm making a horizontal menu, but I need to use a specific font (that most people probably won't have) for the menu items, so I'm going to use images of text instead of actual text. I'm trying to think of a good way to do this using valid XHTML and CSS, but I'm having a hard time coming up with anything. I really don't want to have to settle for Dreamweaver rollover images... Any help or ideas would be greatly appreciated. Thanks!

09-26-2006, 10:50 PM
I learned it from looking at pages where it's done.
Some search on "image replacement techniques" will give you a lot of results that might inspire you.

09-26-2006, 11:15 PM
Well I managed to get the result I wanted by making a set of CSS rules for each "button", but I realize this kind of goes against what CSS is all about... I'll look around a little more and see if I can come up with anything better.

09-26-2006, 11:40 PM
CSS is about styling HTML elements. So why should styling the links be against what CSS is about?

Following is an excerpt of the CSS of a website I'm just doing. I have a list of links and gave every list item its own class. Then I put a background image to each list item's anchor (and span where no clickable link):

#header .home * {
background-image: url(images/b_home.png);
width: 106px;
#header .projects * {
background-image: url(images/b_projects.png);
width: 94px;
#header .concerts * {
background-image: url(images/b_concerts.png);
width: 103px;
#header .bio * {
background-image: url(images/b_bio.png);
width: 126px;
#header .pics * {
background-image: url(images/b_pics.png);
width: 75px;
#header .contact * {
background-image: url(images/b_contact.png);
width: 91px;
#header .links * {
background-image: url(images/b_links.png);
width: 61px;
#header li a:hover {background-position: 20px -25px;}
#header li span {background-position: 20px -50px;}

I wouldn't consider this as bad practice. That's merely an extension of what CSS is made for.