<UL> list problem
Can you help me out please. I have a site I am mocking up and for some reason my ordered list isn't working out. I highlighted the code in red in the HTML file below that I am having problem with. I also put the CSS file below too just in case. I am refering to the HTML that starts with <UL><LI STYLE Also, I would rather have this in the CSS but I can't get it right there either.
Thanks in advance.
HTML:HTML Code:<!DOCTYPE HTML> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Title Here</title> <meta name="description" content="descr"> <meta name="author" content=""> <meta name="robots" content="index, follow"> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div id="mainPicture"></div> <div id="navcontainer"> <ul id="navlist"> <li id="current" style="border:none"> <a href="index.html" shape="rect">Home</a></li> <li><a href="link2.html" shape="rect">Our Products</a></li> <li><a href="link3.html" shape="rect">How to Order</a></li> <li><a href="link4.html" shape="rect">Testimonials</a></li> <li><a href="link5.html" shape="rect">About Us</a></li> <li><a href="link6.html" shape="rect">Contact Us</a></li> </ul> </div> <div class="contentBox"> <div class="innerBox"> <div class="contentText"> <p>With over twenty years experience in kitchen design, fabricating and installations. Our goal is to provide you with a simple and affordable approach to purchasing new cabinetry. </p> <table cellpadding="10px"> <tr> <td style="width: auto;" align="center"> <UL> <LI STYLE="list-style-type: circle"> List Item 1</li> <LI STYLE="list-style-type: circle"> List Item 2</li> <LI STYLE="list-style-type: circle"> List Item 3</li> </UL> <a href="styles.html" id="Styles">View our styles</a></td> </tr> </table> <div style="clear:both;"> </div> </div> </div> </div> </div> <div id="footer">Copyright © 2010 by <a href="link">Company</a> </div></div> </body></html>
CSS:
body {
margin: auto;
background-color : Maroon;
background-repeat : repeat;
max-width : 960px;
}
#mainPicture {
height : 235px;
width : 960px;
background : url(images/KSLogo.jpg) no-repeat;
padding-top: 0px;
margin: 10;
}
#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background: transparent url(images/hmenu.jpg) repeat-x scroll;;
color: #FFF;
width: 100%;
font: normal 100% arial, helvetica, sans-serif;
text-align: center;
}
li { display: inline; }
li a
{
text-decoration: none;
background-color: #990000;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}
li a:hover
{
background-color: #CC0000;
color: #fff;
}
.contentBox {
font-family: sans-serif; color:Maroon; font-size:16px;
clear:both;
}
.innerBox {
background-color : #ffffff;
background-image : url(images/content_back.png);
background-repeat : repeat-y;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom : 1em;
a:link {color: maroon;} /* unvisited link */
a:visited {color: #CC0000;} /* visited link */
a:hover {color: red;} /* mouse over link */
a:active {color: #990000;} /* selected link */
}
.innerBox A {
a:link {color: maroon;} /* unvisited link */
a:visited {color: #CC0000;} /* visited link */
a:hover {color: red;} /* mouse over link */
a:active {color: #990000;} /* selected link */
}
#BBB {
height : 200px;
width : 200px;
background : url(images/BBB.gif) no-repeat;
padding-top: 0px;
margin: auto;
}
a#Styles{
display:block;
width:297px;
height: 200px;
background: url(images/DoorStyles.jpg) no-repeat;
text-indent: -9999px;
margin: auto;
}
#footer {
background : url(images/footer.png) no-repeat;
text-align : center;
font-size : small;
font-family : sans-serif;
color : #000000;
padding-top: 5px;
padding-bottom: 5px;
}
#footer A {
color : #99000;
}
CSS Codes
Reply With Quote
Originally Posted by Beverleyh
Bookmarks