Thread

Ohhhhhhhhh this works, is it legal?

#img a:hover,a:active{text-decoration:none;background-color:transparent;}

And then the img tag must be surrounded with the div=“img” /div tag…

It’s just that I don’t usually use divs because I don’t know what that means.

The page is not online.

So my text links have this:

a {font-family: arial,verdana,helvetica; text-decoration: none; border-bottom: dotted 1px; border-color: #999999; font-weight: regular; color: #000066; }
a:visited {font-family: arial,verdana,helvetica; text-decoration: none; border-bottom: dotted 1px; border-color: #999999; font-weight: regular; color: #ff6600;}
a:hover  {font-family: arial,verdana,helvetica; text-decoration: none; border-bottom: dotted 1px; border-color: #999999; font-weight: regular; color: #33aa33;  background: #fedcba;}
a:active  {font-family: arial,verdana,helvetica; text-decoration: none; border-bottom: dotted 1px; border-color: #999999; font-weight: regular; color: #cc0000;}

And now I have this tag there too:

#img a:hover, a:active {text-decoration:none;background-color:transparent;}

And around the images I have

<div="img"></div>

And text links can have a hover and underline embellishment co-existing on the same page with images that do not.

😊

The code should be:

<div id="img"></div>

But yep, that’d work fine. Though if you’re using it more than once on a page you should change it to a class (<div class=“img”> rather than <div id=“img”>).

Otherwise cool!

The bad news is, if I put a second image w/link near it, it won’t work. I wonder why?

How do I write it in for say, the td or nav class?

All images should have no underline, no hover..universally.

There must be a way.

To be honest, what you really need to do is to get hold of a good CSS book (CSS Mastery is a good one) and learn how CSS works.

Without being able to see your code it’s hard to pinpoint the problem you see.

The code should be:

<div id="img"></div>

But yep, that’d work fine. Though if you’re using it more than once on a page you should change it to a class (<div class=“img”> rather than <div id=“img”>).

Otherwise cool!

I tried this div class=img but if I want to line up say, the podcast icon along with the rss icon, separated by a nbsp, I still need two divs! I thought div took care of all that was within it?

<div class="img"><a href="http://www.mydomain.com/blogaddress/feed.xml">images/rss.gif</a></div> <div class="img"><a href="http://www.nhtaxpayerradio.com/feed.xml">images/podcast.gif</a></div>

OK now this:

img {a:hover: text-decoration:none; background-color:transparent; border-bottom: none;}

This seems to work, even with no div, and simply class=“img” on each, but the MOMENT I put a space between the two images, whether just a return, or a nbsp, then the line comes back (but not the hover color)

:roll:

Nothing like going to bed with a problem then waking up with it again. LOL

Again I’m unsure of what you’re trying to achieve with it, but div is a block element which means it’ll take 100% width allowed to it. If you’re looking to place things next to each other (and I presume you mean side by side), this would work:

<div class="img"><a href="http://www.example.com/blogaddress/feed.xml">images/rss.gif</a> <a href="http://www.nhtaxpayerradio.com/feed.xml">images/podcast.gif</a></div>

You could then target the image with:

div.img img{}

Alternatively, you have the class on the images too, so you could use:

img.img{}

Which would do the same as the above.

If it’s the hover state you’re after, use:

div.img a:hover{}

Again I’m unsure of what you’re trying to achieve with it, but div is a block element which means it’ll take 100% width allowed to it. If you’re looking to place things next to each other (and I presume you mean side by side), this would work:

<div class="img"><a href="http://www.example.com/blogaddress/feed.xml">images/rss.gif</a> <a href="http://www.nhtaxpayerradio.com/feed.xml">images/podcast.gif</a></div>

 

Yes that’s exactly what I have that won’t work…I even tried adding a trans. section to make the graphic bigger and even that messed it up!

You could then target the image with:

div.img img{}

Alternatively, you have the class on the images too, so you could use:

img.img{}

Which would do the same as the above.

If it’s the hover state you’re after, use:

div.img a:hover{}

I’ll try this last thing. After that, if it doesn’t work, I’m giving up.

😊

EUREKA!!!!!!!!!!!! 😊 😊 😊

div.img a, a:hover, a:active {text-decoration:none; background-color:transparent; border-bottom: none;}

And the string with the

between it is there and works…

THANK YOU GUYS!!!!!!!!!!!!

(I had to add a, and active AS WELL AS hover to get rid of the attributes of the text links…)

Hmm. I’m not sure that works as you want it to because as soon as you include a comma, you’re starting a new rule. This is what you probably should be using, but if it works as it stands then it’s good I guess.

div.img a, div.img a:hover, div.img a:active {text-decoration:none; background-color:transparent; border-bottom: none;}

Screen shot (I have to get a better podcast icon but at least I can see this works with the two little icons in the upper nav. Linking graphics I don’t do often, but I needed these two)

Hmm. I’m not sure that works as you want it to because as soon as you include a comma, you’re starting a new rule. This is what you probably should be using, but if it works as it stands then it’s good I guess.

div.img a, div.img a:hover, div.img a:active {text-decoration:none; background-color:transparent; border-bottom: none;}

No YOU ARE CORRECT… I had to make a div.img for each like so, but still I’m happy happy!

div.img a{text-decoration:none; background-color:transparent; border-bottom: none;}
div.img a:hover{text-decoration:none; background-color:transparent; border-bottom: none;} div.img a:active{text-decoration:none; background-color:transparent; border-bottom: none;}

I can now have my text underline, active, and hover, and my images as links with no junk, and my cake, and eat it too! LOL

I don’t use linked images often, but I wanted that rss icon…wahhh, it’s much cooler than just saying “here’s ma feed” and give a link.

😊

What is your recommendation for a good book or two for me to learn CSS from the ground up? (CSS for Dummies?) I know HTML from the first version up to 4.x because I read several books on it.. and at the time there were lots of different things that worked in IE and not Netscape, but now I’m coding for Safari, FireFox, etc…and they are more universal these days.

I would love to get my head straight on what all the dots, semicolons, and hash signs mean.
I’ve been tweaking a lot of blog software and there are words in there I don’t know.. like wrapper… etc.

I prefer to hand code all my sites as this one.

I found CSS: The Missing Manual to be pretty good.