Web Analytics Made Easy -
StatCounter Horizontal Menu using images instead of text - CodingForum


No announcement yet.

Horizontal Menu using images instead of text

  • Filter
  • Time
  • Show
Clear All
new posts

  • Horizontal Menu using images instead of text

    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!

  • #2
    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.
    Stop solving problems you don’t yet have!


    • #3
      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.


      • #4
        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.
        Stop solving problems you don’t yet have!