PDA

View Full Version : unordered lists from listamatic



Katketch14
Sep 18th, 2010, 04:21 AM
Im new at this and copied code from listamatic for a horizontal navigation bar. When I tried to create another completely separate unordered list, it displays it inline. Isn't the navigation within its own div? Why does my new list inherit the inline display & how do I correct this? Thank you!!!

HTML:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="revelationid.html" id="current">Home</a></li>
<li><a href="whyrevid.html">Why Revelation ID?</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
</div>

CSS:
#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: #0d4461;
color: #FFF;
width: 100%;
text-align: center;
}

li { display: inline; }

li a
{
text-decoration: none;
background-color: #0d4461;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}

li a:hover
{
background-color: #369;
color: #fff;
}

DrDOS
Sep 18th, 2010, 06:32 AM
Where it says

li and

li a

change that to

#navlist li and

#navlist li a

to distinguish your li's from theirs. And give your ul's an id too if you are styling them differently.