Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2003
    Location
    The wild blue yonder
    Posts
    283
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I need invisible text!

    Hello all,

    Site is here. 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:
    Code:
    <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:
    Code:
    #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

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    The wild blue yonder
    Posts
    283
    Thanks
    0
    Thanked 0 Times in 0 Posts
    NM, fixed it. Thanks.

    Chris


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •