SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Current class being overwritten

    I can't get my Current page font to work.


    For some reason this part is overriding it

    #MainNav ul li a{
    text-decoration:none;
    display:inline;
    padding:10px 15px;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    color:#666666;


    }





    /* Main Nav */


    #Navigation {
    width:100%;
    margin:0 auto;
    border-bottom:thin solid #999;
    padding-top:9px;
    padding-bottom:9px;

    }

    #NavigationContainer {
    width:1024px;
    margin:0 auto;
    }






    #MainNav ul{
    list-style-type:none;
    display:inline;





    }


    #MainNav ul li{
    display:inline;
    font-size:16px;
    font-weight:bold;
    margin-right:2px;
    line-height:100%;

    }



    #MainNav li{
    display:inline;
    font-weight:100;
    margin-right:25px;



    }


    #MainNav ul li a{
    text-decoration:none;
    display:inline;
    padding:10px 15px;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    color:#666666;


    }





    #MainNav ul li a:hover{
    background-color:#48af71;
    color:#FFFFFF;

    }

    .CurrentPage {
    background-color:#48af71;
    color:#FFFFFF;

    }

    .CurrentPage {
    background-color:#48af71;
    color:#FFFFFF;

    }





    <div id="Navigation">

    <div id="NavigationContainer">

    <div id="MainNav">

    <ul>
    <li> <a href="Tools.html" class="CurrentPage" title="Tools" target="_self">Admin pages</a></li>
    <li> <a href="Tools.html" title="Tools" target="_self">My workspace</a></li>
    <li> <a href="Tools.html" title="Tools" target="_self">Marketing</a></li>
    <li> <a href="Tools.html" title="Tools" target="_self">Post Office</a></li>

    </ul>

    </div><!--MainNav-->

    </div><!--NavigationContainer-->

    </div><!--Navigation-->

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You haven't given us a lot to go on here. What exactly isn't working the way you want?

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't get the font to become white using the .CurrentPage class.

    The font for this, "<li> <a href="Tools.html" class="CurrentPage" title="Tools" target="_self">Admin pages</a></li>"

    remains grey because of this

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Ah, OK. This is an issue of CSS specificity. You need to change this:

    Code:
    .CurrentPage {
      background-color:#48af71;
      color:#FFFFFF;
    }

    to this

    Code:
    #MainNav ul li a.CurrentPage {
      background-color:#48af71;
      color:#FFFFFF;
    }

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks this stumped me for a long time and now its working perfect!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    No probs! Specificity is really key to CSS. It's why I use IDs very sparingly, as they are quite hard to override, as you now see. Does this mean your other question about slanted lines next to menu items has been left behind?

  7. #7
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No. You answered the slanted line question pretty good, but I still have issues and need to get back that. This is a different nav. I'll respond to that other one soon. thx


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
  •