You are not logged in. Please login or register.
PunBB Forums → PunBB 1.2 discussion → CSS "New Posts" Image Troubles
Ok...Here's the deal. I would like to have the CSS value ".newtext a:link" display the image below without showing the text:
I want users to be able to click it without having to see the "New Posts" text beside it.
I've already tried "display: none;" and the likes...It makes all the link (including the image) disappear.
Is this even possible? To make the text disappear, but let the image link remain, while still being clickable?
The usual trick is to set the image as a background image to an <a> tag set as display block. You then give the <a> tag zero height and top padding large enough to accomodate the image. Another way is to nest a span inside the <a> tag and put the link text in the span. You can then make the span vanish and still have a working link.
.newtext a:link { font-size: 9px; color: #6F0000; background: url(../../img/Bauglir/new.jpg) no-repeat; line-height: 0px }This is the code I have so far. And it doesn't do anything.
It gives me the correct background and a linking image, it just doesn't make the text disappear. Every time I do anything to make the text disappear, the image disappears as well - such as setting the whole text to 0px, or using "display: none".
I would like to do this without the span tag as I am trying to design it entirely in CSS for a template.
Can you explain in more detail? Perhaps I am confused.
Try this
.newtext a {display:block; width: wpx; height: 0; padding-top: hpx; background: url(../../img/Bauglir/new.jpg) no-repeat; overflow:hidden }
wpx = your images width
hpx = your images height
The trick is to know that a background image acts as background to the whole "box" including padding but the content i.e. text only occupies its height. That and setting the <a> to display block.
Woah...Ok...That works, except that the image is appearing on the next line down.
i guess thats cos of display:block; is that needed?
Yes. If you can't use display:block than you're screwed.
Yes. If you can't use display:block than you're screwed.
Dang.
Oh, well. What I did is make ".newtext" the same color as the background, and made ".newtext a" bold, gave it padding, and changed the color from the default font. This sets it apart and makes it more visible.
Thanks for the tips. I guess it won't work out. *shrugs*
PunBB Forums → PunBB 1.2 discussion → CSS "New Posts" Image Troubles
Powered by PunBB, supported by Informer Technologies, Inc.