Thread: Menu styling

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    2
    Rep Power
    0

    Menu styling


    hi all
    i am trying in vain to get my main menu not to inherit styling from my breadcrumbs menu. the main menu is displaying inline instead of block becuse it is inheriting it from breadcrumbs.
    I've tried classes and various coding for the html and css and now it is all probably very messy but any help is appreciated.
    Thanks
    ezywebz
    PS OK so forum rules prevent me from including the url so here is my code

    [php]

    index.php

    <div id="midwrap">
    <div id="lcol">
    <div id="mainmenu" class="main" ul="">
    <jdoc:include type="modules" name="mainmenu" style="" />
    </div>
    <div id="lcoltmp" <ul="">
    <?php if ($this->countModules( 'lcoltmp' )) : ?>
    <jdoc:include type="modules" name="lcoltmp" style="" />
    <?php endif; ?>
    </div>
    </div>
    <div id="swrap">
    <div id="mcol">
    <div id="crumbs" class="">
    <jdoc:include type="modules" name="crumbs" style="" />
    </div>

    [code]

    CSS

    /* menu */

    #mainmenu {
    padding:5px;
    float: left;
    width:190px;
    font-size:16px;
    }

    #mainmenu ul, li {
    display:block;
    margin-top:30px;
    colorrange;
    border:1px;
    }


    /* breadcrumbs */

    #crumbs {
    padding-left:5px;
    width:100%;
    font-size:14px;
    background:inherit;
    }

    #crumbs ul, li {
    display:inline;
    list-style-type:none;
    padding:0;
    margin:0;
    }
  2. #2
  3. Lord of the Dance
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2003
    Posts
    3,576
    Rep Power
    1906
    Can you post the rendered html, as it is shown in the browser? will make it easier to test using copy/paste.

    You forgot the closing code tags, [ /php] and [ /code] (with no spaces)
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    862
    Rep Power
    275
    Originally Posted by ezywebz
    OK so forum rules prevent me from including the url.....
    You can get around that New User limitation by leaving out the http:// and breaking up the url like so www. example .com /path/to/index-file . It is in force to help stop SPAM, but, can be bypassed (without any repercussions) when needed.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    862
    Rep Power
    275
    Originally Posted by ezywebz
    /* menu */

    #mainmenu ul, li {
    display:block;
    margin-top:30px;
    colorrange;
    border:1px;
    }


    /* breadcrumbs */

    #crumbs ul, li {
    display:inline;
    list-style-type:none;
    padding:0;
    margin:0;
    }
    1. there is no colorrange css property that I know of.
    2. look at the above....in the first, you are actually targeting #mainmenu ul element and ALL <li> items. and the same for breadcrumbs..you are targeting #crumbs ul and ALL <li> items...and since your breadcrumb css is further down the CSS file, you get the "cascade" effect.

    So, what you need to do is change #mainmenu ul, li to #mainmenu ul, #manimenu li .
    And, #crumbs ul, li to #crumbs ul, #crumbs li .

    And, of course, remove colorrange; from #mainmenu{} css.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    2
    Rep Power
    0

    menu styling


    Thankyou so much for taking the time DonR. That worked of course. The colorrange is actually color: orange; but the forum engine interpreted the colon and the o as a smiley.
    I appreciate everyone's help.
    ezywebz
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    862
    Rep Power
    275
    Originally Posted by ezywebz
    The colorrange is actually color: orange; but the forum engine interpreted the colon and the o as a smiley.
    lol...yes, so it was....my bad

IMN logo majestic logo threadwatch logo seochat tools logo