kate_rose Posted January 19, 2008 Share Posted January 19, 2008 Hi, I am trying to create different underline styles for links. I need a bunch of them (I have 13 so far). From what I have read the easiest thing to do is to put the underline in the background. I have accomplished this. However when I define multiple classes only the last one defined seems to show up no matter what style I specify. Can anyone tell me what I am doing wrong?? I am still on the steep part of the learning curve so I am just trying to get this to work in a practice file before I apply it to my web page. So eventually the css will go in a different file. I have included some of my code below. <head> <style type="text/css"> a {text-decoration:none; color:#000000; font-family:"Times New Roman", Times, serif,} a:hover {text-decoration:none; color:#000000; background-position: -500px;} .blue_link_style1 a:link, a:visited, a:active {color:#000000;text-decoration:none; background:url(image/link_style_1.gif) no-repeat left bottom} .blue_link_style2 a:link, a:visited, a:active {color:#000000; text-decoration:none; background:url(image/link_style_2.gif) no-repeat left bottom} </style> </head> <body> <a name="abaxial" id="abaxial"></a> <p class="blue_link_style1"> <strong>ab•ax•i•al</strong> (ăb-ăk׳sē-əl) <i>adj <br /> </i>the side of an organ situated away from the <a href="#axis">axis</a> (<i>i.e.</i> the bottom surface of a leaf)<br /> (<i>syn</i> anterior, ventral, lower) </p> </body> </html> So the "axis" link above is always styled by the blue_link_style2 even though I asked it to use blue_link_style1. I tried putting it all on the same line in case that made a difference (I know it shouldn't) I also tried defining the style using a p class but that made no difference. Thanks for any help you can offer. Kate Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted January 20, 2008 Share Posted January 20, 2008 This stuff .blue_link_style1 a:link, a:visited, a:active .blue_link_style2 a:link, a:visited, a:active Should be like this .blue_link_style1 a:link, .blue_link_style1 a:visited, .blue_link_style1 a:active .blue_link_style2 a:link, .blue_link_style1 a:visited, .blue_link_style1 a:active Your styles keep getting overridden by any equally specific declarations further down the cascade. Any "a:visited" is going to get overridden by an "a:visited" further down the cascade. You need to specify the class of the element that a:visited is contained within. It's also not a good idea to have handfuls of different link styles - it is confusing to visitors. Just stick with one or two recognisable link styles that get repeated throughout the site. Quote Link to comment Share on other sites More sharing options...
kate_rose Posted January 20, 2008 Author Share Posted January 20, 2008 Thanks Bronze, I am still working on getting the code right. So every time I make a class if I have more than one character that I want to alter (i.e. both a:link & a:visited) I have to have a separate statement for each of them or does this only happen when dealing with links? So if I wanted to define a class that had red text that was in a certain font I could type this? .text_class {color:#000000}, .text_class {font-family:"Times New Roman", Times, serif,} OR could I do it like this? .text_class {color:#000000; font-family:"Times New Roman", Times, serif,} I am trying to make a really informal notebook style website. The links will look like they have been underlined with a pen or pencil so the lines under the links will be at slightly different angles, thicknesses etc. but are really all part of 1 "style". I thought of putting the styles in an array and having them called randomly but I am not sure I am up to that yet & some underlines look funny on some words so I don't want it to be totally random. I appreciate your help & patience. Kate Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted January 20, 2008 Share Posted January 20, 2008 If you just have a bunch of stuff to declare for one or more elements, classes, ids, etc then you don't need to write each property+value in a different declaration. This kind of thing will do just fine: .myclass {width:100px; color:#000; font-family:"Times New Roman", Times, serif;} But you were declaring some styles for several (pseudo)elements found within an element. What you wrote for your links was like this: .myclass a:link, a:visited, a:active {color:#000; font-family:"Times New Roman", Times, serif;} The commas separate different elements, class, ids, or pseudo elements (the :link stuff) and so your code reads as: "All a:links that are within an element labelled 'myclass', all a:visited, all a:active". You didn't put .myclass before each different target of the property values. After .myclass a:link you are actually targeting a:visited and a:active and not .myclass a:visited, .myclass a:active. Therefore, every time you repeated the same mistake the lower placed a:visited and a:active declarations overrode any similar declarations occurring higher up the cascade. It wasn't that .bluelink2 was overriding .bluelink1, it was that a:visited further down the page was overriding a:visited higher up! You needed to make it more specific, it should have looked like this: .myclass a:link, .myclass a:visited, .myclass a:active {color:#000; font-family:"Times New Roman", Times, serif;} I hope that has cleared up any confusion. Whenever you have problems like this always look to see if it is a "specificity" issue whereby your declaration is getting overridden by a different one lower in the cascade or with higher specificity. I see why you might want so many different links now. Good luck with it. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted January 20, 2008 Share Posted January 20, 2008 Here is the "must have, must bookmark" link that explains (quickly and easily) what bronzemonkey's answer is all about: maxdesign's selectutorial Quote Link to comment Share on other sites More sharing options...
kate_rose Posted January 23, 2008 Author Share Posted January 23, 2008 Thanks everybody I think I got it now. I don't know how to mark this as solved though. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.