Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

CSS question

Options
  • 19-04-2014 2:23pm
    #1
    Smartly Dressed
    Registered Users Posts: 555 ✭✭✭


    I'm trying to style an HTML page using CSS.

    I have 2 different link styles but I cannot get them independent of each other.

    In my case, the styling for the footer links overrides every other link style, even though I have tried to differentiate them.

    I know this is a basic question but I just cannot wrap my head around it.

    [HTML]<div id="nav">
    <ul class="menu">
    <li class="mainmenu"><a href="#">Home</a></li>
    <li class="mainmenu"><a href="#">Privacy</a></li>
    <li class="mainmenu"><a href="#">Ethics</a></li>
    <li class="mainmenu"><a href="#">Cases</a></li>
    <li class="mainmenu"><a href="#">Contact</a></li>
    </ul>
    </div>
    <div id="footer">
    <ul class="footmenu">
    <li class="bottommenu"><a href="#">Home</a></li>
    <li class="bottommenu"><a href="#">Ethics</a></li>
    <li class="bottommenu"><a href="#">Privacy</a></li>
    <li class="bottommenu"><a href="#">Cases</a></li>
    <li class="bottommenu"><a href="#">Contact</a></li>
    </ul>
    </div>
    [/HTML] 
    .mainmenu a:link, a:visited {
    display: block;
    float: left;
    width: 100px;
    margin-left: 40px;
    min-height: 40px;
    font-weight:bold;
    text-align: center;
    padding-top: 20px;
    color:#A9B0B3;
    background-color:#3A415A;
    text-decoration: none;
}

.mainmenu a:hover, a:active {
    background-color: #566981;
}

.footmenu a:link, a:visited {
    color: #34344E;
    text-align: center;
    text-decoration: none;
}

.footmenu a:hover, a:active {
    color: #CBDAD5;
}


Comments

  • Options
    #2
    miralize
    Registered Users Posts: 6,207 ✭✭✭miralize


    .mainmenu a:link, .mainmenu a:visited {
    display: block;
    float: left;
    width: 100px;
    margin-left: 40px;
    min-height: 40px;
    font-weight:bold;
    text-align: center;
    padding-top: 20px;
    color:#A9B0B3;
    background-color:#3A415A;
    text-decoration: none;
    }

    .mainmenu a:hover, .mainmenu a:active {
    background-color: #566981;
    }

    .footmenu a:link, .footmenu a:visited {
    color: #34344E;
    text-align: center;
    text-decoration: none;
    }

    .footmenu a:hover, .footmenu a:active {
    color: #CBDAD5;
    }

    The second selectors need to be refrenced the same as the first e.g .mainmenu a, .mainmenu a:active


  • Options
    #3
    KonFusion
    Moderators, Education Moderators, Technology & Internet Moderators Posts: 2,588 Mod ✭✭✭✭KonFusion


    Can you throw an example on http://jsfiddle.net/ ?


  • Options
    #4
    Smartly Dressed
    Registered Users Posts: 555 ✭✭✭Smartly Dressed


    miralize wrote: »
    The second selectors need to be refrenced the same as the first e.g .mainmenu a, .mainmenu a:active

    This seems to have fixed it. Thanks for that - saved me a lot of frustration!
    KonFusion wrote: »
    Can you throw an example on http://jsfiddle.net/ ?

    Weirdly, when I ran it on JSfiddle, the links were styled as I had intended. However, when I previewed the exact same code in my browser, I landed with the aforementioned problem. I guess it's just the sensitivity of the script that can lead to different results in different browsers and systems.


Advertisement