Hi All,
I am having some trouble with multiple unordered lists.
My navbar is an ul styled using an id of “list-nav”. I would like to also have an unordered list on another page with bullet points.
In the ul that I want to have bullet points, the li’s are being styled as in the list-nav ul.
I have tried removing the id from the list-nav ul and wrapping it in a div with a class of list-nav, then changing the CSS, but have been unable to get this to work.
I also tried changing the ul to an ol but the li’s remain the same.
Any help is much appreciated.
Here is my code:
CSS:
body {
background-color:#336633;
overflow-y:scroll;
}
h1 {
font-family:garamond;
color:#FFFDD0;
text-align:center;
}
p {
text-align:left;
padding-right:8px;
padding-left:8px;
font-size:17px;
}
div.container {
margin:0 auto;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
background-color:#447744;
text-align:center;
border:1px solid black;
color:#FFFDD0;
width:900px;
}
ul#list-nav
{
list-style-type:none;
margin:0 auto;
padding:0;
width:1025px;
}
li
{
float:left;
background-color:#003300;
padding:5px;
border-right:solid 1px black;
border-top:solid 1px black;
border-bottom:solid 1px black;
}
a
{
display:inline;
width:70px;
padding:10px;
color:#FFFDD0;
text-decoration:none;
text-transform:uppercase;
margin:25px;
}
ul#list-nav li a:hover {
background-color:#336633;
}
p.footer {
font-size:18px;
}
