hi people i just made a nagivation menu which has images as links i used the text-indent:-9999px code now i m stuck because i want to create submenu and i want the submenu as visible but i cant because i have used that text-indent code this is the css file m working on right now i would really appreacite if anyone can help me out here thanks .jqueryslidemenu ul { background: none repeat scroll 0 0 transparent !important; margin-left: 103px; } >>>> menu css <<<< .jqueryslidemenu ul li a { width:174px; background:none !important; font-size:38px; font-family:arial, helvetica, sans-serif !important; text-indent:-9999px; } >>>text inside menu css<<< .jqueryslidemenu ul li:nth-child(5n+1) { background-image : url(../_images/uploads/a.jpg) !important; padding: 37px 7px; } .jqueryslidemenu ul li:nth-child(5n+2) { background-image : url(../_images/uploads/b.jpg) !important; padding: 37px 7px; } .jqueryslidemenu ul li:nth-child(5n+3) { background-image : url(../_images/uploads/c.jpg) !important; padding: 37px 7px; } .jqueryslidemenu ul li:nth-child(5n+4) { background-image : url(../_images/uploads/d.jpg) !important; padding: 37px 7px; } as you can see i have put images and when i create a submenu it comes same as the above with the pic
Just to warn you, I'm going to be BRUTALLY frank instead of slapping the rose coloured glasses on your head and leading you down the garden path with silver bullet fixes. The below is not said to be mean, it's being said to help -- consider it a wake-up call. 1) the text-indent:-999 techinique is a miserable FAILURE at image replacement since it doesn't actually WORK for people browsing with images disabled! So I wouldn't be using that technique. the empty span or other tag sandbag with overlapping the image atop the text is much more reliable. Research "gilder-levin image replacement"... the ONLY image instead of text method that's worth a flying purple fish. 2) even when using the BROKEN -999~ technique, all you should have to do is say "UL UL a { text-indent:0; }" to return it to normal. 3) which kind of adds to all those !important which means you already have some form of oddball specificity issues on the page. USUALLY needing !important is an indication of bad coding in all but the rarest of cases. 4) NOT that (your class gives this away) you should be using that steaming pile of manure known as jquery to build something as simple as a menu given that too is an accessibility train wreck and pointless bloat. 5) NOT that nth-child is reliable cross-browser either, making your page broken in anything prior to IE8. 6) The use of multiple images to handle what would be more efficiently handled as a single image file and sliding the backgrounds around is probably making the page take longer to load than what nth-child could ever save you in the markup -- much less that if you're declaring the same padding on all of them you should only be saying it once? 7) Snippets are like doing brain surgury over a time phone to 1885. Without seeing the whole picture, we also cannot see what's interfering with the code you posted -- though from what you posted I suspect that your entire page should probably be thrown out and started over from scratch. A link to the actual page in question or a full working demo page would be a lot more useful as by simply posting a snippet, you're treading into "and this is why we can't help you" territory.
thank you for taking your time reading my post i m really new to the web designing industry the cms i use they mainly use css and html and thats it but yeh if you can help me out by giving me guides on what i need i will really appreciate it thank you once again!
I would suggest looking into sprites. net.tutsplus.com has a tutorial on this, just search for sprites. I would also like to point out that using images for a menu isn't such a great idea as it adds a bit of overhead, and a lot of times (unless dealing with icons) you can get a similar if not identical effect using css, and of course further point out the the text should not be part of the image.