SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast mslee's Avatar
    Join Date
    Dec 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a:link visited/active - not working - why? please help

    Please help. For some reason the a:link visited is not working
    I need the background of the link to be black when visited/active and instead it reverts back to original colour - this is annoying because u cant tell what page u are on unless the link is black

    Here is the HTML

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Intranet</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Intranet Home Page"/>
    <meta name="author" content="Leanne Taylor" />
    <meta name="robots" content="index, follow" />
    
    <link href="CSS/layout.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="CSS/links.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    
    <body background="" id="coshh">
    <br></br>
    
    <div id="homewrapper"> 
    <br></br>
    <img src="logo/newlogo.jpg" alt="Logo" title="Logo" width="200" height="160" class="floatImageLeft" />
    
    
    
    <div id="nav">
    <br></br>
    
    <ul>
        <li class="index"><h3><a href="index.html">Home</a></h3></li>
        <li class="accident"><h3><a href="accident.html">Accident</a></h3></li>
        <li class="coshh"><h3><a href="coshh.html">CoSHH</a></h3></li>
    	 <li class="emergency"><h3><a href="emergency.html">Emergency</a></h3></li>
    	 <li class="fire"><h3><a href="fire.html">Fire Prevention</a></h3></li>
    	 <li class="method"><h3><a href="method.html">Method Statements</a></h3></li>
        <li class="riskcon"><h3><a href="riskcon.html">Risk Control Arrangements</a></h3></li>
        <li class="permit"><h3><a href="permit.html">Permit To Work</a></h3></li>
    	 <li class="policies"><h3><a href="policies.html">Policies & Procedures</a></h3></li>
    	 <li class="riskass"><h3><a href="riskass.html">Risk Assessment</a></h3></li>
    	  <li class="sitein"><h3><a href="sitein.html">Site Inspection</a></h3></li>
        <li class="sitepack"><h3><a href="sitepack.html">Site Pack</a></h3></li>
    	 <li class="swine"><h3><a href="swine.html">Swine Flu</a></h3></li>
    	 <li class="temp"><h3><a href="temp.html" >Temporary Works</a></h3></li>
    	<li class="train"><h3><a href="train.html">Training</a></h3></li>
    	 </ul>
    
    </div><!-- nav ends here -->
    
    
    <div id="content">
    
    </div>
    <!-- content ends here -->
    
    
    
    <div id="footer">
    
    </div> <!-- footer ends here -->
    
    </div>
    <!-- wrapper ends here -->
    
    </body>
    </html>
    </html>
    Here is the CSS

    Code CSS:
    #accident .accident a,
    #coshh .coshh a,
    #emergency .emergency a,
    #fire .fire a,
    #method .method a,
    #riskcon .riskcon a,
    #permit .permit a,
    #policies .policies a,
    #riskass .riskass a,
    #sitein .sitein a,
    #sitepack .sitepack a,
    #swine .swine a,
    #temp .temp a,
    #train .train a;{ 
    background-color:#000 !important; /* To override specificity on the page, !important has been added. */
    color:#fff !important;
    ext-decoration:none;
    	}	
     
    #nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
     
    #nav ul li {
    margin: 0 0 10px;
     
     
    }
     
    #nav ul li a {
    border-left: none;
    display: block;
    font-weight: bold;
    text-shadow: none;
    -moz-text-shadow: none;
    -webkit-text-shadow: none;
    text-transform: uppercase;
    padding: 2px 5px;
    }
     
    #nav ul li a:link{
    background-color: #d6e3ec;
    border: 1px solid #000;
    border-left: none;
    color: #000;
    width: 200px;
    border-radius: 0 1em 1em 0;
    }
     
    #nav ul li a:visited {
    color: #000;
    background-color: #d6e3ec;
    }
     
    #nav ul li a:hover{
    position: relative;
    color:#fff;
    background-color:#000;
    width: 200px;
    border-radius: 0 1em 1em 0;	
     
    }
     
    #nav ul li a:active{
    color:#fff;
    background-color:#000;
    text-decoration: none;
    }
     
     ul li a{
     font-family:"Times New Roman", Times, serif;
     font-size: 16px;
     }
    Last edited by cpradio; Mar 4, 2013 at 09:01. Reason: Added [html] and [highlight=CSS] tags

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2012
    Location
    Scarborough, North Yorkshire, United Kingdom
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mslee View Post
    Please help. For some reason the a:link visited is not working
    I need the background of the link to be black when visited/active and instead it reverts back to original colour - this is annoying because u cant tell what page u are on unless the link is black
    You have the background-color of the visited block set to #d6e3ec, do you want that to be black?
    Last edited by Paul O'B; Mar 4, 2013 at 09:04. Reason: tidy up
    Richard
    Resell SSL Certificates - API / WHMCS / HostBill / ClientExec
    ServerTastic - RapidSSL, Geotrust, Thawte, Symantec, SmarterTools and more

  3. #3
    SitePoint Enthusiast mslee's Avatar
    Join Date
    Dec 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if i change the background to black then it is black all the time - what i mean is that i need it to be black only when clicked and on hover too

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mslee View Post
    if i change the background to black then it is black all the time - what i mean is that i need it to be black only when clicked and on hover too
    That isn't what "active" means ... it applies while you're clicking on the link, or activating it using the keyboard. CSS can't tell whether a link is pointing to the current page, so you need to put something in the HTML to tell it, usually something like <li id="current"> and then you can target li#current a {...} to give the styling you want.

    There are other options as well ... if you want to know then just ask, I can't stop now because I'm running 5 minutes laaaaaaaate!

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,511
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You're gonna hate yourself for this...

    Delete the stray semicolon on line 14 of the css
    Code:
    #train .train a;{
    Cheers!


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
  •