Jump to content

Every link looks like the navigation bar!


asgerregsa

Recommended Posts

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

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>

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

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...