I want the <div id="navigation"column to be the same color all the way to
the bottom. The "background-image: url(bg_menu_tile.gif);" was a try to
force it with a long 1-pixel graphic - didn't work. Any ideas?
Here's the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="top">
<p><img src="logo.gif"></p>
</div>
<div id="values">
<div id="values1"><img src="value1.gif"></div>
<div id="values2"><img src="value2.gif"></div>
<div id="values3"><img src="value3.gif"></div>
<div id="values4"><img src="value4.gif"></div>
</div>
<div id="content">
<h3>Here to help</h3>
</div>
<div id="navigation">
<ul id="mainnav">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>
<div id="footer">Copyright © 2006</div>
</div>
</body>
</html>
here's the css:
/* CSS Document */
body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: center;
}
#wrapper {
text-align: left;
width: 800px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
padding: 20px 0 0 0;
background-image: url(top.gif);
background-repeat: repeat-x;
background-position: left top;
border-top: 2px solid #722100;
border-left: 2px solid #722100;
border-right: 2px solid #722100;
border-bottom: 2px solid #722100;
}
#top {
height: 4em;
padding: 5px 0px 0px 5px;
}
#values {
border-top: 1px solid #778899;
border-bottom: 1px solid #FFF;
height: 5em;
}
#values1, #values2, #values3, #values4 {
float: left;
color: #FFFFFF;
padding: 5px;
height: 5em;
width: 189px;
margin-right: 1px;
}
#values1 {
background-color: #FFFFCC;\
}
#values2 {
background-color: #FFFFCC;
}
#values3 {
background-color: #FFFFCC;
}
#values4 {
background-color: #FFFFCC;
width: 190px;
margin-right: 0;
}
#content {
background-color: #FFFFFF;
width: 580px;
float: right;
padding: 0px 10px 0 0;
font-size: 12px
}
#content h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #B54B27;
}
#navigation {
float: left;
width: 180px;
background-image: url(bg_menu_tile.gif);
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
width: 180px;
border-bottom: 1px solid #ED9F9F;
margin: 0;
padding: 0;
font-size: 80%;
vertical-align: bottom;
}
#navigation a:link, #navigation a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 1px solid #722100;
border-right: 1px solid #722100;
/* background-color: #D3D2B6;*/
color: #000000;
text-decoration: none;
}
#navigation a:hover {
background-color: #B54B27;
color: #FFFFFF;
}
#navigation ul.subnav {
margin-left: 12px;
}
#navigation ul.subnav li {
border-bottom: 1px solid #722100;
width: 168px;
}
#navigation .subnav a:link, #navigation ul.subnav a:visited {
background-color: #661200;
color: #722100;
}
#footer {
clear: both;
padding: 10px 0 10px 255px;
font-size: 70%;
color: #AAAAAA;
background-color: transparent;
}
