Grow your CSS skills. Land your dream job.

Help with css link code – Solved

  • # July 2, 2012 at 7:55 pm

    Have following code not acting appropriately (new to css and actively studying and learning) – Could somebody diagnose why visited link on left hand navigation bar is now staying white??

    code as follows:

    #mainconatiner {
    background-color: white;
    color: black;
    width: 100%;
    height: 640px;
    position: relative;
    }

    #topmainheader {
    background-color: white;
    color: black;
    font-family: verdana, sans-serif;
    width: 100%;
    height: 120px;
    position: absolute;
    top:0px;
    }

    #labelcontainer {
    background-color: white;
    color: #364355;
    width: 100%;
    height: 30px;
    position: absolute;
    top:120px;
    }

    #toplabel {
    background-color: white;
    border: 1px solid black;
    color: #364355;
    margin: auto;
    padding: 5px;
    font-family: verdana, sans-serif;
    font-size:16px;
    font-weight:bold;
    }

    #topnav {
    background-color: #364355;
    color: white;
    font-family: verdana, sans-serif;
    font-size:12px;
    font-weight:bold;
    width: 100%;
    height: 40px;
    position: absolute;
    top:150px;
    }

    #topnav ul {
    margin:0px;
    padding:0px;
    list-style-type:none;
    margin-left:130px;
    }

    #topnav ul li {
    display:inline;
    height:30px;
    float:left;
    }

    #topnav li a:link,a:visited {
    display:block;
    font-weight:bold;
    color: white;
    background-color:#364355;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    }

    #topnav li a:hover,a:active {
    background-color:#7E2217;
    }

    #leftcolumn {
    background-color: #364355;
    color: white;
    font-family: verdana, sans-serif;
    font-size:12px;
    font-weight:bold;
    width: 120px;
    margin-bottom: 10px;
    position: absolute;
    top:190px;
    left:0px;
    }

    #leftcolumn ul {
    list-style-type:none;
    margin:0;
    padding:0;
    }

    #leftcolumn a:link,a:visited {
    display:block;
    font-weight:bold;
    color: white;
    background-color:#364355;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    }

    #leftcolumn a:hover,a:active {
    background-color:#7E2217;
    }

    #rightcolumn {
    background-color: white;
    color: black;
    font-family: verdana, sans-serif;
    font-size:12px;
    text-align:justify;
    margins: auto;
    position: absolute;
    top:190px;
    left:125px;
    right:10px;
    }

    #rightcolumn a:link,a:visited {
    font-weight:bold;
    color: black;
    background-color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    }
    #rightcolumn a:hover {
    font-weight:bold;
    color: #364355;
    background-color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    }

    #bottomcr {
    background-color: #364355;
    color: white;
    font-family: verdana, sans-serif;
    font-size:9px;
    width: 100%;
    height: 40px;
    position: absolute;
    top:600px;
    left: 0px;
    }
    That is stylesheet in its entire fashion (besides comments at top)

    Thanks in advance

    # July 2, 2012 at 8:33 pm

    Specificity doesn’t carry between selectors separated by commas. In other words, rather than doing something like #topnav li a:link,a:visited, you’ll need to use #topnav li a:link,#topnav li a:visited

    # July 2, 2012 at 8:35 pm

    Thank you so much!!! Solved.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".