Navigation Issue

HTML & CSS
1

I want white color for my main navigation. I coded it and it was fine until I did my footer. I used a list and used a gray color. Now the gray color is showing up on my main navigation when clicked .

Here is my code.

HTML------

<!DOCTYPE HTML>
<html>
 
 <head>
   <title>Next Best Rockfest</title>
 <link rel="stylesheet" type="text/css" href="main.css">
 
 <style type="text/css">
 #header2{
float:left;
width:950px;
height:250px;
background-color: green; 
margin-top: 10px;
margin-bottom: 10px;
background-image: url("images/billboard.jpg");
		
}
 
 
 
 </style>
 
 
 </head>

 
 
 
  <body> 
  
  <!--wrapper beginning-->
    <section id="wrapper">
    
    
    
    
    
   
   
   <!--Header Beginning------------------------------------------------------------------------------------->
<header>
    
 <article id="logo">
 <img src="images/nextbestfest_logo.jpg">
 </article>   
 
 
 
 
 
   <article id="socialmedia">
   <a href="http://www.facebook.com "><img src="images/facebook.png" style="border-width:0;"></a>
   <a href="http://www.twitter.com"><img src="images/twitter.png" style="border-width:0;"></a>
   <a href="http://www.pinterest.com"><img src="images/pinterest.png" style="border-width:0;"></a>
   <a href="http://www.youtube.com"><img src="images/youtube.png" style="border-width:0;"></a>
   
   </article>
   
   
   
 
 
 <nav>
 
 <article id="nav1">
 <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="bands.html">Bands</a></li>
    <li><a href="locations.html">Locations</a></li>
    <li><a href="tickets.html">Tickets</a></li>
    <li><a href="contact.html">Contact</a></li>
 </ul> 

</article>
 </nav>
 
   
   
  
 <section id="header2">
   
   
   
   
   </section>
   
  
  
  
  
  
  
   
   
   
   
    
</header>
    
    <!--Header End--------------------------------------------------------------------------------------------->
    
    
    
    <aside>
    
    jhjk
    
    </aside>
    
    
    
    
    
    
    <!--Main Beginning--------------------------------------------------------------------------------------->
    <section id="main">
    main
    
    
    </section>
    <!--Main end----------------------------------------------------------------------------------------------->
    
    
    
    
    
    
    
    
    
    
    <!--FOOTER BEGINNING---------------------------------------------------------------------------------------->
    
      <footer>
      
      
      
      
      <article id="footernav">
      
 <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="bands.html">Bands</a></li>
    <li><a href="locations.html">Locations</a></li>
    <li><a href="tickets.html">Tickets</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>  
    
    
    
 
      </article>
      
      
      <article id="copy">
      Next Best Fest Copyright 2013
      
      </article>
      
      
      
       <article id="designer">
      Website Designed by Lance Watson
      
      </article>
      
      
      
      
      
      </footer>
       
      <!--FOOTER END--------------------------------------------------------------------------------------------> 
       
       
       
       
       
       
       
       
       
       </section>
      
   </body>   
</html>

—CSS—

@charset "utf-8";
/* CSS Document */

body{
background-image: url("images/crowd_background.jpg");
	
	
	}
/*jhkjhkljkh*/

#wrapper
{
margin: 0 auto;	
width: 955px;
background-color: #ffffff;
padding: 5px 0px 5px 5px;
height: 1000px;

}



header{
float: left;
width: 950px;
background-color: #ffffff;
	
}
	
	
	
#logo{
float: left;
width:320px;	
height:60px;
background-color: #000;	
	
	}
	
	
#socialmedia{
float: right;
width: 150px;
height: 44px;
background-color: ;	
	}	
	


	
nav{
float:left;
width: 950px;
height: 50;
background-color:#000000;	
margin-top: 12px;
	
	}	
	
	
#nav1{
float: left;
width: 950px;
background-color: #000;

	}
	
	


#nav1 ul{
list-style-type: none;	
margin: 0;
padding:0;
overflow: hidden;
	
}

#nav1 li{
float:left;	
	
	}
	

#nav1 a:link,a:visited{
display: block;
width: 137px;
font-weight: bold;
color:#ffffff;
background-color: #000000;
text-align: center;
text-decoration: none;
padding: 10px;
border-right: solid 1px #ffffff;
	}	

#nav1 a:hover, a:active{
background-color:#d33039;	
	
	
	}






	

#header2{
float:left;
width:950px;
height:250px;
background-color: green; 
margin-top: 10px;
margin-bottom: 10px;

		
}


aside{
float: right;
width: 280px;
height: 500px;
background-color:#ddd;	
margin-right: 5px;	
padding: 5px 5px 5px 5px;

	
	
	}
	
	
	
	
	
	
	
	
	
	
#main{
float: left;
width: 645px;
height: 500px;
background-color:#ddd;
padding: 5px 5px 5px 5px;
	
	
	
	
	}	
	
footer{
float: left;
width:945px;	
background-color:#000000;
padding: 5px 5px 10px 0px;	

font-family: arial,georgia,sans-serif; 
font-color:#aaa;	
margin-top: 10px;
	}	
	


#footernav{
float: left;
width: 945px;
background-color: #000;
padding: 5px 0px 0px 5px;
	
	}
	
#footernav ul{
list-style-type: none;	
margin: 0;
padding:0;
overflow: hidden;
	
}

#footernav li{
float:left;	
	
	}


#footernav a:link,a:visited{
display: block;
width: 145px;
font-size:12px;
font-weight: bold;
color: #ccc;
background-color: #000000;
text-align: center;
text-decoration: none;
padding: 5px;

	
	
	}	
	
	
	
#footernav a:hover, a:active{
color:#d33039;	
	
	
	}	
	

#copy{
float: left;
font-family:arial,georgia,sans-serif; 
font-size:10px;
color: #ccc;
border: solid 0px red;
margin: 5px 0px 0px 420px;
	
	
	
}


#designer{
float: left;
font-family:arial,georgia,sans-serif; 
font-size:10px;
color: #ccc;
border: solid 0px red;
margin: 5px 0px 0px 420px;

}
2

It actually works OK in my browser, but be aware that you are making a mistake in your CSS. Instead of writing selectors like this:

#nav1 a:link, a:visited {

}

you need to write them like this:

#nav1 a:link, [COLOR="#FF0000"]#nav1[/COLOR] a:visited {

}

Otherwise, the second rule applies to all links, rather than just to links that are children of #nav1 (the #nav1 part doesn’t apply after the comma). That error appears throughout your CSS.

Please read this thread about posting code samples before posting code again: http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics&p=5406274&viewfull=1#post5406274

3

Until the link in the nav has been clicked and then becomes :visited because as you pointed out visited links have been styled gray here :slight_smile:



#footernav a:link,[B]a:visited[/B]{
display: block;
width: 145px;
font-size:12px;
font-weight: bold;
[B]color: #ccc;[/B]
4

Yes, that’s what I assumed, although, strangely, the link still stayed white in my browser even after being visited. Meh …

5

That’s because you never reached index.html lol :slight_smile:

If you test with # you will see it turn gray.

6

Ah, I see. Thanks. That makes sense. I’d never actually tested that … probably because I hardly ever bother with :visited styles. They just never really floated my boat, though they are handy in Google searches. :slight_smile:

7

There was some talk of removing them [URL=“http://dbaron.org/mozilla/visited-privacy”]a while back as they are a security issue. I believe you can only style “color” in most browsers apart from IE.

8

Huh, thanks Paul. I vaguely remember this topic coming up back then, but forgot all about it again.

9

and changes in color cannot not carry a change in transparency… which annoys me greatly still. :frowning: