Previous Entry Share Next Entry
silly and basic question. [solved]
andr3 wrote in webdesign
i'm trying to achieve the simple effect of using CSS's border-bottom to fake an underline of a different color (and style).

so, i have this on my stylesheet:

a:link, a:visited, a:active {
   border-bottom: 1px dotted #ccc;
}


my only problem is that i don't want the links with images to have this bottom border. i've tried doing a img { } but this targets the image itself, setting its border to 0. but i want to target the anchor <a> tag.

The question is, is there any way of achieving this without using classes? ie:

<a class="noborder"><img bla bla bla></a>


i've searched the web, but i haven't found any page dealing with this issue (which leads me to think that the only way is to use classes).

thanks in advance

edit
solved, thanks to device55

  • 1
that only changes the image border. what i want to eliminate is the border of the link.


wait, i'll create an example. give me a minute.

Yeah I see what you mean, now. I think the only way to do it is to class the anchor (ex: imglink) and then a.imglink { border: 0px; }

There really isn't a way in CSS to say "for X as something that has this as a member, do this to X."

You will have to use a class name if you are going to have image links and text links in the same container...there's not a "parent element selector"

However, if the the link effect you're going for is only supposed to be applied in maybe the body copy of a site, you can style links in just that region. (assuming you only have image links in your navbar or whereever)

div#myBodyContent a {border-bottom: 1px dotted #ccc;}

This would leave all links outside of div#myBodyContent unstyled.

oh! cool. why haven't i thought of that? :)

thanks. that's exactly what i wanted.

alternatively...

<a href="whatever.html">this link has a border</a>

<a style="border-style:none;" href="whatever.html"><img src="whatever.jpg" /></a>

This would take care of the border on the image tags. You would get the same effect as if you used a class without having a separate class. However, if you are doing this method, there should not be any reason why you would not want to use a class instead...

Depending on how you are generating this HTML, it could be done automatically. For example, if you were using some server side scripting language like PHP or ASP you could check if the link content (the img tag or the text) started with "<img" and if it does, then you could generate the href link for images, otherwise it would generate the href link for text.

cluttering the markup (instead of the external CSS) is really looked down upon in caching terms.

like i said, it is solved. because what i wanted is exactly what device55 has suggested.

and like you said, before i came to this, i would use classes, like xiota said :P hehe

my objective was to have a simple anchor tag with no id, no class and no style options, and have it without a border-bottom.

nevertheless, thank you :)

  • 1
?

Log in

No account? Create an account