Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 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
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    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.

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    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):
    Code:
    #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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •