greencommunity
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<title>Community</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*Structure of this Stylesheet:
I - all main boxes
II - defining the #top content
III - defining the #content content
IV - defining the #right sidebar
*/
body{
background: #9C0;
margin: 0;
padding: 0;
font: 12px "Verdana",sans-serif;
text-align: center;
line-height: 1.7em;
color: #000;
}
#content{
background: #FFF url(greencommunity-images/topleft.gif) no-repeat top left;
padding: 10px;
}
#footer{
text-align: center;
}
#left{
float: left;
width: 610px;
background: #9C0;
}
#main{
margin: 20px auto;
text-align: left;
width: 780px;
background: #FFF;
}
#right{
float: right;
width: 170px;
background: #FFF url(greencommunity-images/topleft.gif) no-repeat top left;
}
#top{
margin: 10px 0 0 10px;
width: 600px;
background: #5F5F5F url(greencommunity-images/toptopleft.gif) no-repeat top left;
color: #F5F5F5;
}
/*Configuring the -top-box */
#top dd{
margin: 0;
}
#top a{
color: #F5F5F5;
border-bottom: 1px #F5F5F5 dotted;
padding:1px 10px 0px 5px;
margin: 1px 0 0 10px;
text-decoration: none;
}
#top a:hover{
border-bottom: 1px #F5F5F5 solid;
}
#top .left{
float: left;
width: 280px;
margin: 10px 0 0 10px;
background: url(greencommunity-images/top-bg.gif) repeat-y top right;
}
#top .right{
float:right;
width: 275px;
margin: 10px 10px 0 0;
}
#topbottom{
clear: both;
background: url(greencommunity-images/toptopbottom.gif) bottom right no-repeat;
height: 10px;
}
/* just the c#content box*/
h2{
font: normal normal 1.5em "Georgia",serif;
color: #000;
text-decoration: none;
background: url(greencommunity-images/h2.gif) top left no-repeat;
padding: 3px 0 0 8px;
}
h3{
font: normal normal 1em "Georgia",serif;
text-transform: uppercase;
text-indent: 2em;
margin: 7px 0 2px 0;
}
#headline{
background: url(greencommunity-images/header.jpg) no-repeat top left;
width: 590px;
height: 90px;
position: relative;
}
#headline h1{
position: absolute;
bottom: 5px;
right: 5px;
color: #FFF;
margin: 0;
padding: 0;
text-decoration: none;
font: normal normal 2.2em "Trebuchet MS","Arial",sans-serif;
}
p{
text-indent: 1.3em;
margin: 0 0 5px 0;
padding: 0;
}
/* sidebar */
#inner{
padding: 0 10px;
}
form{
margin: 0;
padding: 0 0 30px 0;
border-bottom: 1px #999 solid;
}
form input{
background: #F5F5F5;
border: 0;
border-bottom: 1px #EFEFEF dotted;
}
form label{
font-family: "Georgia",serif;
}
form .button{
background: #FFF;
border-bottom: none;
cursor: pointer;
}
form a{
font-family: "Georgia",serif;
}
h5{
background: url(greencommunity-images/nav-h.gif) center left no-repeat;
font: 1.5em "Arial",sans-serif;
padding-left: 25px;
margin: 7px 0 3px 3px;
}
.nav{
margin: 2px;
padding: 0;
}
.nav li{
display: inline;
list-style-type: none;
}
.nav li a{
display: block;
background: #EFEFEF;
padding: 1px 1px 1px 5px;
margin: 1px;
text-decoration: none;
color: #000;
}
.nav li a:hover{
padding-left: 2px;
border-left: 3px #9C0 solid;
}
</style>
</head>
<body>
<div id="main">
<div id="left">
<div id="top">
<dl class="left">
<dt>latest news</dt>
<dd><a href="http://www.free-css.com/">Update 5 - now having a board</a></dd>
<dd><a href="http://www.free-css.com/">Update 4 - at least in color</a></dd>
<dd><a href="http://www.free-css.com/">Update 3 - coming out of beta</a></dd>
</dl>
<dl class="right">
<dt>latest posts</dt>
<dd><a href="http://www.free-css.com/">Topic 3 - what's OSWD?</a></dd>
<dd><a href="http://www.free-css.com/">Topic 2 - what kind of music?</a></dd>
<dd><a href="http://www.free-css.com/">Topic 1 - welcome to the board</a></dd>
</dl>
<div id="topbottom"> </div>
</div>
<div id="content">
<div id="headline">
<h1>your community › site one</h1>
</div>
<h2>Informations</h2>
<h3>about this design</h3>
<p>This design was produced in less than 5 hours on a rainy afternoon. Its thought as a community layout but feel free to modify it for an other type of website. You shouldn't have any problems with diffrent machines and browsers because it's valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0 transitional</a> and CSS 2. Verdana and Georgia are used as the main-fonttypes, except them only Arial is used. The text is displayed in 12px, Verdana, left-aligned and with an line-hieght of 20px (1,7em).</p>
<h3>the stylesheet</h3>
<p>The Cascading StyleSheet is structured in a special way. At the top you'll find the definitions for all the main boxes which keep the layout in form. Under that you can find the definition for dark-gray 'latest'-box. In all these catergories the items again ordered alphabetically. The 3<sup>rd</sup> category is for the elementsin the #content-container. At last there you can find the definitions for the sidepanel.</p>
<h3>using it</h3>
<p>This template is published at OpenSourceWebDesigns, so you're allowed to modify and use every part of this design.</p>
<h2>Lorem Ipsum</h2>
<h3>Part one</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h3>Part two</h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<h3>part three</h3>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div id="right">
<div style="background: url(greencommunity-images/topright.gif) no-repeat top right; height: 10px;"> </div>
<div id="inner">
<form action="http://www.free-css.com/" method="post">
<label for="name">Name:</label>
<input type="text" size="10" name="name" id="name" />
<label for="pw">Password:</label>
<input type="password" size="10" name="pw" id="pw" />
<div style="text-align: right;"><a href="http://www.free-css.com/">Register</a> |
<input type="submit" class="button" value="Go!" name="button" />
</div>
</form>
<br />
<br />
<h5>Site</h5>
<ul class="nav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">News</a></li>
<li><a href="http://www.free-css.com/">Articles</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<h5>Board</h5>
<ul class="nav">
<li><a href="http://www.free-css.com/">Overview</a></li>
<li><a href="http://www.free-css.com/">Search</a></li>
<li><a href="http://www.free-css.com/">Staff</a></li>
<li><a href="http://www.free-css.com/">Members</a></li>
<li><a href="http://www.free-css.com/">latest posts</a></li>
</ul>
<h5>Partners</h5>
<p>here you can place buttons or something like that</p>
</div>
</div>
<br style="clear: both;" />
</div>
<div id="footer">copyleft 2005 by t-3k</div>
</body>
</html>
Related examples in the same category