Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy Incoherent CSS - HTML left navigation code

    Please have a look to see what I'm doing wrong? I'm at my wits end... The first two menus look nothing like the third including a bullet point and text colour.

    CSS

    /* Left navigation */


    #left_nav{
    margin:0px;
    padding:0px;

    /* turn the following attribute on if you need to position absolutely inside of the left_nav.
    Beware: this will screw up the rollover_color_popouts menu in IE7

    /*position:relative;*/
    height:100%;
    width:189px;
    background:url(../images/template/left_nav_tile.gif) repeat-y left top;
    padding-top:0px;
    }



    #left_nav h3{
    margin:0;
    padding:0;
    width:189px;
    height:35px;
    color:#fff;
    font-size:11px;
    font-family:Arial, Trebuchet MS, Sans serif;
    text-transform:uppercase;
    text-align:left;
    text-indent:1.5em;
    padding-top:.75em;
    font-weight:normal;
    background:url(../images/Template/left_nav_h2.gif) no-repeat left top;
    }


    #left_nav ul{
    list-style:none;
    margin:0px;
    padding:0px;
    padding-bottom:1em;
    padding-left:0em;
    }

    #display_menu_1{
    padding-left:1.5em;
    }

    #display_menu_2{
    padding-left:1.5em;
    }

    #display_menu_3{
    padding-left:1.5em;
    }

    #display_menu_4{
    padding-left:1.5em;
    }


    #left_nav ul li{

    font-family:Tahoma,Arial,Sans Serif;
    font-weight:normal;
    font-size:12px;
    line-height:1.5em;
    }

    #left_nav ul li a{
    color:#946a22;
    text-transform:uppercase;
    background:url(../images/template/left_nav_bullet.gif) no-repeat left center;
    padding-left:1.5em;

    }

    #left_nav div.nav_section{
    padding:0;
    margin:0;
    margin-bottom:1em;
    }


    #display_promotions_999{
    margin-top:2em;
    padding:0px 0px 0px 2em;
    text-align:center;
    width:150px;

    }

    HTML
    <!-- ==================== Left Navigation Menus ==================== -->
    <div id="second_nav" class="nav_section">
    <h3 style="color:Menu2_Title_TextColor; background-color:Menu2_Title_BgColor;">Menu2_Title</h3>
    <div id="display_menu_2">Display_Menu 2</div>
    </div>

    <div id="third_nav" class="nav_section">
    <h3 style="color:Menu3_Title_TextColor; background-color:Menu3_Title_BgColor;">Menu3_Title</h3>
    <div id="display_menu_3">Display_Menu 3</div>
    </div>

    <div id="fourth_nav" class="nav_section">
    <h4 style="color:Menu4_Title_TextColor; background-color:Menu4_Title_BgColor;">Menu4_Title</h3>
    <div id="display_menu_4">Display_Menu 4</div>
    </div>

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Please use the # button to wrap your code in tags when posting code.

    If thats your code above, you already have an error. You dont close your comment where you state this will screw up the rollover.

    /* turn the following attribute on if you need to position absolutely inside of the left_nav.
    Beware: this will screw up the rollover_color_popouts menu in IE7
    Last edited by teedoff; 05-06-2011 at 12:02 AM.
    Teed

  • Users who have thanked teedoff for this post:

    Home-girl (05-08-2011)

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks and sorry, I will delete the code and resubmit comment. I assume, I should put the hash button after every line?

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I should put the hash button after every line?
    Well just match opening a closing comment tags. You can wrap several lines in

    Code:
    /*All your lines here
    more lines here
    even more lines here*/
    Teed

  • Users who have thanked teedoff for this post:

    Home-girl (05-08-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •