asgerregsa Posted March 25, 2010 Share Posted March 25, 2010 What's up!I have a problemI am making a website with a navigation bar. The problem is that whenever I am making a regular link they look like the links in the navigation bar.I have tried to make the navigation bar in a #navbar{--Code--}which screwed it up.Here is my CSS : body{background:#888;color:#FFF;}a{color:#000;}a:link, a:visited{color:#000;text-decoration:none;} a:hover{text-decoration:underline;}ul{list-style-type:none;margin:0;padding:0;}a:link,a:visited{display:block;font-weight:bold;color:#FFFFFF;background-color:#000;width:120px;text-align:center;padding:4px;text-decoration:none;}a:hover,a:active{background-color:#FFF;color:#000;} And here is my HTML : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body><li><a href="#index">Home</a></li><li><a href="#index">Home</a></li><li><a href="#index">Home</a></li><li><a href="#index">Home</a></li><a href="#index">Home</a></body></html> If anyone can help me I will be really happyThank youAsger Link to comment Share on other sites More sharing options...
ShadowMage Posted March 25, 2010 Share Posted March 25, 2010 Try making a class instead a.navbar {...styles}a.navbar:hover {...styles}a.navbar:visited {...styles} Then on your links in the navbar you would have something like this<a class='navbar' href='...'>link</a> Link to comment Share on other sites More sharing options...
knystrom18 Posted March 26, 2010 Share Posted March 26, 2010 Try making a class insteada.navbar {...styles}a.navbar:hover {...styles}a.navbar:visited {...styles} Then on your links in the navbar you would have something like this<a class='navbar' href='...'>link</a> First: Double quotes. Example: <a class="navbar" href="...">link</a>You can create any number of link styles on your website from one css document. They just need to have different classes. If you wanted to divided that even further, you could bring id's into the picture but that's just more work.Just to help you out (seeing something I think is much better than reading about it)Some CSS I'm currently using:@charset "utf-8";/* links.css */ul.nav { list-style-type: none; padding-left: 5px;}ul.nav li { display: inline;}/*overall nav links*******************************************************************************************************************//*LoVe + HAte*/ /*TESTING PURPOSES a { border: solid 1px #f00; } */a:link.navLink { font-size: 12px; color: #fff; text-decoration: none; padding: 15px 10px 15px 10px; margin-left: -4px;}a:visited.navLink { font-size: 12px; color: #fff; text-decoration: none; padding: 15px 10px 15px 10px; margin-left: -4px;}a:hover.navLink { font-size: 12px; color: #fff; text-decoration: none; padding: 15px 10px 15px 10px; border-top: solid 4px #06f; margin-left: -4px;}a:active.navLink { font-size: 12px; color: #999; text-decoration: none; padding: 15px 10px 15px 10px; border-top: solid 4px #06f; margin-left: -4px;}/*end overall nav links***************************************************************************************************************//*current nav link********************************************************************************************************************/a:link.navLink#current { font-size: 12px; color: #06F; text-decoration: none; padding: 15px 10px 15px 10px; margin-left: -5px;}a:visited.navLink#current { font-size: 12px; color: #06F; text-decoration: none; padding: 15px 10px 15px 10px; margin-left: -5px;}a:hover.navLink#current { font-size: 12px; color: #fff; text-decoration: none; padding: 15px 10px 15px 10px; border-top: solid 4px #06f; margin-left: -5px;}a:active.navLink#current { font-size: 12px; color: #999; text-decoration: none; padding: 15px 10px 15px 10px; border-top: solid 4px #06f; margin-left: -5px;}/*end current nav link****************************************************************************************************************//*body links**************************************************************************************************************************/a:link.body { font-size: 14px; color: #06F; text-decoration: none;}a:visited.body { font-size: 14px; color: #06F; text-decoration: none;}a:hover.body { font-size: 14px; color: #06f; text-decoration: none; border-bottom: solid 1px #06f;}a:active.body { font-size: 14px; color: #999; text-decoration: none; border-bottom: solid 1px #06f;}/*end body links**********************************************************************************************************************/ Along with the accompanying HTML: <!DOCTYPE HTML><html lang="en"><head><link rel="shortcut icon" href="images/shortIcon.jpg" /><link rel="stylesheet" type="text/css" href="css/divs.css" /><link rel="stylesheet" type="text/css" href="css/general.css" /><link rel="stylesheet" type="text/css" href="css/content.css" /><link rel="stylesheet" type="text/css" href="css/links.css" /><title>Kyle's Portfolio » About</title></head><body> <div class="center"> <div id="shadows"> <div id="allContain"> <header> <a href="index.html"><img src="images/banner2.jpg" alt="« Back Home" /></a> </header> <nav><!--turn this into a php include?--> <div id="navNest"> <ul class="nav"> <li><a href="index.html" class="navLink">Home</a></li> <li><a href="about.html" class="navLink" id="current">About</a></li> <li><a href="services.html" class="navLink">Services</a></li> <li><a href="clients.html" class="navLink">Clients</a></li> <li><a href="contact.html" class="navLink">Contact</a></li> </ul> </div> </nav> ... further down document ... ... known as <a href="http://www.strideclubstudios.com/" target="_blank" class="pgraph">Stride Club Studios.com</a>, and to... Hope this helps! - K Link to comment Share on other sites More sharing options...
ShadowMage Posted March 26, 2010 Share Posted March 26, 2010 First: Double quotes. Example: <a class="navbar" href="...">link</a>Actually it doesn't matter. It will work with both single and double quotes. Link to comment Share on other sites More sharing options...
knystrom18 Posted March 26, 2010 Share Posted March 26, 2010 Actually it doesn't matter. It will work with both single and double quotes.Word. I've always been told to use doubles. I guess singles would be easier though. Don't need to push shift all the time. Link to comment Share on other sites More sharing options...
Synook Posted March 27, 2010 Share Posted March 27, 2010 In SGML, you don't actually need any quotes unless the value has whitespace. http://www.is-thought.co.uk/book/sgml-4.htm#RCSHowever, XML requires double quotes. Link to comment Share on other sites More sharing options...
ShadowMage Posted March 29, 2010 Share Posted March 29, 2010 In SGML, you don't actually need any quotes unless the value has whitespace. http://www.is-thought.co.uk/book/sgml-4.htm#RCSHowever, XML requires double quotes.By "requires" do you mean in order to validate or in order to work at all?XHTML is based on XML right? So if XML requires double quotes why do single ones work and validate? Does XHTML mix and match rules from both SGML and XML? Link to comment Share on other sites More sharing options...
Sami Posted March 31, 2010 Share Posted March 31, 2010 I'm not pro, but I could fix your problem, using "class".instead of using this: a{ code } use this: a.item{ code } Than the links in the menu should be: <a class="item" href="#">Text</a> And normally links will just be: <a href="#">Text</a> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.