SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menus and Sub-Menus all the same font & size?

    Hi all,

    At http://joomlatest.chrisbartlett.net/ I am building a test site. Almost done. See the top menu? It's Garamond in its font. I did that by adding:
    Code:
    #header ul,
    #header ul.menutop li,
    #header ul.menutop li a{
    font-family: garamond, georgia, monotype corsiva, calibri;
    padding:0;
    height:auto;
    }
    The green was never there before. Well, that made the top part garamond (Home, Governance, etc), but not any and all sub-menus. :-( I've tried a few things to no avail. I'm assuming the sub-menus are currently Arial, Times, or some default, and I'm also assuming that's what the top menus were before I added what I added. What can I do to get them all Garamond? Also, is there anything expressly defining the font-size? Certainly nothing I did...

    Here's the entire CSS file:
    Code:
    /* CORE */
    
    .menutop,.menutop * {margin:0;padding:0;}
    .menutop {float:left;position:relative;padding-bottom:2px;}
    .menutop li {list-style:none;position:relative;width:100%;height:25px;float:none;}
    .menutop li a.item {cursor:pointer;}
    .menutop li span.item {cursor:default;outline:none;}
    .menutop li .item {display:block;float:left;display:block;margin:0;height:25px;line-height:25px;}
    .menutop li li .item, 
    .menutop li .item, .menutop li.active li .item {display:block;margin:0;text-decoration:none;float:none;}
    .menutop li .fusion-submenu-wrapper, .menutop li ul {float: none;left: -999em;position: absolute;z-index: 500;}
    .menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;}
    .menutop li:hover ul, .menutop li.sfHover ul {top: 0;}
    .menutop li li {position:relative;float:none;}
    
    /* Drop Downs */
    .menutop ul {width:175px;position:relative;}
    
    /* Level 1 */
    .menutop li .item {
    text-decoration:none;
    display:block;
    padding:0 15px;
    background:#ddd;
    border-color:#eee #ccc #ccc #eee;
    border-style:solid;
    border-width:1px;
    color:#333333;
    text-decoration:none;
    }
    
    .level1 .f-mainparent-itemfocus .item {
    background:#ccc 100% 100% no-repeat;
    border-color:#ddd #bbb #bbb #ddd;
    border-style:solid;
    border-width:1px;
    }
    
    .menutop li:hover > .item {
    background-color:#ccc;
    border-top:1px solid #ddd;
    border-left:1px solid #ddd;
    border-right:1px solid #bbb;
    border-bottom:1px solid #bbb;
    }
    
    .menutop li:hover > .daddy:hover {
    background-image:url(../images/top-light.png);
    background-position: 100% 100%;
    }
    
    /* Level 2 */
    .menutop .level2 li > .item {
    background:#ccc;
    border-color:#ddd #bbb #bbb #ddd;
    border-style:solid;
    border-width:1px;
    }
    
    .menutop .level2 li:hover > .daddy, .menutop .level2 li > .daddy {
    background-image:url(../images/level2-parent.png);
    background-position:100% 50%;
    background-repeat:no-repeat;
    }
    
    .menutop .level2 .f-menuparent-itemfocus .item, .menutop .level2 li:hover .item {
    background:#bbb;
    border-color:#ccc #aaa #aaa #ccc;
    color:#333;
    }
    
    .menutop .level2 .f-menuparent-itemfocus .daddy, .menutop .level2 li:hover .daddy {
    background-image:url(../images/level3-parent.png);
    background-position:100% 50%;
    background-repeat:no-repeat;
    }
    
    
    /* Level 3 */
    .menutop .level3 li > .item {
    background:#bbb;
    border-color:#ccc #aaa #aaa #ccc;
    border-style:solid;
    border-width:1px;
    }
    
    .menutop .level3 li:hover > .daddy, .menutop .level3 li > .daddy {
    background-image:url(../images/level3-parent.png);
    background-position:100% 50%;
    background-repeat:no-repeat;
    }
    
    .menutop .level3 .f-menuparent-itemfocus .item, .menutop .level3 li:hover .item {
    background:#aaa;
    border-color:#bbb #999 #999 #bbb;
    color:#333;
    }
    
    .menutop .level3 .f-menuparent-itemfocus .daddy, .menutop .level3 li:hover .daddy {
    background-image:url(../images/level4-parent.png);
    background-position:100% 50%;
    background-repeat:no-repeat;
    }
    
    /* Level 4 */
    .menutop .level4 li > .item {
    background:#aaa;
    border-color:#bbb #999 #999 #bbb;
    border-style:solid;
    border-width:1px;
    }
    
    .menutop .level4 li:hover > .daddy, .menutop .level4 li > .daddy {
    background-image:url(../images/level4-parent.png);
    background-position:100% 50%;
    background-repeat:no-repeat;
    }
    
    .menutop .level4 .f-menuparent-itemfocus .item, .menutop .level4 li:hover .item {
    background:#999;
    border-color:#aaa #888 #888 #aaa;
    color:#333;
    }
    
    /* regular hover
    .menutop li:hover .item:hover, .menutop li.active .item:hover  {
    background-color:#2c87c0;
    border-top:1px solid #138fdc;
    border-left:1px solid #138fdc;
    border-right:1px solid #0d5f92;
    border-bottom:1px solid #0d5f92;
    color:#fff
    }
     */
    .menutop li:hover .daddy:hover, .menutop ul li.active:hover > .daddy:hover {
    background-image:url(../images/hover-parent.png);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    }
    
    /* seperator hover */
    .menutop span.item:hover,
    .menutop li:hover span.item:hover {
    background-color:#666;
    border-top:1px solid #777;
    border-left:1px solid #777;
    border-right:1px solid #555;
    border-bottom:1px solid #555;
    color:#fff
    }
    
    .menutop li:hover span.daddy:hover {
    background-image:url(../images/sep-parent.png);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    }
    
    /* Root Items */
    .menutop li.root {width:auto;float:left;height:30px;} 
    .menutop li.root > .item {float:left;width: auto;height:30px;line-height:30px;}
    .menutop li.root:hover > .daddy:hover {
    background-image:url(../images/top-light.png);
    background-position: 100% 100%;
    }
    
    .menutop li.root > .daddy, .menutop li.root:hover > .daddy {
    background-image: url(../images/top-dark.png);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    }
    
    /* Active Items 
    .menutop li.active > .item {
    background-color:#EE501C;
    border-color:#F86134 #D24916 #D24916 #F86134;
    color:#fff;
    } */
    
    .menutop li.active > .daddy {
    background-image:url(../images/active-parent.png);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    }
    
    .menutop li.root.active > .daddy, .menutop li.root.active:hover > .daddy {
    background-image:url(../images/top-light.png);
    background-position: 100% 100%;
    }
    
    
    /* No JS */
    .menutop li:hover > .fusion-submenu-wrapper, .menutop li:hover > ul {left:175px;top:0;}
    .menutop li.root:hover > .fusion-submenu-wrapper, .menutop li.root:hover > ul {top:32px;left:0;}
    .menutop li:hover ul, 
    .menutop li.sfHover ul {left: 0;top:32px;}
    .menutop ul {width:175px;}
    .menutop li li:hover > ul, .menutop li li.sfHover > ul {left:175px;top: 0;}
    
    .menutop .level2 li {position:relative;float:left;width:100%;}
    
    /* Fusion Pill */
    .fusion-pill-l {height: 35px;margin:0 0 0 12px;top:6px;width:50px;position:absolute;left:0;}
    .fusion-pill-r {margin-left: -12px;height: 35px;}
    
    /* Fusion JS */
    .fusion-js-container {
    display:block;
    height:0;
    left:0;
    overflow:visible;
    position:absolute;
    top:0;
    z-index:600000!important;
    background:transparent !important;
    }
    
    .fusion-js-subs {
    display:none;
    margin:0 0 0 -2px;
    overflow:hidden;
    padding:0 2px;
    position:absolute;
    }
    
    #header ul,
    #header ul.menutop li,
    #header ul.menutop li a{
    font-family: garamond, georgia, monotype corsiva, calibri;
    padding:0;
    height:auto;
    }
    #header ul.menutop li a,
    #header ul.menutop li.active a{
    padding:0 5px;
    height:auto;
    }
    .fusion-js-subs li{
    text-align:left;
    padding:0;
    }
    .fusion-js-subs li a{
    padding:0 5px!important;
    }
    
    #header ul li a {
    font-weight: bold;
    }
    Thanks!

    Chris

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    When I can't figure out something like this ill use !important to find which rule I need to target. Now that you have the rule then work on writing it so its more specific so overrules the other. Something like ul li li a {}

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    #header ul,
    #header ul.menutop li,
    #header ul.menutop li a{
    font-family: garamond, georgia, monotype corsiva, calibri;
    padding:0;
    height:auto;
    }

    Change this to:

    Code CSS:
    #header ul,
    #header ul.menutop li,
    #header ul.menutop li a,
    ul,
    ul.menutop li,
    ul.menutop li a {
    font-family: garamond, georgia, monotype corsiva, calibri;
    padding:0;
    height:auto;
    }

    I'm sure it's not the best solution but it's an workaround until i can look at it properly. The dropdown menu item's aren't located in the #header so they aren't picking up the styles you set on the top level nav items.

  4. #4
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried your edit, Dan. No change. :-(

  5. #5
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Worldbuilder View Post
    Tried your edit, Dan. No change. :-(
    I checked and you had put an '#' infront of the ul's i added. Leave the ul's bare as they are an element not an ID.

    You would add a '#' infront of something in css when you have defined it as an ID in your html In this case the 3 ul's i added aren't in an ID so don't need to be prefixed by one

  6. #6
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally, I did not have the #s. When that didn't work, I added them (for fun, but i know you're right). Didn't work either way. :-(

  7. #7
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OH WAIT! It worked! MY bad. Sorry!

    You won't believe this... I had forgotten to add the comma to the end of the 3rd line of code, before starting your additional code. THANKS!

  8. #8
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Worldbuilder View Post
    OH WAIT! It worked! MY bad. Sorry!

    You won't believe this... I had forgotten to add the comma to the end of the 3rd line of code, before starting your additional code. THANKS!
    Ha It's no problem like i said i'm sure it's not the best fix but it does the job for the time being


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
  •