Results 1 to 4 of 4

Thread: "Visited" state link

  1. #1
    Join Date
    Sep 2007
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default "Visited" state link

    Hello!

    I'm trying to set a different color (let's say #cccccc) for the "visited" state of these links.
    For some reason I'm unable to. Can you please help? Thanks!

    Here's my CSS code:

    #navigation {
    position:absolute;
    left:100px;
    top:252px;
    width:451px;
    height:130px;
    z-index:2;
    }
    #navlist {
    margin: 0; /*removes indent IE and Opera*/
    padding: 0; /*removes indent Mozilla and NN7*/
    list-style-type: none; /*turns off display of bullet*/
    }
    #navlist a, #navlist a:visited {
    display: block;
    padding: 8px 2px 2px 20px;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    color: #00a0dc;
    text-decoration: none;
    }
    #navlist a:hover, .selected {
    color:#000000
    }
    #navlist a.selected {
    color:#000000;
    }

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You have the same color for the visited and the unvisited links so you wont see any difference.

  3. #3
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    As mentioned above, change:

    #navlist a, #navlist a:visited {
    display: block;
    padding: 8px 2px 2px 20px;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    color: #00a0dc;
    text-decoration: none;
    }

    to:


    #navlist a{
    display: block;
    padding: 8px 2px 2px 20px;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    color: #00a0dc;
    text-decoration: none;
    }

    #navlist a:visited {
    color:#cccccc
    }

  4. #4
    Join Date
    Feb 2008
    Posts
    63
    Thanks
    2
    Thanked 8 Times in 8 Posts

    Default

    seems to me you have this navigation as a list and i'm not sure what .selected means but the code below is a snippet of css for navigation using lists.
    Code:
    #nav li {
    	padding: 3px 5px 3px 10px;
    	margin-left: 0px;
    	font-size: 0.9em;
    	font-weight: bold;
    	line-height: 120%;
    	list-style-type: none;
    }
    #nav li a:link, #nav li a:visited {
    	display: block;
    	color: #ffffff;
    	font-weight: bold;
    	line-height: 120%;
    	font-size: 0.9em;
    	padding: 3px 5px 3px 10px;
    	margin-left: 0px;
    	text-decoration: none;
    }
    #nav li a:hover, #nav li a:focus {
    	color: #000033;
    	font-size: 0.9em;
    	font-weight: bold;
    	line-height: 120%;
    	padding: 3px 5px 3px 10px;
    	margin-left: 0px;
    	text-decoration: none;
    	background-color: #CCD9FF;
    }
    #nav li a.current{
    	background-color: #CCD9FF;
    	color: #000033;
    }
    I've always put "li" after the "#nav" and I don't see where you have done that.
    I know I probably have duplicate code in each for text decoration and I'm still cleaning that up. In your first bit of code
    Code:
    #navlist a, #navlist a:visited {
    display: block;
    padding: 8px 2px 2px 20px;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    color: #00a0dc;
    text-decoration: none;
    }
    you are calling for both visited and not visited. you need to split out the "a" and the "a:visited". Remember to keep the lvha order to the links in your code. Link, Visited, Hover and Active.
    Hope this helps.
    SAndy K

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
  •