text-indent: -9999px; Question

raydar · 02-13-2008, 06: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); 
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, 06: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>

Code:

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

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

Got it! Thank you very much.

xrvel · 02-13-2008, 07: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, 06:09 PM	#1 (permalink)
raydar NamePros Member Join Date: Feb 2008 Posts: 26 0.00 NP$ (Donate)	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--> 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, 06:56 PM	#2 (permalink)
xrvel i love automation Join Date: Nov 2007 Posts: 1,409 987.78 NP$ (Donate)	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> Code: ul li { margin:0; padding-left:1em; } __________________ Xrvel \| Various online tools \| Free Proxy List \| Hidden Proxy Partai Golkar \| Noomle works : Las Vegas Airfare

02-13-2008, 07:02 PM	#3 (permalink)
raydar NamePros Member Join Date: Feb 2008 Posts: 26 0.00 NP$ (Donate)	Got it! Thank you very much. Last edited by raydar; 02-13-2008 at 07:06 PM.

02-13-2008, 07:10 PM	#4 (permalink)
xrvel i love automation Join Date: Nov 2007 Posts: 1,409 987.78 NP$ (Donate)	Remove the text : (delete your text-indent style first) Code: #menu_about a { margin-top:9999px; } or Code: #menu_about a { visibility:hidden; } __________________ Xrvel \| Various online tools \| Free Proxy List \| Hidden Proxy Partai Golkar \| Noomle works : Las Vegas Airfare

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