MikeyZ Posted April 10, 2014 Share Posted April 10, 2014 (edited) I'm trying to build a website, and I'm having a little trouble with a couple style pieces, and I would like a little help. The problem is that I'm working with conflicting commands, and I need to be able to make one override the other based on the class, but it hasn't worked for me. So, the color theme I had in mind involves a Navigation bar at the top with a light background and a dark color, and the main text is light text on a dark background. Obviously, what link color I pick for the main text is going to be rather faint if I use it on the NavBar, but I don't know how to make a style that applies specifically to links under the Navbar class. Can I get a demonstration please? And would it be easier to do this inline or in the main CSS? Edited April 10, 2014 by MikeyZ Link to comment Share on other sites More sharing options...
davej Posted April 10, 2014 Share Posted April 10, 2014 In a situation like this it would be better for you to provide a link to your page and then describe the problem. Why wouldn't you simply add classes until you can style exactly what you want? Why do you have conflicting styles? http://www.w3schools.com/cssref/css_selectors.asp Link to comment Share on other sites More sharing options...
MikeyZ Posted April 10, 2014 Author Share Posted April 10, 2014 (edited) Well... It's not online but I can show you via Dropbox. *Link'd* Quick explanation of the weird layout, I want to make each subsite with a different color theme, so I'm making the colors in separate CSS pages. You want to look at index.html and color.css. And yeah, it's still under construction. Totally incomplete. The conflicts deal with the link colors. I want to edit the navbar at the top, so it's link colors are darker than the colors on the links showing up in the main article div (Labeled content) I know I'm still working on it I broke something for a test and forgot to fix something... but I'm fixing that part on my own. Please bear with me, I've got a long ways to go. Edited April 10, 2014 by MikeyZ Link to comment Share on other sites More sharing options...
davej Posted April 10, 2014 Share Posted April 10, 2014 Well, you will need to ask small specific questions. Breaking a project into many small files can increase the confusion level. Do not create unnecessary files. Link to comment Share on other sites More sharing options...
MikeyZ Posted April 10, 2014 Author Share Posted April 10, 2014 Yeah, I figured that... But I know that I'm only going to have two CSS documents. The one is just the color theme, too, and I know exactly what the issue is, I just don't know how to solve it. The problem I'm stuck on is the part with the links colors. I need to have a way to have one color of links for the standard theme, and another color theme for the links on the navbar. I know how to use the "a:link" line, but I'm not sure how to make it work with both that and a class. Can I get help with that then? Link to comment Share on other sites More sharing options...
davej Posted April 10, 2014 Share Posted April 10, 2014 Try an enclosing class or id... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>title</title><style>a:link {color:#059;} /* unvisited link */a:visited {color:#095;} /* visited link */a:hover {color:#905;} /* mouse over link */a:active {color:#095;} /* selected link */.nav a:link {color:#f00;} /* unvisited link */.nav a:visited {color:#0f0;} /* visited link */.nav a:hover {color:#990;} /* mouse over link */.nav a:active {color:#999;} /* selected link */</style></head><body><div class="nav"><a href="#1">Navigation Link 1</a><br/><a href="#2">Navigation Link 2</a><br/><a href="#3">Navigation Link 3</a></div><a href="#4">Non-navigation Link 1</a><br/><a href="#5">Non-navigation Link 2</a><br/><a href="#6">Non-navigation Link 3</a></body></html> Link to comment Share on other sites More sharing options...
MikeyZ Posted April 10, 2014 Author Share Posted April 10, 2014 Thank you so much! 8D And yeah, next time I'll clean up my project a lot more. Sorry it was such a mess. If my code is like that, you can imagine what my room is like... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now