View Full Version : Link styles
newbi 08-13-2006, 02:06 PM Hi all - Trying to have two sets of links on my page as far as style is concerned. All links on my page are styled a certain way so I just did general
a:link {style}
a:visited {style} etc.
Then, there is a certain part of my page that I want to style links differently in so I put those in a div with an id and said
#idname a:link {style}
#idname a:visited {style} etc.
Well, oddly enough, it seems that some of those links take on my new styles and some don't, and even the ones that do, only take on certain styles.
Is there anything about this 'differently styled links' thing that I should know that I'm missing? If anyone could help, my hair would be very grateful. :)
Arwen 08-13-2006, 04:24 PM Try this instead:
a.example {
color: #ffffff;}
a.example:hover {
color: #000000;}
<a href="URL" class="example">Link Here</a>
newbi 08-13-2006, 07:35 PM Thanks, Arwen! OK, so you're saying it's better to give each 'different' link a class? Just to be picky and to know the rules - is that the way it's supposed to be? Is there something wrong with what I was doing? I'm just asking because that particular section happens to have a LOT of links in it. :blush: Thanks!
J to the izzosh 08-13-2006, 08:38 PM Yep, the classes will work fine. On the other hand, the method you were using - known as descendant selectors (http://www.westciv.com/style_master/academy/css_tutorial/selectors/descendant_selectors.html) - should work fine, too. In fact, in your case, where the styling of your links depends upon their relationship to a parent element, then it would be the better method to use as far as semantical value is concerned. It can also save you from having to type a lot of class="value" attributes where you have a lot of links.
Why your style sheet doesn't seem to be working properly is hard to say without seeing it in context. If you could provide a link to your page, the problem would be easier to troubleshoot.
newbi 08-14-2006, 03:08 PM Thanks for the reply, J. I know, it would be easier to actually see it but it's not online yet and I'm not quite ready for it to be so.
I've since somehow moved on from that problem but got stuck with the same principle again and decided that instead of the long trial and error that mysteriously solved the last one, I'll try to learn with this one. So I'll give you all the relevant code and if you could, please see what's wrong.
<body>
<div id="pagewidth" >
<div id="header" >
<h1>heading here</h1>
</div> <!-- header -->
<div id="wrapper" class="clearfix" >
<div id="twocols" class="clearfix">
<div id="leftcol" >
<ul class="hoverbox">
<!-- <li><a href="Favorites/Favorites.html"><img src="Images/Favorites.jpg" alt="Favorite images" /><img src="Images/LFavorites.jpg" alt="whatever" class="preview" /></a></li> -->
<li><a href="url"><img src="Image.jpg" alt="alt text" /><img src="Image.jpg" alt="alt text" class="preview" /></a></li>
<!-- there are more <li>s, just trying to save space --> </ul>
</div> <!-- leftcol -->
<div id="maincol" >
<p>content</p>
</div> <!-- maincol -->
</div> <!-- twocols -->
</div> <!-- wrapper -->
<div id="footer" >
<p>
<a href="url.html" title="link title">link</a> |
<a href="url2.html" title="link title 2">link2</a> |
<!-- again, there are more links here -->
</p>
<!-- this should be a bckgrd image in CSS -->
<img src="images/bottom.gif" style="position : relative; top: 20px;" alt="Decoration" />
</div> <!-- footer -->
</div> <!-- pagewidth -->
</body>
</html>
And the relevant CSS:
* {
font: Georgia, "Palatino Linotype", "Trebuchet MS", sans-serif;
}
body {
border: 1px solid aqua;
background: #fbe6a3 url(../Images/Background.gif) repeat-x;
color: #626477;
/*margin-left : auto;
margin-right : auto;*/
}
#pagewidth {
border: 1px solid black;
margin: 0 250px 15px 15px;
width: 750px;
text-align: left;
background-color: transparent;
padding: 10px;
color: #626477;
}
#header {
/*border: 1px solid blue;*/
position: relative;
height: 80px;
width: 100%;
padding-top: 45px;
padding-bottom: 0.5em;
}
#maincol {
border: 1px dashed #626477;
float: right;
width: 70%;
padding: 15px;
/*display : inline;*/
/*position : relative;*/
/*z-index : 1;*/
}
#leftcol {
float: left;
width: 25%;
min-width: 102px;
/*display : inline;
position : relative;*/
}
#footer {
height: 55px;
clear: both;
text-align: right;
padding-top: 30px;
background-color: transparent;
/*border: 1px solid green;*/
}
#pagewidth a {
text-decoration : none;
border-bottom: 1px dashed;
}
#pagewidth a:link {
color: #626477;
}
#pagewidth a:visited {
color: #E07601;
}
#pagewidth a:hover, a:active {
color: #E07601;
}
.hoverbox a {
text-decoration: none;
border-bottom: 0px;
}
h1, h2 {
color: #E07601;
}
h2, h3, h4, h5, h6 {
font-variant: small-caps;
}
h1 {
letter-spacing: 0.6em;
text-align: right;
font-style: italic;
font-size: 2.1em;
}
h2 {
font-size: 1.35em;
padding-bottom: 0.5em;
}
a img {
border : none;
}
.hoverbox {
list-style: none;
padding: 0 20px 0 20px;
}
.hoverbox a .preview {
display: none;
}
.hoverbox a:hover .preview {
display: block;
position: absolute;
top: -15px;
left: 60px;
z-index: 101;
}
.hoverbox img {
background: floralwhite;
border: 1px solid #626477;
padding: 5px;
vertical-align: top;
width: 85px;
height: 85px;
}
.hoverbox li {
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hoverbox .preview {
border-color: #E07601;
width: 120px;
height: 120px;
}
Please note that parts of both codes are missing, some I had to deem irrelevant because the post is already very long.
Now what I'm trying to do is to have the links in the hoverbox class (see bolded rule) not have the dashed bottom border all other links have because in IE it creates that dashed border below the images that serve as the links.
Could you please tell me what I'm messing up? I'm so tired of fighting with this and any help would be so much appreciated.
Thanks!
J to the izzosh 08-14-2006, 03:36 PM Welp, you could try this:
.hoverbox a img {
text-decoration: none;
border-bottom: none;
}
.hoverbox a {
text-decoration: none;
border-bottom: none;
}
Oddly enough, the border is considered to be around the image, not the anchor element, so you have to specify that the image should have no border. Though, because you did specify that anchor elements in the pagewidth element should have a border, you may require both rules. Try playing around with it and see what you get. Also, setting a border to 0 width doesn't actually make it go away. ;)
As a note, you should try using descendent selectors only when they have some associative meaning. For example, your pagewidth element seems to just be a wrapper of sorts and not a important unique section of the page. Saying #pagewidth a (all links in pagewidth) is effectively no different from just using a as the sole selector (all links in document), since there don't seem to be any links outside of pagewidth, making the former selector redundant. On the other hand, if you had a navigation section in which you wanted the links to be styled a certain way, then saying #navigation a (all links in navigation) makes sense and more importantly, has meaning.
newbi 08-14-2006, 04:01 PM Thanks, J!
-- Also, setting a border to 0 width doesn't actually make it go away. ;) --
Oh believe me, I try everything in my great despair! :)
As for the pagewidth thing - LOL, you opened a can of worms there. I completely agree with you in general. Now that particular business I believe is a leftover from my previous battle with the link issue and somehow whether it was just a or #pagewidth a seemed to make a difference and I have not dared remove it for fear of complete disaster. :scared:
Oh and I will play around with those rules and see what I get. Curious, though, also in my css is a general
a img {
border : none;
}
Any reason you can see that that doesn't do the job?
J to the izzosh 08-14-2006, 06:09 PM Curious, though, also in my css is a general
a img {
border : none;
}
Any reason you can see that that doesn't do the job?
Because of the "general", actually. The answer lies in the "C" of "CSS"; that is, "cascading". The cascade (http://www.w3.org/TR/REC-CSS2/cascade.html#cascade) is determined by inheritence, but because multiple conflicting rules can apply to an element, there has to be a way to negate some of those rules in favour of other, ideally more important, rules. This relies on a selector's specificity (http://www.w3.org/TR/REC-CSS2/cascade.html#specificity). The more specific a selector is, the higher its priority. Because an ID should technically occur only once on a page it is considered to be very specific and given a high priority. Classes are given a medium priority, and element names, understandably, are given the lowest priority.
Anyway, to answer your question, your selector containing the ID wins out in being applied simply because it is considered the most specific, while the very general a img is ignored.
Thanks for the question, I had to look that one up myself before I felt confident in the answer. I feel almost as though I've learned something today. Cheers.
newbi 08-14-2006, 06:49 PM Thrilled to help out. :)
So now that you've had a kick out of educating yourself, would you mind humoring me for a little more discussion? :)
OK, so, in a general rule, I said that pictures that are links should have no borders, right? And you're saying that at the same time, with an id, I also said that links should have a dashed bottom-border and that because of the id, that overrode my first rule.
Two questions (I think):
So can I just get rid of that general rule then because it's useless?
and
If I took out the #pagewidth from the link rules, should that solve the question? Which one is more 'relevant' then?
I'll go and play with these things but I'm also interested in some theory so if you feel up to it, let me know what you think. Thanks for all the help!
newbi 08-14-2006, 07:06 PM OK, here's the sad result of playing around. I inserted the two rules you suggested - all that happened is in both browsers (Firefox & IE6) the image now lost all bottom border (when I do want a solid border all around) except in IE, it still retained its dashed bottom border. So then I took out the bottom-border:none from both rules and that just got me back to square one.
Then I took out the pagewidth id from the 'a' rules, all of them - no change whatsoever.
<sigh> Anyone? Any suggestions?
J to the izzosh 08-14-2006, 07:47 PM Two questions (I think):
So can I just get rid of that general rule then because it's useless?
and
If I took out the #pagewidth from the link rules, should that solve the question? Which one is more 'relevant' then?
I wouldn't say that the general rule is useless. Personally, I hate browsers' tendencies to apply borders to images which are links, so I would say that your a img selector is quite useful and would keep it and its style unless you want those default borders to rear their ugly heads. On the other hand, if you do want a solid border around the images as I think you mentioned, then a rule that removes them won't help you much, eh? :)
To try and answer your second question I'll quote the W3C:
Finally, sort by order specified: if two rules have the same weight, origin and specificity, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.
Meaning, that if two selectors are equally "important", then their priority is determined simply based on order, with a preference for the most recent. If I tell you that "today is Monday" and later tell you that "today is Tuesday", then as far as CSS is concerned "today is Tuesday".
Specifically, though, this doesn't have the same bearing on your actual code as your selectors don't actually conflict. As you pointed out, one says that anchor elements should have a border while the other merely states that image elements inside anchor elements should not. It is perfectly legal for an image not to have a border while its parent element does have a border. This may be causing the visual effect that you're having issue with, but to be honest I'm having a little trouble keeping track of your code and exactly what you wanted to begin with. :)
And since I'm not sure that I've addressed your issue approriately, I'll stop there so as not to complicate things further and allow you to ask more questions if need be. Or, you know, post a link. ;)
newbi 08-14-2006, 08:35 PM to be honest I'm having a little trouble keeping track of your code and exactly what you wanted to begin with. :)
:blush: Uh-oh. Unfortunately, as I am fairly new to CSS, I tend to 'patch' a lot, kind of in an effort to tweak until it works. And yes, sometimes I wonder what the heck I wanted to begin with.
Well, I'll go back into hermit mode now, try to do a little house-cleaning so... can I take a raincheck on those extra questions? You bet they'll be there!
J to the izzosh 08-14-2006, 08:42 PM Well, I'll go back into hermit mode now, try to do a little house-cleaning so... can I take a raincheck on those extra questions? You bet they'll be there!
By all means. I look forward to your next round. :cool:
|