Hi everyone....
I know that I am missing/doing something stupid here. What I am trying to accomplish is getting a container to contain 2 other divs for content. I cannot get the container div located where I want it.
Layout should be:
Header
Nav bar content
Footer
What I am getting is:
Header
Nav bar
content
Footer
Any help or suggestions will be greatly appreciated!
Jim
CSS
HTML
I know that I am missing/doing something stupid here. What I am trying to accomplish is getting a container to contain 2 other divs for content. I cannot get the container div located where I want it.
Layout should be:
Header
Nav bar content
Footer
What I am getting is:
Header
Nav bar
content
Footer
Any help or suggestions will be greatly appreciated!
Jim
CSS
Code:
body {
background-color: #CED4DB;
}
.frame {
margin-left: auto;
margin-right: auto;
width: 760px;
text-align: left;
min-height: 500px;
}
.main {
background-color: #fff;
margin-left: 25px;
margin-right: 25px;
}
.header {
background-color: #5370A3;
margin-left: auto;
margin-right: auto;
height: 110px;
position: relative;
}
.container {
position: relative;
top: 0px;
left: 0px;
float: left;
width: 100%;
min-height: 400px;
border: 3px red solid;
}
.logo {
height: 110px;
width: 250px;
margin-top: 5px;
margin-left: 5px;
position: absolute;
}
.name {
font-family: Times New Roman, Georgia, Serif;
font-size: 40px;
font-weight: 600;
font-style: normal;
text-decoration: none;
color: #ffffff;
float: right;
margin-top: 25px;
margin-left: 275px;
position: absolute;
}
.contentRight {
margin-left: 0px;
margin-top: 0px;
float: left;
}
.contentLeft {
width: 48%;
float: left;
}
.topSpacer {
background-color: #36455F;
color: #fff;
text-align: center;
font-weight:700;
margin-left: auto;
margin-right: auto;
height: 25px;
}
.topSpacer li {
float: left;
}
.navBar {
background-color: #E6E7E6;
width: 100px;
min-height: 425px;
margin-left: 10px;
margin-bottom: 5px;
}
.footer {
background-color: #CED4DB;
height: 25px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
color: #000;
text-align: center;
}
.address {
font-size: 12px;
text-align: left;
width: 125px;
margin-left: 15px;
margin-top:-175px;
position: relative;
float:left;
}
<!-- Navigation Bar Styles -->
#navcontainer {
margin-left: 10px;
width: 125px;
padding: 0;
margin-bottom: 1em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #E6E7E6;
font-weight: bold;
color: #000;
}
#navcontainer ul {
list-style: none;
margin-left: 0;
padding: 0;
border: none;
}
#navcontainer li {
border-bottom: 0px;
margin: 0;
}
#navcontainer li a {
display: block;
padding: 5px 5px 5px 5px;
background-color: #E6E7E6;
color: #000;
text-decoration: none;
width: 150px;
}
html>body #navcontainer li a {
width: auto;
}
#navcontainer li a:hover {
border-left: 10px solid #E6E7E6;
border-right: 10px solid #E6E7E6;
background-color: #E6E7E6;
color: #000;
}
#navcontainer li li {
border-top: 0;
border-bottom: 0;
margin: 0;
}
#navcontainer li li a {
display: block;
padding: 5px 5px 5px 20px;
background-color: #E6E7E6;
color: #000;
text-decoration: none;
}
#active {
padding-left: 10px;
}
<!-- Menu Styles -->
#menu {
background: #E6E7E6;
list-style: none;
margin: 0;
padding: 0;
width: 140px;
}
#menu li {
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#menu a {
background: #E6E7E6;
border-bottom: 1px solid #393939;
color: #E6E7E6;
display: block;
margin: 0;
text-decoration: none;
font-weight:normal;
}HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html lang="en" xml:lang="en" xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Waynesboro Heritage Foundation</title>
<meta content="text/html; charset=unicode" http-equiv="Content-Type"/>
<meta name="description" content="The Waynesboro Heritage Foundation is a registered 501(C)(3) corporation dedicated to preserving the history and artifacts of the city of Waynesboro Virginia."/>
<meta name="keywords" content="Waynesboro Virginia, Waynesboro Heritage, Waynesboro, Civil War, Shenandoah Valley"/>
<meta name="copyright" content="Waynesboro Heritage Foundation, Inc."/>
<meta name="author" content="Waynesboro Heritage Foundation, Inc."/>
<meta name="Distribution" content="Global"/>
<meta name="Rating" content="General"/>
<meta name="Robots" content="INDEX,FOLLOW"/>
<link rel="StyleSheet" type="text/css" href="css/basic.css" media="screen"/>
</head>
<body>
<div class="main">
<div class="header">
<span class="logo">
<img border="0" alt="Waynesboro Heritage Foundation Logo" src="images/logo_W.jpg" width="250" height="100"/> </span>
<span class="name">Waynesboro Heritage Foundation</span>
</div>
<div class="topSpacer">420 W. Main St. P.O. Box 517 Waynesboro, Va., 22980 phone/fax: (540) 943-3943 Email: museum@ntelos.net </div>
<div class="navBar">
<div id="navcontainer">
<ul id="menu">
<li class="active" value="0">
<a href="index.html" target="_self">Home</a> </li>
<li value="0">
<a href="merchandise.html" target="_self">Shop WHF</a> </li>
<li value="0">
<a href="donations.html" target="_self">Donate</a> </li>
</ul>
</div>
</div>
<div class="container">
<div class="contentLeft">This is a test This is a test This is a test </div>
<div class="contentRight">This is a test This is a test This is a test </div>
</div>
<div class="footer">Copyright © 2010 Waynesboro Heritage Foundation </div>
</div>
</div>
</div>
</body>
</html>