WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Drop Down Menu Using Images

Reply
  Thread Tools Display Modes
Old 10th August 06, 09:20 AM   #1
davva
WLC Member
 
Join Date: Apr 2006
Posts: 21
Default 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
davva is offline   Reply With Quote
Old 10th August 06, 09:47 AM   #2
Game Makker
WLC Lover
 
Game Makker's Avatar
 
Join Date: Jul 2006
Location: United Kingdom, Hertfordshire
Posts: 266
Default Re: Drop Down Menu Using Images

Put the text into strong tags ( <strong>blah blah blah</strong> ) and then try that.... or..... you could just as easily set positioning on the strong tags to absolute and give a huge left or right position. The only problem would be for screen readers and such.

Hope that helps
__________________
**
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
**
Simple articles to help anyone get started.
Game Makker is offline   Reply With Quote
Old 10th August 06, 10:08 AM   #3
pfmac
WLC Member
 
Join Date: Jul 2006
Location: Florence, Italy
Posts: 28
Default Re: Drop Down Menu Using Images

What you need to do is, as you thought, give the list item that you want to replace with an image a unique id and modify your css as follows:

.topmenuli {display:inline;}
.topmenuli a {display:block; text-indent:-9999px;} /* applies to all links in list*/
.topmenuli li#someid a {width:120px; background:url(http://www.learnevents.com/images/button-search.gif) left no-repeat;} /* specific background for each needed */
.topmenuli ul li a {text-indent:0; background:none;}

The last line is so that the links in the dropdown lists do not disappear and do not use the background image.
pfmac is offline   Reply With Quote
Old 10th August 06, 11:37 AM   #4
davva
WLC Member
 
Join Date: Apr 2006
Posts: 21
Default Re: Drop Down Menu Using Images

Okay thanks to both of you, I will give them a go
davva is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS horizontal/vertical drop down menu generator tothelimit Resources 10 19th January 17 07:17 AM
CSS powered drop down menu implementation issue koremelt CSS 0 16th July 07 01:25 PM
Dropdown menu issues Faan CSS 0 22nd June 07 04:39 PM
Tabbed Menu IE Problem stef686 Browser Compatibility 3 28th November 06 10:41 PM
CSS Menu Drop Down menu is hidden by other layers climberdude CSS 1 21st June 06 07:50 AM


All times are GMT. The time now is 04:43 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.