Three-column layout with various style illustration
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Description example by www.studio7designs.com" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Name example - Original Template Design by www.studio7designs.com" />
<style type='text/css'>
/* This is my first designs using CSS,
Please visit me at http://www.studio7designs.com or email aran@studio7designs.com if you have any questions.
Thanks, and have fun!
CSS layout: */
body {
margin: 0 auto;
padding: 0;
font: 76% Arial, Helvetica, sans-serif;
background: #f4f4f4 url(STUDIO7DESIGNS-images/backround.gif) top center repeat-y;
}
.box_right {
position:relative;
float:right;
clear:both;
width:200px;
margin:0 0 5px 10px;
padding:0 10px 0 10px;
background:#F7F9F7;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
}
.box_right p {
margin:5px 5px;
}
.box_cnr_top {
background:url(STUDIO7DESIGNS-images/cnr_tr.gif) no-repeat top right;
margin:0 -10px 0 -10px;
}
.box_cnr_bottom {
background:url(STUDIO7DESIGNS-images/cnr_br.gif) no-repeat top right;
margin:0 -10px 0 -10px;
}
img.cnr {
width:8px;
height:8px;
border:none;
display: block !important;
}
#leftsidebar {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 760px;
}
#header {
margin: 0 0 8px 0;
border: 0;
}
#topmenu {
clear: left;
float: left;
width: 150px;
height: 84px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
background: #f4f4f4 url(STUDIO7DESIGNS-images/topmenu.gif) top left no-repeat;
}
#menu {
clear: left;
float: left;
width: 150px;
margin: 0 0 0px 0;
padding: 0;
font-size: 0.9em;
}
#menu ul {
list-style: none;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 1.1em;
}
#menu li {
margin-bottom: 4px;
}
#menu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #86C32A;
display: block;
padding: 5px 0 0 8px;
background: #ffffff;
border-left: 5px solid #86C32A;
}
#menu li a:hover {
background: #86C32A;
color: #ffffff;
border-left: 5px solid #86C32A;
}
.leftnews {
margin: 1px 0 1px 0;
padding: 10px;
width: 130px;
color: #505050;
background-color: #F7F9F7;
line-height: 1.3em;
}
.rightnews {
float: right;
width: 94px;
background-color: #F7F9F7;
margin: 0 0 10px 10px;
padding: 5px;
font-size: 0.9em;
line-height: 1.5em;
}
#rightnews p {
margin: 0 0 1.5em 0;
}
#content {
margin: 0 110px 20px 160px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}
#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}
#content img {
padding: 0px;
display:inline;
border: thin none #CCCCCC;
background-color: #FFFFFF;
}
.greenbox {
background-color: #F7F9F7;
border: 1px solid #94BD53;
color: inherit;
padding: 5px;
margin: 0px;
}
.bluebox {
background-color: #EDF3FE;
border: 1px solid #74A8F5;
color: inherit;
padding: 5px;
margin: 0px;
}
.splitright {
background-color: #ffffff;
width: 49%;
float: right;
overflow: hidden;
}
.splitleft {
background-color: #ffffff;
width: 49%;
float: left;
overflow: hidden;
}
h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}
a {
text-decoration: none;
color: #74A8F5;
}
a:hover {
text-decoration: underline;
color: #86C32A;
}
a img {
border: 0;
}
#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 3px solid #86C32A;
width: 760px;
text-align: center;
color: #86C32A;
font-size: 0.9em;
}
#footer a {
color: #86C32A;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
color: #74A8F5;
}
.left {
margin: 10px 10px 5px 0;
float: left;
}
.right {
margin: 10px 0 5px 10px;
float: right;
}
.textright {
text-align: right;
}
.center {
text-align: center;
}
.small {
font-size: 0.9em;
}
.bold {
font-weight: bold;
}
.hide {
display: none;
}
.style3 {color: #666666}
.style4 {color: #999999}
.style5 {color: #FF9933}
.style6 {color: #86C32A}
.style7 {color: #74A8F5}
/* workarounds and hacks */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
<title></title>
</head>
<body>
<div id="leftsidebar">
<img id="header" src="STUDIO7DESIGNS-images/header.jpg" width="760" height="35" alt="header" />
<div id="topmenu"></div>
<div class="rightnews">
<img src="STUDIO7DESIGNS-images/fresh1.jpg" alt="fresh1" width="90" height="68" /><br />
<br />
<img src="STUDIO7DESIGNS-images/fresh2.jpg" alt="fresh2" width="90" height="63" />
<br />
<br />
<img src="STUDIO7DESIGNS-images/fresh3.jpg" alt="fresh3" width="90" height="65" />
<br />
<br />
<span class="style3">Links:</span>
<br />
<img src="STUDIO7DESIGNS-images/bullet_blue.gif" alt="blue" width="19" height="16" /><br />
<a href="http://www.studio7designs.com">studio7designs</a>
<a href="http://www.weddingsvictoria.net/">Photography<br />
</a>
<a href="http://www.oswd.org">OSWD</a>
<br />
<br />
<span class="style3">More info:</span>
<br />
<img src="STUDIO7DESIGNS-images/Bullet_green.gif" alt="green bullet" width="19" height="16" />
<br />
<a href="http://www.studio7designs.deviantart.com/">Deviantart</a>
<br />
<a href="http://www.digg.com">Digg</a>
<br />
<a href="http://www.neowin.net/">Neowin</a>
<br />
<br />
</div>
<div id="menu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="leftnews">
<a href="#">You can add info here:</a><br />
<br />
<span class="style3">Like your site updates:
<br />
<br />
This is some filler text <br />
<br />
This is some filler text </span><br />
<br />
<br />
<br />
<br />
<br />
<img src="images/Bullet_green.gif" alt="right blue" width="19" height="16" />
</div>
</div>
<div id="content">
<h3 class="style7">STUDIO7DESIGNS</h3>
<span class="style3">This is a OS template for your enjoyment.
Thanks<a href="http://andreasviklund.com/templates"> Andreas</a> and others for support <br />
All I ask is that you <a href="mailto:aran@studio7designs.com"> email me</a>, and if you can, please keep a link to me at the footer. </span>
<br />
<br />
<span class="style3">Here is an example of image borders and the "split right box" and "split left box". You can split your text using CSS classes, This also has the "bluebox class inside the split.</span>
<br />
<br />
<div class="splitleft"> <div class="bluebox"> <img src="images/mountain.jpg" width="115" height="92" alt="STUDIO7DESIGNS" /> </div> </div>
<div class="splitright"> <div class="bluebox"><span class="style3"> This is a sweet little split left container you can put images or text into.<br />
If you find any problems with my template can you please <a href="mailto:aran@studio7designs.com">email me</a>, and let me know what I need to fix!</span></div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="greenbox"> <div class="style3">Green Box class example in the style sheet </div></div>
<br />
<h2 class="style4">This is a Header Example</h2>
<h3 class="style5">This is a Header Example</h3>
<h3 class="style6">This is a Header Example</h3>
<h3><br /><span class="style7">Site Info</span></h3>
<div class="box_right clearfix" id="box_right">
<div class="box_cnr_top"><img src="images/cnr_tl.gif" alt="corner" width="8" height="8" class="cnr" style="display: none" /></div>
<span class="style3"> <strong>Rounded Text Box </strong><br />
Another example of great coding from OS template designers. Here is a rounded text box for your use. Enjoy!
The rounded corners on this text box is done with CSS that was developed by <a href="http://kalsey.com/2003/07/rounded_corners_in_css/">Adam Kalsey</a>.</span>
<div class="box_cnr_bottom"><img src="images/cnr_bl.gif" alt="corner" width="8" height="8" class="cnr" style="display: none" /></div>
</div>
<p class="style3">I have included a couple of bullets, you can just open up photoshop and change the colors to suite your needs. Unfortunatally I cant figure out custom bullets right now, the code I used was not "valid" ... even though it renders perfectly in all browsers... </p>
<p class="style3">I have also included a footer bar just like the header bar if you want to tackle having the footer 'stick' to the bottom of the page, regardless of content.
<br />
<br />
The blue square above the navigation can be used for your site logo, just open it up in photoshop and clear the white, or use your own! - I obviously used the ideas behind the OSWD template, which is my favorite, this is my first attempt!</p>
<p class="style3">Good luck!</p>
<p class="style3">Cheers</p>
<p><a href="http://www.studio7designs.com">Aran</a> <br />
<br />
</p>
</div>
<div id="footer"> . original template by <a href="http://www.studio7designs.com">Aran Down</a>.
<a href="http://www.ehostinfo.com/">Web Hosting</a></div>
</div>
</body>
</html>
Related examples in the same category