Ok. So I am making a site for my boy scout troop and I'm having an issue. I put in a CSS menu that I made and I have a negative margin so that it covers a little of the top of the content section. Problem is that the content section appears on top of the nav bar. Anyone know how to put the content in the back?
My CSS
CODE
body {
margin: 0;
padding: 0;
text-align: center;
color: #404040;
background-color: #006633;
background-image: url(img/bg.jpg);
background-repeat: repeat;
font: small Arial, Helvetica, Verdana, Sans-Serif;
}
#container {
margin: 30px 40px 30px 40px;
padding: 10px;
}
#containerbottom {
margin: 30px 40px 30px 40px;
padding: 10px;
}
#header {
width: 100%;
text-align: left;
}
#sidebar1 {
text-align: center;
float: right;
width: 275px;
padding: 5px;
border-left: 3px solid #404040;
margin: 35px 0 35px 0;
}
#content {
text-align: left;
float: left;
padding: 10px;
margin: 35px;
}
/* Rounded corner box */
.top-left {
background-image: url(img/tl.gif);
height: 15px;
margin-right: 15px;
font-size: 2px;
}
.top-right {
float: right;
background-image: url(img/tr.gif);
height: 15px;
width: 15px;
font-size: 2px;
}
.headcont div {
border-left: 2px solid #E1D4AA;
border-right: 2px solid #E1D4AA;
background-color: #F5F5DC;
padding-left: 10px;
padding-right: 10px;
}
.bottom-left {
background-image: url(img/bl.gif);
height: 15px;
margin-right: 15px;
font-size: 2px;
}
.bottom-right {
float: right;
background-image: url(img/br.gif);
height: 15px;
width: 15px;
font-size: 2px;
}
.bottom {
clear: both;
}
/* End Rounded corner box */
/* Header content */
#header h1 {
padding-right: 30px;
float: right;
color: #404040;
font-size: 400%;
}
#header img {
padding-left: 30px;
}
/* End header content */
/* Navigation */
#navbar
{
text-align: inherit;
width: 100%;
height: 100px;
margin-bottom: -50px;
}
.buttons {
padding: 6px 0;
margin-left: 100px;
width: auto;
height: 50px;
font-size: 150%;
font-weight: bold;
list-style: none;
text-align: right;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
.buttons li {
display: inline;
float: left;
list-style: inline;
text-align: center;
color: #F5F5DC;
width: 125px;
height: 50px;
}
.buttons li a {
padding: 3px 0.5em;
text-decoration: none;
}
.buttons li a:link {
padding-top: 10px;
display: block;
color: #404040;
text-decoration: none;
background-image: url(img/linkbutton.gif);
background-repeat: no-repeat;
width: 125px;
height: 50px;
}
.buttons li a:hover {
padding-top: 10px;
display: block;
color: #404040;
text-decoration: none;
background-image: url(img/hoverbutton.gif);
background-repeat: no-repeat;
width: 125px;
height: 50px;
}
.buttons li a:visited {
padding-top: 10px;
display: block;
color: #F5F5DC;
text-decoration: none;
background-image: url(img/activebutton.gif);
background-repeat: no-repeat;
width: 125px;
height: 50px;
border: none;
}
.bar {
margin-top: -20px;
background-color: #404040;
height: 50px;
width: 100%;
}
/* End Navigation */
/* Content */
.contholder {
background-color: #F5F5DC;
border-left: 2px solid #E1D4AA;
border-right: 2px solid #E1D4AA;
border-top: 2px solid #E1D4AA;
padding: 35px 10px 200px 10px;
margin: auto;
}
.sidebar1 {
background-color: #F5F5DC;
font-size: 120%;
float: right;
text-align: center;
width: 275px;
margin-top: 35px;
margin-bottom: 0;
padding: 0 10px 0 10px;
border-left: 3px solid #404040;
}
.sidebar1 h3 {
font-size: 150%;
}
.content {
background-color: #F5F5DC;
text-align: left;
padding: 10px 10px 30px 10px;
margin: 35px 300px 0 35px;
font-size: 135%;
}
.content h2 {
font-size: 200%
}
.content hr {
width: 100%;
color: #404040;
}
.content p.more {
background-image: url(img/button.gif);
background-repeat: no-repeat;
height: 15px;
margin-left: 20px;
padding-left: 20px;
}
.content p.more a:link, .content p.more a:visited {
text-decoration: underline;
color: #404040;
}
/* End Content */
HTML
CODE
<body>
<div id="container">
<div id="header">
<div class="top-right"></div>
<div class="top-left"></div>
<div class="headcont">
<div>
<h1>Troop 1165 - Halifax PA</h1>
<img src="img/bsalogo.gif" alt="BSA Logo" />
</div>
</div>
<div class="bottom-right"></div>
<div class="bottom-left"></div>
</div> <!-- HEADER -->
</div> <!-- CONTAINER -->
<div id="navbar">
<ul class="buttons">
<li><a href="#">Home</a></li>
<li><a href="#">Activities</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Conduct</a></li>
<li><a href="#">Links</a></li>
</ul>
<div class="bar"></div>
</div> <!-- NAVBAR -->
<div id="containerbottom">
<div id="main">
<div class="contholder">
<div class="sidebar1">
<h3>Scout Law</h3>
<p></p>
<h3>Scout Oath</h3>
<p</p>
<h3>Scout Motto</h3>
<p></p>
<h3>Scout Slogan</h3>
<p></p>
</div>
<div class="content">
<h2> Item One Heading </h2>
<p>Summary of item 1. Say some things.</p>
<p class="more"><a href="#">Read More</a></p>
<hr />
<h2> Item Two Heading </h2>
<p>Summary of item 2. Say some things.</p>
<p class="more"><a href="#">Read More</a></p>
</div>
</div>
<div class="bottom">
<div class="bottom-right"></div>
<div class="bottom-left"></div>
</div>
</div> <!-- MAIN -->
</div> <!-- CONTAINER -->
</body>
1 Jul, 2008 - 05:54 AM
|