text-indent: -9999px; Question

raydar · 02-13-2008, 07:09 PM

Hello,

I'm trying to code a menu item where it shows a background image. I was told that it's best to have text in your list, and then do a text-indent in the .css file to shift the text all the way off the page. (Instead of doing a list of images.) The problem I have is that when I do the text-indent, the whole box (text + background image) disappear.

Here's the html code:
<div id="menu">
<ul>
<li id="menu_space1"></li>
<li id="menu_about"><a href="about.html">About</a></li>
<li id="menu_space2"></li>
<li id="menu_services"><a href="services.html">Services</a></li>
<li id="menu_space3"></li>
<li id="menu_portfolio"><a href="/portfolio">Portfolio</a></li>
<li id="menu_space4"></li>
<li id="menu_contact"><a href="contact.html">Contact</a></li>
</ul>
</div>

Here's a sample of the .css trying to shift the word 'About' off the screen, showing only the background image:
#menu_about {
display: block;
width: 65px;
height: 54px;
background-image: url(web_images/about.jpg); 
????: NamePros.com http://www.namepros.com/programming/432053-text-indent-9999px-question.html
background-repeat: no-repeat;
background-position: 0 0;
text-indent: -9999px;
}

Any insight as to why this is happening and how to fix it would be appreciated.

Thank you,
Raydar

xrvel · 02-13-2008, 07:56 PM

If you want to make a menu from <ul> or <ol>,
You should remove list image with

Code:

ul {
   list-style:none;
   margin:0;
   padding:0;
}

And add the background style in your <a>

Code:

ul a {
   backgroung-attachment:scroll;
   background-image:url(...gif);
   background-repeat:repeat;
   display:block;
}

If you want to move the menu left or right, modify the padding in <li>
????: NamePros.com http://www.namepros.com/showthread.php?t=432053

Code:

ul li {
   margin:0;
   padding-left:1em;
}

raydar · 02-13-2008, 08:02 PM

Got it! Thank you very much.

xrvel · 02-13-2008, 08:10 PM

Remove the text :
(delete your text-indent style first)

Code:

#menu_about a {
	margin-top:9999px;
}

or

Code:

#menu_about a {
	visibility:hidden;
}

02-13-2008, 07:09 PM	THREAD STARTER #1 (permalink)
raydar NamePros Member Join Date: Feb 2008 Posts: 33	text-indent: -9999px; Question Hello, I'm trying to code a menu item where it shows a background image. I was told that it's best to have text in your list, and then do a text-indent in the .css file to shift the text all the way off the page. (Instead of doing a list of images.) The problem I have is that when I do the text-indent, the whole box (text + background image) disappear. Here's the html code: <div id="menu"> <ul> <li id="menu_space1"></li> <li id="menu_about"><a href="about.html">About</a></li> <li id="menu_space2"></li> <li id="menu_services"><a href="services.html">Services</a></li> <li id="menu_space3"></li> <li id="menu_portfolio"><a href="/portfolio">Portfolio</a></li> <li id="menu_space4"></li> <li id="menu_contact"><a href="contact.html">Contact</a></li> </ul> </div><!--end menu--> Here's a sample of the .css trying to shift the word 'About' off the screen, showing only the background image: #menu_about { display: block; width: 65px; height: 54px; background-image: url(web_images/about.jpg); <!--this is the background picture--> ????: NamePros.com http://www.namepros.com/programming/432053-text-indent-9999px-question.html background-repeat: no-repeat; background-position: 0 0; text-indent: -9999px; } Any insight as to why this is happening and how to fix it would be appreciated. Thank you, Raydar

02-13-2008, 07:56 PM	#2 (permalink)
xrvel i love automation Join Date: Nov 2007 Location: xrvel.com Posts: 1,620 Follow @xrvel	If you want to make a menu from <ul> or <ol>, You should remove list image with Code: ul { list-style:none; margin:0; padding:0; } And add the background style in your <a> Code: ul a { backgroung-attachment:scroll; background-image:url(...gif); background-repeat:repeat; display:block; } If you want to move the menu left or right, modify the padding in <li> ????: NamePros.com http://www.namepros.com/showthread.php?t=432053 Code: ul li { margin:0; padding-left:1em; } __________________ Xrvel \| Free Wordpress Plugins \| Desain \| Bodoh \| WP License

02-13-2008, 08:02 PM	THREAD STARTER #3 (permalink)
raydar NamePros Member Join Date: Feb 2008 Posts: 33	Got it! Thank you very much. Last edited by raydar; 02-13-2008 at 08:06 PM.

02-13-2008, 08:10 PM	#4 (permalink)
xrvel i love automation Join Date: Nov 2007 Location: xrvel.com Posts: 1,620 Follow @xrvel	Remove the text : (delete your text-indent style first) Code: #menu_about a { margin-top:9999px; } or Code: #menu_about a { visibility:hidden; } __________________ Xrvel \| Free Wordpress Plugins \| Desain \| Bodoh \| WP License

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)