New Topic/Question
Reply
My CSS
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
<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>
MultiQuote
| 