hide text

[Mr_CHISOL]

Hi!I have this HTML:

<div class="jp_back"><div class="back_button"><a href="java script:history.go(-1)">[ Back ]</a></div></div>

I want to hide the [ Back ] and replace it with an image. In a normal case I would add a span inside the anchor, but as I'm writing a template for Joomla! and don't want (or shouldn't) change in the code.So is there any other way to hide the text using CSS?

[msd]

You can use a class for that "a" tag.HTML:

<a class="hide" href="">..</a>

CSS:

.hide{	  display:none;}

Or, if you want to hide it on click:

<a onclick="this.style.display='none'" href="#">..</a>

[Mr_CHISOL]

I know, but I still don't want to change in the HTML.I just wanna use CSS to replace the text with an image and still clickable

[msd]

If that link is inside a div, you can hide it with:

divname a {	 display:none;}

But I don't know for sure how you can replace it with an image.Maybe if you have that imagine in a hidden div, and display the div when you need it (on click) at a certain position (over the link text).

[Mr_CHISOL]

That wont work...I want to replace the "back"-text with an back-arrow as I find the text uggly and doesn't fit into the design, but whitout editing any HTML

[BigAl75]

I believe the only way to do this will end up with you editing the html no matter what. What's the big eal with editing the htmlanyway? Just curious.

[Mr_CHISOL]

I was afraid that there was no way, but I was hoping...As I'm writing a template for the CMS Joomla! I "shouldn't" edit the html (I could, I've edited some code in Joomla! before, but I'm trying to avoid it), as you then somewhat loses the point with a template... :?)

[ste]

i dont think you have to edit the html this should do the job:

.back_button a {background: url(image.png)  no-repeat   20px 10px   fixed;  /* the button image*/text-indent: -100em;	/* hide text */overflow: hidden;  /* prevent scrollbar */height: 25px;  /* alter to whatever you need */}

you need to change this to fit your own purpose such as the button size.NB:in this part of the code: "background: url(image.png) no-repeat 20px 10px fixed; /* the button image*/" the 20px 10px refers to the position of the image rather than size

[Mr_CHISOL]

Thanks, that works great, just had to add display: block; and a width...Tried something like that before, but with padding instead of text-indent, but this works much better and cleaner :?)Thanks

the 20px 10px refers to the position of the image rather than size

I know ;?)

[ste]

its a handy technique and search engine friendly for instances when you need to replace <h> tags with images and keep the semantic meaning of the tag anyway glad you got it working

[Mr_CHISOL]

One question: What was the position and fixed good for? (I know what they do, just wondering why I should use them)I've removed "fixed" as it makes the whole thing mess up...

[ste]

basically a fixed background is a background image that will stay in one place while the rest of your text and images scroll over the top of it. i just had that in the code from the last time i used the technique when i needed it to work that way but that wasnt a link that i was replacing but the heading of a page with the logo.