...

View Full Version : Incoherent CSS - HTML left navigation code



Home-girl
05-05-2011, 11:27 PM
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>

teedoff
05-05-2011, 11:51 PM
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

Home-girl
05-06-2011, 10:53 AM
Thanks and sorry, I will delete the code and resubmit comment. I assume, I should put the hash button after every line?

teedoff
05-06-2011, 02:02 PM
I should put the hash button after every line?

Well just match opening a closing comment tags. You can wrap several lines in


/*All your lines here
more lines here
even more lines here*/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum