I think you are right. Thank you!
I'm brand new to css, still learning how to construct style sheet, then call it from body of html via tag.
I'm still using the nested ol:
<style type="text/css">
body {
background-image:
url('images/bg22.jpg');
background-attachment: fixed;
}
OL { list-style: decimal }
OL OL { list-style: lower-alpha }
OL OL OL { list-style: lower-roman }
</style>
I don't know how to convert this to my style sheet. but I'm getting there.
My new layout.css
Code:
/* Layout Stylesheet */
body{
margin: 0; padding:0;
background: #808080; color: #333333;
}
#button {
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #808080;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #DDDDDD;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #4B4B4B;
border-right: 10px solid #508fc4;
background-color: #666666;
color: #000000;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #646464;
border-right: 10px solid #C0C0C0;
background-color: #969696;
color: #242424;
}
#lh-col{
position: absolute;
top: 20px;
left: 20px;
width: 180px;
border: 1px solid #333333;
background: #c0c0c0;
color: #333333;
margin: 0;
padding: 0;
height: 500px;
z-index: 2;
}
#rh-col{
position: absolute;
top: 20px;
right: 20px;
width: 180px;
border: 1px solid #333333;
background: #c0c0c0;
color: #333333;
margin: 0;
padding: 0;
height: 500px;
z-index: 1;
}
#c-col{
position: relative;
margin: 20px 201px 20px 201px;
border: 1px solid #333333;
background: #E8E8E8 ;
color: #333333;
padding: 20px;
z-index: 3;
}