1 reply [Last post]
cire3621
Offline
Regular
Last seen: 10 years 44 weeks ago
Timezone: GMT-6
Joined: 2011-03-18
Posts: 11
Points: 13

I am fairly new to CSS, but I understand I need to specify which list style to use within the parent DIV, but I have tried everything I know to do. I am either getting the list style to apply to everything on the page or its not showing up at all. I have 2 navigation menu's that are inheriting the list style I am trying to apply only to the main page content. I have tried separating it from the rest of the page with both class and ID, but I am pretty sure I am missing something. I am trying to add an image in place of the bullets on my products page, but it is applying to everything when I do it...

CSS

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	background-color: #ffffff;
	margin: 0 0 40px 0;
	padding: 0px;
	font-size: 100%;
}
#tagline {
	background-color: #ffffff;
	margin: 0 0 32px;
	padding: 2px 0;
	border-bottom: 1px dotted #000;
	min-width: 942px;
}
#tagline h1 {
	font-size: 0.7em;
	letter-spacing: 1em;
	color: #FFF;
	background-color: #CC0000;
	padding: 12px 0px 12px 32px;
	text-transform: uppercase;
}
#header {
    float: right;
    margin-bottom: 0;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    text-align: right;
    width: 545px;
}
#sitenav {
    font-size: .85em;
    height: 14px;
    margin-bottom: 8px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 2;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 545px;
}
 
#sitenav {
}
 
* + html body #sitenav {
  font-size: 0.9em;
}
 
* html body #sitenav {
  font-size: 0.9em;
}
 
#sitenav li {
  margin-right: 8px;
  list-style-type: none;
  padding-right: 8px;
  border-right: 1px solid rgb(204,
    204, 204);
  float: right;
}
 
#sitenav li.nospace {
  margin-right: 0pt;
  padding-right: 0pt;
  border-right: medium none;
}
 
#sitenav li a {
  color: rgb(102, 102, 102);
  text-decoration: none;
}
 
#sitenav li a:hover {
  color: rgb(62, 61, 192);
  text-decoration: underline;
}
 
#header h1 {
	font-size: 0.7em;
	letter-spacing: 1em;
	color: #000000;
	background-color: #ffffff;
	padding: 12px 0px 12px 32px;
	text-transform: uppercase;
}
/*
Layout Width
*/
#outer {
	border: 5px solid #CC0000;
	padding: 2px;
	width: 940px;
	margin: 0 auto;
}
/*
Available Width
940 - 40 = 900
*/
#inner {
	background-color: #000;
	padding: 20px;
}
#p7PMM_1 {
	width: auto;
	margin: 0 0 16px 0;
	font-size: 0.8em;
	position: relative;
	z-index: 9999;
}
/*Special PMM2 rules for using a second PMM2 menu in your sidebar*/
.sidebarbox .p7PMMv15 {
	width: auto;
	margin: 0 0 2px 0;
	font-size: 0.8em;
	position: relative;
	z-index: 9999;
}
.sidebarbox .p7PMMv15 ul div {
	display: none;
	padding-left: 2px;
}
.sidebarbox .p7PMMv15 ul ul div {
	padding-left: 0px;
}
#masthead {
	overflow: hidden;
	margin-bottom: 20px;
}
#masthead img {display: block;}
#contentwrapper {
	background-color: #FFF;
	background-image: url(img/p7spep_sbleft.jpg);
	background-repeat: repeat-y;
	background-position: -324px 0px;
}
.clearfloat {
	clear: both;
	height: 0;
	line-height: 0;
}
/*
Floated Columns
680 + 200 + 20 = 900
*/
.maincolumn {
	float: right;
	width: 624px;
}
.sidebarwrapper {
	float: right;
	width: 256px;
	margin: 10px;
}
.maincontent {
	padding: 24px 32px;
	font-size: .8em;
	line-height: 1.5em;
}
h1, h2 {
	margin: 0px;
	font-size: 1.2em;
	letter-spacing: 0.35em;
}
h2 {
	margin: 36px 0 0 0;
}
.sidebarbox {
	padding: 2px;
	margin: 0 0 10px 0;
}
.sidebar, .sidebar2 {
	color: #D5D1CE;
	background-color: #CC0000;
	padding: 16px;
	font-size: .7em;
	line-height: 1.4em;
}
.sidebar2 {
	color: #000;
	background-color: #e8e7e3;
}
/*Links*/
.maincontent a {}
.maincontent a:visited {}
.maincontent a:hover {}
.sidebar a {
	color: #4AB0C6;
}
.sidebar a:visited {
	color: #4AB0C6;
}
.sidebar a:hover {
	color: #FFF;
}
.sidebar2 a {
	color: #FFF;
}
.sidebar2 a:visited {
	color: #FFF;
}
.sidebar2 a:hover {
	color: #000;
}
.footercolumn1 a {
	color: #4AB0C6;
}
.footercolumn1 a:visited {
	color: #4AB0C6;
}
.footercolumn1 a:hover {
	color: #FFF;
}
.footer {
	overflow: hidden;
	font-size: 0.7em;
	color: #A09B97;
	margin-top: 20px;
	background-image: url(img/p7spep_vrule.gif);
	background-repeat: repeat-y;
	background-position: 504px 0px;
}
.footercolumn1 {
	float: left;
	width: 498px;
	margin-right: 30px;
}
.footercolumn2 {
	float: left;
	width: 370px;
}
.footer p {
	margin: 1px 0 12px 0;
}
.footercolumn2 a {
	color: #C0C0C0;
	text-decoration: none;
	display: block;
	padding: 6px 6px;
	border: 1px solid #333;
	background-color: #161616;
}
.footercolumn2 a:hover {
	color: #000;
	background-color: #CC0000;
	border-color: #FFF;
}
.footercolumn2 ul {
	margin: 0;
	padding: 0;
}
.footercolumn2 li {
	margin-bottom: 6px;
	list-style-type: none;
}
/*
EXTRA STYLES for BASIC MENUBAR
*/
#menubar {
	width: 100%;
	overflow: hidden;
	font-size: 0.8em;
	margin-bottom: 20px;
}
#menubar .menu {
	margin: 0px;
	padding: 0px;
}
#menubar .menu li {
	list-style-type: none;
	float: left;
	margin-left: 6px;
}
#menubar .menu li.first {
	margin-left: 0;
}
#menubar .menu a {
	color: #CCC;
	text-decoration: none;
	display: block;
	padding: 12px;
	border: 1px solid #666;
}
#menubar .menu a:hover {
	color: #000 !important;
	border-color: #6DC0D1 #000 #000 #6DC0D1;
	background-color: #4AB0C6;
}

PRODUCTS HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Haarmeyer Electric, Inc</title>
<link href="p7spepper/p7spepper02.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<style>
#inner, #contentwrapper, .footer ul a {zoom: 1; height: 1%; overflow: visible;}
.sidebarwrapper {display: inline; width: 194px;}
</style>
<![endif]-->
<!--[if IE 6]>
<style>
.sidebarwrapper {width: 200px;}
</style>
<![endif]-->
<script type="text/javascript" src="p7mbm/p7MBscripts.js"></script>
<link href="p7mbm/p7MBM02h.css" rel="stylesheet" type="text/css" media="all" />
<link href="p7mbm/p7MBM02v.css" rel="stylesheet" type="text/css" media="all" />
<link href="p7irm/p7IRM01.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7irm/p7IRMscripts.js"></script>
 
</head>
 
<body>
 
 
 
<div id="header">
 
<ul id="sitenav">
				<li class="nospace"><a href="http://shop.haarmeyerelectric.com">Online Store</a></li>
				<li><a href="contact.html">Contact Us</a></li>
				<li><a href="careers.html">Careers</a></li>
				<li><a href="generator-rental.html">Generator Rentals</a></li>
	            <li><a href="products.html">Product Lines</a></li>
                <li><a href="services.html">Services</a></li>
  </ul>
 
<form target="_blank" action="http://www.google.com/search" method="get">
 
<input type="text" value="" maxlength="255" size="31" name="q">
<input type="submit" value="Google Search">
</form>
</div>
 
<div id="tagline">
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="Images/haarmeyerlogo2.png" width="201" height="107"/>
  <h1>Haarmeyer Electric, INC</h1>
</div>  
 
    <div class="p7mb_clearfloat"></div>
</div>
<div id="outer">
  <div id="inner">
    <div id="menubar">
        <li class="first">
          <div id="p7MBM_3" class="p7MBM02h">
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="services.html">Our Services</a></li>
              <li><a href="products.html">Product Lines</a></li>
              <li><a href="generator-rental.html">Generator Rentals</a></li>
              <li><a href="careers.html">Careers</a></li>
              <li><a href="contact.html">Contact Us</a></li>
              <li><a href="http://shop.haarmeyerelectric.com">Online Store</a></li>
            </ul>
            <!--[if lte IE 6]>
<style>.p7MBM02h a {height:1%;float:left;} .p7MBM02h, .p7MBM02h li {height:1%;}</style>
<![endif]-->
            <script type="text/javascript">
<!--
P7_MBop('p7MBM_3',1,0,-164,0,0,-40,350,250,1,1);
//-->
            </script>
            <div class="p7mb_clearfloat">&nbsp;</div>
          </div>
      </ul>
    </div>
    <div id="masthead">
      <div id="p7IRM_1" class="p7IRM01">
        <div id="p7IRMow_1" class="p7IRMowrapper">
          <div id="p7IRMw_1" class="p7IRMwrapper">
            <div id="p7IRMdv_1" class="p7IRMdv"><a class="p7IRMlink" id="p7IRMlk_1" href="generator-rental.html" title="Industrial Generator Rentals"><img class="p7IRMimage" src="p7spepper/img/masthead-gens-whiteblacknew.jpg" alt="masthead-gens-whiteblacknew" name="p7IRMim_1" width="900" height="145" id="p7IRMim_1" /></a></div>
            <div id="p7IRMdsw_1" class="p7IRMdesc_wrapper">
              <div class="p7IRMdesc_close"><a id="p7IRMdsclose_1" href="javascript:;" title="Hide Description"><em>Hide</em></a></div>
              <div id="p7IRMds_1" class="p7IRMdesc">&nbsp;</div>
            </div>
            <div id="p7IRMdsopw_1" class="p7IRMdesc_open_wrapper">
              <div id="p7IRMdsop_1" class="p7IRMdesc_open"><a id="p7IRMdsopen_1" href="javascript:;" title="Show Description"><em>Show</em></a></div>
            </div>
          </div>
        </div>
        <ul id="p7IRMlist_1" class="p7IRMlist">
          <li><a href="p7spepper/img/masthead-gens-whiteblacknew.jpg">masthead-gens-whiteblacknew</a>
              <div class="p7irm_link"><a href="generator-rental.html">Industrial Generator Rentals</a></div>
            <div class="p7irm_desc">
              <center>
                  <bold>INDUSTRIAL GENERATOR RENTALS</bold>
                </center>
            </div>
          </li>
          <li><a href="p7spepper/img/masthead-solid-black.jpg">masthead-solid-black</a></li>
        </ul>
        <!--[if IE 5.000]>
<style>.p7IRMdesc_wrapper {position:static !important;visibility:visible !important;}.p7IRMdesc_open_wrapper, .p7IRMdesc_close {display: none;}.p7IRMpaginator {position: static !important;height: 3em;}.p7IRMpaginator li, .p7IRMpaginator a {float: left !important;}.p7IRMpaginator a {float: left !important;overflow: visible !important;}</style>
<![endif]-->
        <!--[if lte IE 6]>
<style>.p7IRMpaginator a {width: auto !important;}</style>
<![endif]-->
        <!--[if lte IE 7]>
<style>.p7IRMpaginator li {display: inline !important;margin-right: 3px !important;}.p7IRMpaginator {zoom: 1;}</style>
<![endif]-->
        <script type="text/javascript">P7_opIRM('p7IRM_1',1,1,1,8000,5000,1,0,1,1,1500,1,0);</script>
</div>
    </div>
    <div id="contentwrapper">
      <div class="maincolumn">
        <div class="maincontent">
          <h1>Products</h1><br><br>
     <ul>    
    <li>ALLEN-BRADLEY Panels and Overloads</li><br>
    <li>ACSR</li><br>
    <li>BUSSMAN Fuses and Fuse Blocks</li><br>
    <li>CROSSARMS (Treated)</li><br>
    <li>CROUSE-HINDS Fittings and Lighting</li><br>
    <li>CUTLER-HAMMER Controls and Safety Switches, Dry Type and Control Transformers, Panels</li><br>
    <li>GALVAN Ground Rods and Connectors</li><br>
    <li>JOSLYN Arresters and Hardware</li><br>
    <li>KEARNEY Fuses</li><br>
    <li>LITTLEFUSE Fuses with Blown Fuse Indicator</li><br>
    <li>LUFKIN Utility Poles and Treated Racks</li><br>
    <li>MURPHY Switches (Pressure, Level, and Vibration)</li><br>
    <li>PRYSMIAN Wire and Cables</li><br>
    <li>Programmable Controllers (IDEC, GE-FANUC, ALLEN BRADLEY, SCADAPACK)</li><br>
    <li>Sheaves, Hubs and Bando Belts</li><br>
    <li>Screens (Uniop Exor) HMI</li><br>
    <li>TECH TOP Electric Motors</li><br>
    <li>WORLD WIDE Electric Motors</li><br>
    </ul>
 
 
        </div>
      </div>
      <div class="sidebarwrapper">
        <div class="sidebarbox">
          <div class="sidebar">
            <div id="p7MBM_1" class="p7MBM02v">
              <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="services.html">Our Services</a></li>
                <li><a href="products.html">Product Lines</a></li>
                <li><a href="generator-rental.html">Generator Rentals</a></li>
                <li><a href="careers.html">Careers</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="http://shop.haarmeyerelectric.com">Online Store</a></li>
              </ul>
              <!--[if lte IE 6]>
<style>.p7MBM02v li, .p7MBM02v li a {height: 1%;}</style>
<![endif]-->
              <script type="text/javascript">
<!--
P7_MBop('p7MBM_1',1,0,0,0,-300,0,300,200,1,1);
//-->
              </script>
</div>
            <h3>sidebar</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue   tristique eros. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id,   mattis id, sapien. Nullam adipiscing enim dapibus felis. Fusce a nisi in odio   pulvinar fringilla. Nunc blandit interdum metus. Duis leo nunc, sollicitudin ut,   fermentum congue, pharetra eu, massa</p>
          </div>
        </div>
        <div class="sidebarbox">
          <div class="sidebar2">
            <h3>sidebar</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue   tristique eros. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id,   mattis id, sapien. Nullam adipiscing enim dapibus felis. Fusce a nisi in odio   pulvinar fringilla. Nunc blandit interdum metus. Duis leo nunc, sollicitudin ut,   fermentum congue, pharetra eu, massa</p>
          </div>
        </div>
      </div>
      <div class="clearfloat">&nbsp;</div>
    </div>
    <div class="footer">
      <div class="footercolumn1">
        <p>&copy; 2009 Project Seven Development</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue   tristique eros. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id,   mattis id, sapien. Nullam adipiscing enim dapibus felis. Fusce a nisi in odio   pulvinar fringilla.</p>
      </div>
      <div class="footercolumn2">
        <ul>
          <li><a href="#">Footer Link 1</a></li>
          <li><a href="#">Footer Link 2</a></li>
          <li><a href="#">Footer Link 2</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

If you just want to target

If you just want to target list items in your main content area it'll be either .maincolumn li or .maincontent li.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference