SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Location
    Grand Rapids, Michigan, USA
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation Issue

    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------

    Code:
    <!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---
    Code:
    @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;
    
    }
    Last edited by ralph.m; Sep 11, 2013 at 01:04. Reason: added code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    #nav1 a:link, a:visited {
    
    }
    you need to write them like this:

    Code:
    #nav1 a:link, #nav1 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/show...=1#post5406274

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It actually works
    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

    Code:
    #footernav a:link,a:visited{
    display: block;
    width: 145px;
    font-size:12px;
    font-weight: bold;
    color: #ccc;

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Until the link in the nav has been clicked and then becomes :visited
    Yes, that's what I assumed, although, strangely, the link still stayed white in my browser even after being visited. Meh ...

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, that's what I assumed, although, strangely, the link still stayed white in my browser even after being visited. Meh ...
    That's because you never reached index.html lol

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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That's because you never reached index.html lol

    If you test with # you will see it turn gray.
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    There was some talk of removing them a while back as they are a security issue. I believe you can only style "color" in most browsers apart from IE.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Huh, thanks Paul. I vaguely remember this topic coming up back then, but forgot all about it again.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    and changes in color cannot not carry a change in transparency... which annoys me greatly still.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •