This is a discussion on "Drop Down Menu Using Images" within the Web Page Design section. This forum, and the thread "Drop Down Menu Using Images are both part of the Design Your Website category.
|
|
|
|
|
 |
||
Drop Down Menu Using Images
|
||
| Notices |
 |
|
|
LinkBack | Thread Tools |
|
#1
Aug 9th, 2006, 15:56
|
|||
|
|||
|
Drop Down Menu Using Images
Hi
Could someone help me on this one please, if you take a look at a site I have developed http://www.learnevents.com/, you will see that the drop downs work fine. I need to replace the text, FREE Exhibition, Conference 2006 etc with graphics. I think I know I will have to set up a class for each menu item in order to place a bground image of the graphic so I can still have HTML text within the list item. I have tried this, but it does not seem to work, especially when I add text-indent:-9999px (to hide the html text) Does anyone have any examples or any help for me! Thank You        
|
|
|
|
#2
Aug 9th, 2006, 17:00
|
|||
|
|||
|
Re: Drop Down Menu Using Images
I can't concive any good reason to replace what you currently have with graphics. The menu works absolutely fine and is going to be far more accessible than graphics. Concentrate your efforts on fixing the 22 errors that show up when you validate your page through the W3C validator.
|
|
#3
Aug 10th, 2006, 08:59
|
|||
|
|||
|
Re: Drop Down Menu Using Images
Thanks for the reply, but it has to be graphics for the top menu I'm afraid, any ideas?
|
|
#4
Aug 10th, 2006, 09:43
|
|||
|
|||
|
Re: Drop Down Menu Using Images
If you insist but I would be interested to know why the obsession for graphics. You will need to give each menu item an 'id'. If the graphic is to be a background with the text on top, then just set the background-image for each of the id's. If you are going to replace the text with the graphic, then if you want the graphic to change on mouse over, you will need to set up a link and hover for each of the id's and specify the <img> to be used with the <a> tag. Don't forget to make good use of the title attribute. Keep in mind the need to meet accessibility requirements - its the law here in the UK. And fix those errors.
|
|
#5
Aug 10th, 2006, 11:16
|
|||
|
|||
|
Re: Drop Down Menu Using Images
Okay thanks, I will get back to you soon
|
|
#6
Aug 10th, 2006, 15:47
|
|||
|
|||
|
Re: Drop Down Menu Using Images
You can do it with a single image for as many states as you need. Make one image with both button states then position the graphic accordingly on #foo li a and #foo li a:hover
Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
|
|
#7
Aug 10th, 2006, 15:55
|
|||
|
|||
|
Re: Drop Down Menu Using Images
Not if the intent is to replace the text with a meaningful graphic that can be used for navigation you can't. Which I think is what this person wants to do.
|
|
#8
Aug 11th, 2006, 13:26
|
|||
|
|||
|
Re: Drop Down Menu Using Images
Why not? a li etc is still an li with or without visible text or graphics. It will have the same width and height specified regardless of its content and maintain the same function. using a background or using just css to style it is the same end result, maybe I am just missing the point.
Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
|
|
| Tags |
| drop, down, menu, using, images |
| Thread Tools | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| CSS drop shadow effects with images | wickedmoon | Web Page Design | 2 | Aug 26th, 2007 22:01 |
| Images in drop down menu's | Accurax | Web Page Design | 2 | Jun 5th, 2007 01:15 |
| I have a normal css menu, but want ot add drop down menu to it | multichild | Web Page Design | 7 | Jan 9th, 2007 16:07 |
| Drop Menu Help | xKillswitchx | Web Page Design | 1 | Jul 13th, 2005 17:56 |
| drop menu help | makemesick | JavaScript Forum | 2 | Apr 23rd, 2005 05:48 |
