Log in

View Full Version : Resolved <UL> list problem


mlegg
01-24-2011, 04:11 AM
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:
<!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 &copy; 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;
}
Beverleyh
01-24-2011, 12:56 PM
Have you got a link to the page so we can see why it isnt working? (just saying "it isnt working" isnt very descriptive - say why it isnt working and what you're trying to achieve for more help)
mlegg
01-24-2011, 01:10 PM
OK here is the page
only the index.html is new, the rest of the site is an older style.

Currently I have this where I want the list

<p style="text-align: left;"><strong>* Available Nationwide<br>* Factory Direct Cabinetry<br>* Truly Unbeatable Pricing<br>* Shipping Included In Pricing<br>* Limited Lifetime Warranty<br>* Free Computer Design<br>* No Pressure Sales<br>* No Phony Gimmicks</strong></p>
Beverleyh
01-24-2011, 01:19 PM
Side-by-side comparisons would be nice...

I havent got time to reconstruct your code from the first post but I'm guessing you want to "float" the <li> items so they sit on a horizontal line?

Try adding "float:left;" to your li CSS.
mlegg
01-24-2011, 01:34 PM
That link is what I made and put up. I am trying to change this HTML


<p style="text-align: left;"><strong>* Available Nationwide<br>* Factory Direct Cabinetry<br>* Truly Unbeatable Pricing<br>* Shipping Included In Pricing<br>* Limited Lifetime Warranty<br>* Free Computer Design<br>* No Pressure Sales<br>* No Phony Gimmicks</strong></p>

to make it become an Unordered list with circle bullets rather than using the asterisk * I have now.
Beverleyh
01-24-2011, 03:12 PM
OK, so as previous suggested;

... to "float" <li> items so they sit on a horizontal line ... Try adding "float:left;" to your li CSS

And also add "list-style-type:circle;" to your ul CSS for the bullet.

You've already got the HTML for a list so I guess you're OK there.
mlegg
01-24-2011, 03:32 PM
OK I am confused here, sorry.


OK, so as previous suggested;

... to "float" <li> items so they sit on a horizontal line ... Try adding "float:left;" to your li CSS
And also add "list-style-type:circle;" to your ul CSS for the bullet.

My li in the CSS in in my #navcontainer area. I don't want to mess up my nav/menu bar.

so is my ul under the #navcontainer area. Do I have to add new code to the .innerBox { part of the CSS to fix both of these? :confused:



You've already got the HTML for a list so I guess you're OK there.

OK
Beverleyh
01-24-2011, 03:53 PM
I think this illustrates how a clearer description from the start would have been better to avoid confusion.

If I'm now following correctly;

Dont use float in CSS as that floats items next to each other.
Just code an HTML list instead of the paragraph with breaks and put "list-style-type:circle;" in the CSS for the ul - this will change the bullet.

Or you can use the style="" attribute to change the button "inline" by putting it directly in the ul tag.