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
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

CSS question

  • 19-04-2014 1:23pm
    #1
    Smartly Dressed
    Registered Users, Registered Users 2 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

  • #2
    miralize
    Registered Users, Registered Users 2 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


  • #3
    KonFusion
    Registered Users, Registered Users 2 Posts: 2,588 ✭✭✭KonFusion


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


  • #4
    Smartly Dressed
    Registered Users, Registered Users 2 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