Hello everyone,
I’ve validated both my HTML and CSS, but can’t figure out how to shift my nav bar up so that it butts against the bottom of my header DIV (containing the wheat field image).
View my test site here.
My CSS is below. I’m not sure if the problem lies in my NAV DIV or the unordered list inside the NAV DIV.
Any tips would be much appreciated.
Thank you very much.
ubuntucss
__________________________________________________
body {
background-color: #996; /* light khaki */
font-family: Arial, Verdana, Georgia;
font-size: 12pt;
color: #000; /* black */
margin: 0;
padding: 0;
}
#wrapper {
width: 960px;
background-color: #90BD90; /* spruce */
margin: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#header {
background-image: url('wheatfield.jpg');
background-repeat:no-repeat;
width: 960px;
height: 135px;
margin: 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav {
background-color: #FFFF00; /* yellow */
width: 960px;
height: 2px;
}
#nav ul {
padding-left: 0;
margin-left: 0;
background-color: #036;
color: #fff;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#nav ul li {
display: inline;
}
#nav ul li a {
padding: 0.2em 1em;
background-color: #036;
color: #fff;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
ul #navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a { padding: 6px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
#content {
background-color: #D41B6A; /* cherry */
width: 675px;
float: left;
padding: 5px;
}
#content img {
margin: 10px;
}
#sidebar {
background-color: #F3F1C2; /* light wheat */
width: 200px;
float: right;
margin-bottom: 25px;
}
#sidebar a {
text-decoration: none;
}
#sidebar h3 {
margin-left: 10px;
}
#sidebar a:link {
color: #104F9F; /* royal blue */
text-decoration: none;
}
#sidebar a:visited {
color: #EF1818; /* red */
text-decoration: none;
}
#sidebar a:hover {
color: #FFB073; /* flat orange */
text-decoration: none;
}
#sidebar a:active {
color: #62914C; /* olive green */
text-decoration: none;
}
#sidebar li {
list-style: none;
}
#footer {
background-color: #BEBD77; /* khaki */
clear: both;
width: 960px;
height: 135px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#footer p {
padding: 10px;
}
#footer img {
border: none;
margin-left: 10pt;
}
.leftfloat {
float: left;
margin:0 5px 0 0;
}
.rightfloat {
float: right;
margin:0 0 5px 0;
}