Jump to content

hide text


Mr_CHISOL
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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... :?)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 ;?)
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...