|
CSS - Multiple Link Classes
Is it possible to have multiple link classes? Currently, I'm using the pseudo elements a:link, a:visited, etc., but there are a couple of places in my layout where the colors for these links are the same color as my background. Is there any way that I can single out certain links using classes and set their colors to a different color like #ffffff
Thank you in advance, Jim Similar TutorialsHi all, I'm a newbie to CSS but I'm giving it a good crack and trying to learn all I can, reading and experimenting etc. I'm currently building a website for my wife's cake baking business and can't seem to get multiple CSS link classes working and I don't know why. I've been reading various websites on CSS for the last couple of hours but honestly can't see what I've done wrong. Any help would be appreciated. If you look at the site Ladybirdbakery co uk the top navigation has a .top_nav class that makes it white and the links are supposed to turn yellow and underline when you hover but they just don't. Similarly the small print links at the bottom, the mailto link underlines but the external link to my marketing website doesn't. I've tried re-writing the CSS a few times and put it through the W3 validation and it doesn't pull up any errors on my link classes that seem to be causing this issue. Could anyone offer me some advice so I can get this right and not make the same mistakes in the future? The CSS lives at the above address /ladybird.css Thank you very much. Ant I have encountered a really annoying bug in IE6 and would be very interested to know if anyone else hase encountered it and found a solution. Look at the following example: PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"> .class1,.class2,.class3 { border: 1px solid black; width:400px; line-height: 100px; text-align: center; } .class1 { background: none; } .class2 { background: red; } .class3 { background: blue; } .class1.class2.class3 { background: black; } </style> </head> <body> <div class="class1">Test Content 1</div> <div class="class2">Test Content 2</div> <div class="class3">Test Content 3</div> <div class="class1 class2 class3">Test Content 4</div> </body> </html> The four divs should all be different colours as follows: div1: transparent/white div2: red div3: blue div4: black However, both divs 3 & 4 are black. The rule: .class1.class2.class3 { background: black; } is incorrectly effecting divs with only .class3. Any ideas? Hi, I'm trying to use multiple classes: div class="class1 class2". As usual, IE 6 does all but not what you would expect. Please allow me to post a code snippet: Code:
<html>
<head>
<style type="text/css">
.class1 {
background-color: red;
}
.class2 {
background-color: green;
}
.class1.class2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="class1">
.class1 -- should be red
</div>
<div class="class1 class2">
.class1.class2 -- should be yellow
</div>
<div class="class2">
.class2 -- should be green
</div>
</body>
</html>
Sadly, the rule for .class1.class2 is also applied to the third div, where it should clearly NOT apply, so it is yellow instead of green. I know that using subclasses "is not safe for IE", as is CSS in general -- but is there a workaround that doesn't force me to abandon the technique? Thank you, answers appreciated! Hello, I am creating a message to display on my web sites. The HTML markup is as follows: <div class="Error"> <h3> <img id="Icon" src="Images/Error_Icon.gif" alt="Icon" style="border-width: 0px;"> <span>Header</span> </h3> <p>Description</p> </div> And the CSS: div.Error { background-color: #FFD9D9; border: solid 1px #FF9595; padding: 0.4em; position: relative; min-height: 1.25em; width: 120px; } div.Error h3 {} div.Error h3 img {vertical-align: middle;} div.Error h3 span {color: #B30000; font: bold 1.0em Georgia, Geneva, sans-serif;} div.Error p {color: #B30000; font: normal 0.8em Arial, Geneva, sans-serif; I have 3 types of messages: Warning, Error and Success. The only difference between the CSS of each message is the colors properties. Should I use a class named Message to define all common properties and then 3 other classes: Error, Warning and success to define the color properties: <div class="Message Error"> Or should I use three different classes? How is this usually done? Any other advice on how I am building my message is welcome to. Thanks, Miguel i have a small note that i want to put on the screen, except i want to give it the styles of two different classes. this is what i have used: <span class='smalltext, errornote'>Some text</span> except that only the latter class is actually set, is there a way that i can have both? My layout contains a vertical navigation bar. It is split up into individual images. I have created a table to organize the sliced images. I am using CSS to create a hover effect. When you mouseover the table cell, the backgroudn changes (and changes back when the mouse is removed.) This is all peachy, but is it possible for me to change the colors of the text within that table cell along with the background. Heres the CSS: Code:
.link_hover1{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:visited{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:hover{
background-image: url("images/link_img_01b.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:active{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
I tired implementing the font-color property. No use. does this have something to do with my 'td' selector? I have a feeling that this is the problem. Hi, I have a series of images that act as hyperlinks to other pages. I want the image border to initially be set to none, but when I rollover the image I want it to turn white, 1px wide. Tried doing this with normal link styles, but it ain't workin. So how do you do this? Thanks mM Hi! Let's say I define this: #gaga.baracuda {......} #haha.baracuda {other info....} Is this allowed? hello all i'm kind of new in CSS, so i'm with some questions regarding the way i can using it. For example, at the moment i d'like to have diferent link colors in the same page. Is it possible? how? I have seen the a:link option but applies only to whole page. thank in advance I've set-up a few link colrs in a style sheet - I see it working in mac IE, and Safari - but not IE in windows. Most of the formatting is being ignored. I'm going to try setting all attributes (link, visited, hover...) for each set but that seems like a reach. any ideas? the link: http://www.eightbyten.com/rc_store/shopcart_test.html the style sheet directly: http://www.eightbyten.com/rc_store/link.css Thanks! I'm trying to set up multiple link style schemes , but it works in IE, not in Firefox? In Firefox in a.link does same as a.intro:link. What do I do, what's wrong? a:link { color: #006600; text-decoration: underline; font-weight: bold; } a:visited { color: #006600; text-decoration: underline; font-weight: bold; } a:hover { color: #FFFFFF; background-color: #66CC00; } a.intro:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; background-color: #000000; } a.intro:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; background-color: #000000; } a.intro:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; background-color: #8DCB2E; } I want to create a schema for different colored links. I'm stumped because I am pretty sure my syntax is correct, but it's not working correctly. I have created a class called "add" but my links in add are still showing up as the default. A portion of my css: Code:
a.add:link{
color: #FFFFFF;
text-decoration: none;
}
a.add:visited {
color: #0000FF;
}
a.add:hover {
color: white;
text-decoration: underline;
}
My link using "add": Code:
<a class="add" onclick="window.open('add_tnosc_password.jsp', 'window_one');" style="cursor:hand">Add</a>
I'm building a site that will have a style sheet that should be applied site wide (main.css) and then some pages will have styles that should only be applied to them (custom<X>.css). Should I use multiple <link> tags to import each stylesheet or should I edit custom<X>.css and add @import "main.css"; to the beginning. Doing this would make the code look cleaner, but will the browser still cache the main.css file? Am I being too persnickety about the look of my code and just use multiple <link>s? Hi people, critique this piece of code for a yellowheader and a blue id and tell me what the problem is. It seems both end up as black <style type="text/css"> h3.Big Bird{color:yellow;}/*Class Font#CookieM{color:blue;}/*Id*/ </style> <h3 class="BigBird">Big Bird</h3> <font Id="CookieM">Cookie Monster</Id> Hope to hear from you soon. kaz heya this doesnt seem to work the second class complety overwrites the first ? id like it to append the second one ? any ideas eg main.css .main-header-back { background-repeat: no-repeat; background-position: 793px 0px; overflow: hidden; } index.php .main-header-back { background-image:url('/images/main/image.gif'); } I've been trying to clean up my code and in the past I never seemed to make use of predefined html element tags like the H1-H6...and instead I just find that I just make a new class but I was wondering if there is anything wrong with using the H-tags in place of a few classes? Obviously it would have to make logical sense to use, but I'm wondering if there has been any changes in how browsers use those tags in the past few years as I wouldn't want to be using an outdated, soon to be phased out element. ok here is the question. i have done two websites, i have tested them out in multiple browsers and all seemed fine. When i test them in IE the text runs into to image. I am using div classes to control the image. Any insight on why this is happening would be greatly appreciated and hints or solutions would be more then welcomed. I am banging my head against a will trying to figure this out. Thankyou All is it possible to use two classes for one element. I want to use two classes for one element I thought perhaps it is possible not to create another class to combine both of them. perhaps there is a form of superclass and subclass in css. Hi all, I have about 10 different titles on my page. I would like to have 10 different colors for each of these titles. Can this be done without having to create classes for each one of them like: .title_one { color: #ffcc00; } .title_two { color: #cc00aa } and so on... Please advise. Thanks. If i set an id to a transition like so: Code:
Code:
<html>
<head>
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
#trans:hover {
opacity:0;
}
</style>
</head>
<body>
<img src="myimage.jpg" id="trans" />
</body>
</html>
Then it works fine, but if i use the class ".trans" instead, it doesnt. Im looking for a way to use a style more than once on a page and classes are the only way i know how to do it. Any help? |
|||||||