Lists are probably my biggest downfall i cant lie i am awful at them! But i have a few lists i tend to copy over and over again to use for other pages on our websites so here are those lists
Regular old fashion list with no list style type
#productsselectionlistlighting ul
{
padding:0px;
margin-left:43px;
margin-top:0px;
padding-top:10px;
padding-bottom:10px;
margin-bottom:0px;
list-style-type:none;
}
/*controls all the lists for each product*/
#productsselectionlistlighting ul li
{
width:250px;
text-align:left;
}
<div id="productsselectionlistlighting">
<ul class="verdana12pxcolor666">
<li>Casts light up to 100 feet away</li>
<li>Comes with a year's supply of bulbs</li>
<li>Environmentally friend so buy it</li>
</ul>
</div>
A cooler looking regular list on top of a image (and not a background image)
Basically its one line on top, 2 links underneath the top one and 1 link under the 2 links and its all centered.
/*controls the links position for howard contracts*/
.contractlinkshighered
{
margin-top:-65px;
margin-left:100px;
}
/*controls the list (state and local, fedearl,education, public safety) that appears on the image search contracts*/
#contractsforhigheredu
{
list-style-type:none;
line-height: 15px;
color: #003399;
padding:0px;
margin:0px;
}
<img src="image" border="0" id="the4bannersforindexiefix"/>
<div class="contractlinkshighered">
<ul id="contractsforhigheredu" >
<li> <a class="arialwhite12boldunderline" href="">State & Local</a></li>
<li><a class="arialwhite12boldunderline" href="">Federal</a> <a class="arialwhite12boldunderline" href="">Education</a></li>
<li> <a class="arialwhite12boldunderline" href="">Public Safety</a></li>
</ul>
</div>
Horizontal list for like a list of links.I made this one useing images in mind but you could use the same thing for non-images.
/*controls the technology,medical,lighting etc side of the top navigation*/
#tech
{
margin-left:8px;
float:left;
display:inline; /*required by IE6*/
width:530px;
}
/*Controls the word technology when not hovering*/
.technology2
{
/*padding-right:5px;*/
width:95px;
height:33px;
/*background:url(/images/Howardheader/tech.png) no-repeat center center;*/
}
/*Controls the word medical when not hovering*/
.medical2
{
/*padding-right:5px;*/
width:66px;
height:33px;
/*background:url(/images/Howardheader/medical.png) no-repeat center center;*/
}
/*Controls the word lighting when not hovering*/
.lighting2
{
/*background:url(/images/Howardheader/light.png) no-repeat center center;*/
/*padding-right:5px;*/
width:68px;
height:33px;
}
/*Controls the word power when not hovering*/
.power2
{/*
background:url(/images/Howardheader/power.png) no-repeat center center;*/
/*padding-right:5px;*/
width:53px;
height:33px;
}
/*Controls the word transportation when not hovering*/
.transportation2
{
/*background:url(/images/Howardheader/transport.png) no-repeat center center;*/
/*padding-right:5px;*/
width:118px;
height:33px;
}
.munidot
{
/*background:url(/images/Howardheader/transport.png) no-repeat center center;*/
/*padding-right:5px;*/
width:82px;
height:33px;
}
/*Controls the navigations position for technology, medical, power etc*/
#navigation ul
{
height:33px;
width: 500px;
padding:0px;
margin:0px;
list-style:none;
display: block;
overflow:hidden;
}
/*Controls the navigations position for technology, medical, power etc*/
#navigation ul li
{
float: left;
}
<div id="tech">
<div id="navigation">
<ul>
<li>
<a href="" />
<img src="techroll.gif" class="technology2" border="0">
</a>
</li>
<li>
<a href=""/>
<img src="medical.png" class="medical2" border="0" >
</a>
</li>
<li>
<a href=""/>
<img src="light.png" class="lighting2" border="0">
</a>
</li>
<li>
<a href=""/>
<img src="power.png" class="power2" border="0">
</a>
</li>
<li>
<a href=""/>
<img src="transport.png" class="transportation2" border="0">
</a>
</li>
<li>
<a href=""/>
<img src="munidot.png" class="munidot" border="0">
</a>
</li>
</ul>
</div>
</div>
