CSS- background color/not on images

smoothfluid / 2007-07-15 14:07:43   

Is it possible to have different styles for the text links and the image links (thumbnail to full-size)? I have created a background color for the text link but don't want the images to have the color 'bar' underneath.
Still getting the hang of CSS! Many thanks.

Kolya / 2007-07-15 14:24:20   

I'm sure there's a much better way, but I managed to cover up the color 'bar' by changing the padding color of the images in CSS.

Vaska A / 2007-07-15 14:25:13   

Give these a try...we'll work on this in the future too. Add these rules underneath all of your other link style rules...

#img-container span.backgrounded a,
#img-container a.thickbox,
#img-container a.thumb-img,
#img-container #d-col1 a { background: transparent; }

smoothfluid / 2007-07-17 15:50:24   

Thanks, i'll give that a go, although now that I have it up I like the brutal/jarring look of the solid bar on the background.

Joachim_ / 2009-03-29 21:53:46   

I've tried to add the rules Vaska wrote into my style.css file under #img-container but nothing changed. Is there something more I need to do?

My page with the problem:
http://www.joachimcoucke.be/works/the-vvrong-gallery/

Thanks in advance.

Vaska A / 2009-03-29 22:11:36   

You want the borders? Take this out of the style.css...

  1. a img  { text-decoration: none; border: none }

You should also consider putting some line-height on your text and Index...would be a little easier to read then.

Joachim_ / 2009-03-30 09:34:09   

Thanks Vaska!

I wanted to remove the borders and by wonder it worked. My browser was doing a little bit weird last night. Now everything works perfect.

I will also try to add some line height! Thanks for the hints...

marwan / 2009-03-30 12:35:19   

sorry for posting here but actually my posts are not appearing in the forum :(

lost my post, did not appear in the forum list. will make it shorter. my webpage

i can't manage to get the color to stick to the lenght of the text. i wrapped the text in the text box with a h2 heading...thnks.

  1. h2 {
  2.     background-color: #FBFF03;
  3.     font-size: 14px;
  4.     font-family: Times;
  5.     line-height: 11px;
  6.     color: #FF0303;
  7.     font-weight: bold;
  8.     }

arsondpi / 2009-03-30 13:20:43   

Hi.
All h tags are block level elements. Do a websearch of what that is...
To fix this for this block of text only you can type

  1. <h2 style="display:inline;">...</h2>

you can guess what to do, if you want this to happen for all h2 tags.

marwan / 2009-03-30 13:41:50   

ok great! thank you very much, would do recommend avoiding the use of the h tags??

Vaska A / 2009-03-30 14:44:00   

h tags are great in my book.

arsondpi / 2009-03-30 18:38:34   

Avoiding h tags..? Sometimes I do - you just have to feed them on a regular basis so they don't jump on you (h tags with serifs have nasty claws)
:-D

h tags are fine. All tags are (even blink!!!)
One has to know how, when and where to use them.
There's no good/bad way of doing things - just good/bad use of things.

cocoabunny19 / 2009-09-10 16:30:11   

Hello there mod gods,
I've been trolling this forum for answers to all my troubleshooting needs so far and this is the only thing I haven't found the finessed code to fix. I used the #img-container rules listed in this thread and managed to remove the a:hover borders from my thumbnails but not my pre-nav image. Is there a line of code that can be used to do this? I'm here: abweston. Thanks!

Vaska A / 2009-09-11 16:38:41   

There are many ways to do this...based upon what I see I'd do something like this...

  1. #menu p a { background: transparent; }

It can be a little tricky targeting something so specifically but I believe this will do the trick. If not, then you will need to be a little more specific targeting the img as well...but I doubt you will need that.

cocoabunny19 / 2009-09-12 01:31:50   

Thanks for the quick solution, Vaska, but unfortunately it didn't work. Can you give me a quick rundown- or send me in the right direction to one- on targeting the image specifically and maybe something else to try?

lemathieu A / 2009-09-12 08:40:17   

As V said, there is a lot of way to achieve that…
The more radical would be to create a new div in your index.php like that (withou spaces after opening brackets):

  1. < div id='logo_topleft'>
  2. < a href="The address of your home" id="logo_topleft">
  3. < img border="0" width="XXX" height="XXX" alt="logo. click to index" src="The place where your logo is"/>
  4. < /a>
  5. < /div>

after these lines

  1. < !-- text and image -->
  2. < plug:front_exhibit />
  3. < !-- end text and image -- >

< /div >
< /div >

and then style it in your css

arsondpi / 2009-09-12 09:22:18   

...or use the info in this thread.

lemathieu A / 2009-09-12 10:17:09   

hey men ! This is me !

;)

arsondpi / 2009-09-12 13:16:22   

I know... still you named your div #logo_topleft and not #dididumdididoo. Cmon' - whats wrong with #dididumdididoo...
:-D

lemathieu A / 2009-09-12 14:42:43   

;)

cocoabunny19 / 2009-09-12 16:28:57   

Alas, I replicated your combined instructions but perhaps I'm just not div-savvy enough or something because the image appeared in a wacky place on the page and still had the border on hover, haha. I've put it back the way it was after some minor fiddling and am entertaining some thoughts on alternative styling to avoid the problem altogether... but if anyone wants to take a stab at another variation on the solution I'd be willing to try it!

Thanks for your input, everyone. Please forgive my dimness. :)

verena / 2010-05-28 12:43:00   

Hi, I have the same problem, I want to avoid the hover effect on my logo. arsondpi guided me to this thread.
I guess that wasn't the right way (because it's not working...) but what I did:
I added to my index.php (the one in the folder ndzx-studio-site-sample):

div id='logo_topleft'>
a href="www.stephanjanas.de" id="logo_topleft">
img border="0" width="100%" height="100%" alt="logo. click to index" src="www.stephanjanas.de/images"/>
/a>
/div>

!-- text and image -->
plug:front_exhibit />
!-- end text and image -- >

/div>
/div>

Then I added to my style.css:
#logo_topleft {
    background: transparent; }

Can anyone tell how to do this correctly? I'm trying to get into coding, but I don't seem to be quite talented...
Thanks a lot.
V.

Webpage

rickykappa / 2010-05-28 13:29:26   

try
#logo_topleft a:hover { background: transparent; }

verena / 2010-05-28 13:48:41   

Thanks, rickykappa, I tried that but it's still not working. Do I have to change something in my pre/nav text as well? Right now I have:
a href="http://www.stephanjanas.de">
img src="http://www.stephanjanas.de/images/logo_st_13.png">

Any suggestions?
Thanks a lot!
V.

rickykappa / 2010-05-28 14:02:57   

I didn't check it out, but you said you wrote < div id='logo_topleft'> in index.php, while in the above code the image has no id, therefore the css rule can't be applied...

verena / 2010-05-28 14:18:51   

That makes sense. I now wrote:

div id='logo_topleft'>
a href="http://www.stephanjanas.de">
img src="http://www.stephanjanas.de/images/logo_st_13.png">
/a>
/div>

and it worked. puhh.
Thanks for your help!
V.

This thread has been closed, thank you.