...

View Full Version : I need invisible text!



cjwsb
07-17-2005, 02:47 PM
Hello all,

Site is here. (http://www.bartlett-family.net/chrisbartlett/) As you can see, there are 4 links along the top. They are all images controlled by CSS. Here's the XHTML code I am working on:


<div id="logonav">

<ul>
<li id="ln1"><a accesskey="k" href="./" title="To The Main Page"></a></li>
<li id="ln2"><a accesskey="t" href="timeline/" title="A little about me"></a></li>
<li id="ln3"><a accesskey="i" href="about/" title="Info about this little web space"></a></li>
<li id="ln4"><a accesskey="c" href="contact" title="Contact Me"></a></li>
</ul>
</div>

As you can see, there is NO actual value for the anchor: nothing. Well, the WAI-AAA validator doesn't like that. There has to be something there. The problem is that if I add text there it, of course shows up on the page. I don't want that, I want my images... So, can I add the text, but make it invisible somehow? I've played with transparencies a bit, but nothing's working. Anyone know any tricks?

The CSS code that controls them is here:


#logonav {
background : url(./pix/MenuBar.jpg) no-repeat;
height:40px;
width : 780px;
}

#logonav ul {
margin : 0;
padding : 0;
white-space : nowrap;
list-style : none;
}

#logonav li {
float : left;
width : 130px;
text-align : center;
margin-left : 25px;
}

#logonav li a {
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
}

#ln1 a {
background : url(./pix/home_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}

#ln1 a:visited {
background : url(./pix/home_click.gif) no-repeat;
}

#ln1 a:hover {
background : url(./pix/home_mouse.gif) no-repeat;
}

#ln2 a {
background : url(./pix/time_bio_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}

#ln2 a:visited {
background : url(./pix/time_bio_click.gif) no-repeat;
}

#ln2 a:hover {
background : url(./pix/time_bio_mouse.gif) no-repeat;
}

#ln3 a {
background : url(./pix/about_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}

#ln3 a:visited {
background : url(./pix/about_click.gif) no-repeat;
}

#ln3 a:hover {
background : url(./pix/about_mouse.gif) no-repeat;
}

#ln4 a {
background : url(./pix/contact_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}

#ln4 a:visited {
background : url(./pix/contact_click.gif) no-repeat;
}

#ln4 a:hover {
background : url(./pix/contact_mouse.gif) no-repeat;
}

Just as an example, I'll add "Home" to the bar in red text. Bsaically, I figure that still has to be there, but invisible! How?

Thanks!

Chris

cjwsb
07-17-2005, 03:10 PM
NM, fixed it. Thanks.

Chris



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum