intensesimplicity
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Intense Simplicity Template - Help</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
body{
margin:0px;
padding:0px;
background:#222 url(intensesimplicity-images/bodybg.png) repeat-x fixed top center;
text-align:center;
font:11px Verdana,Arial,Helvetica,sans-serif;
}
#container{
width:700px;
margin:auto;
padding-bottom:20px;
}
/* basic styles */
h1,h2,h3,h4,h5,h6{
font-family:Georgia,Verdana,Arial,Helvetica,sans-serif;
font-weight:lighter;
margin:10px 0px 0px 0px;
color:#222;
}
h1{
font-size:28px;
}
h2{
font-size:25px;
color:#0a294f;
}
h3{
font-size:22px;
color:#202f0f;
}
h4{
font-size:18px;
color:#911322;
}
h5{
font-size:16px;
color:#af3d0a;
}
h6{
font-size:11px;
font-weight:bold;
color:#222;
}
del{
color:#999;
}
acronym{
/*border-bottom:1px dotted #222;*/
border:none;
background:url(intensesimplicity-images/dottedborder_dark.gif) repeat-x bottom center;
padding-bottom:1px;
cursor:help;
}
hr{
width:100%;
border:0;
margin:5px 0px !important;
margin:2px 0px 5px 0px;
height:1px;
color:#777;
background-color:#777;
}
a{
color:#af2639;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
p{
line-height:22px;
margin:5px 0px 15px 0px;
/*text-align:justify;*/
}
.noborder{
border:0;
}
#content ul{
margin:0px;
padding:0px 10px 5px 15px;
list-style-type:none;
}
#content ol{
margin:0px;
padding:0px 10px 5px 33px;
}
#content ul li{
padding-bottom:7px;
background:transparent url(intensesimplicity-images/arrow.gif) no-repeat 0px 5px;
padding-left:10px;
}
#content ol li{
padding-bottom:7px;
}
#content ul li ul{
margin:8px 0px -7px 0px;
}
/* I can't get <pre> to display inline very well so just use <span class="pre"> */
#content .pre{
font:11px "Courier New",Courier,sans-serif;
color:#af454a;
}
img{
border:none;
}
img.floatright,
img.floatleft,
#left img{
border:1px solid #222;
}
a:hover img.floatright,
a:hover img.floatleft,
#left a:hover img{
border:1px solid #af2639;
}
/* floats, positioning, and widths */
.floatleft{
float:left;
}
.floatright{
float:right;
}
.w50{
width:50%;
}
.floatleft p{
padding:0px 10px 0px 0px;
}
.floatright p{
padding:0px 0px 0px 10px;
}
img.floatleft{
margin:15px 15px 5px 0px;
}
img.floatright{
margin:15px 0px 5px 15px;
}
/* rounded corners */
.tl{background:#222 url(intensesimplicity-images/corners/tl.gif) no-repeat top left;}
.tr{background:transparent url(intensesimplicity-images/corners/tr.gif) no-repeat top right;}
.br{background:transparent url(intensesimplicity-images/corners/br.gif) no-repeat bottom right;}
.bl{background:transparent url(intensesimplicity-images/corners/bl.gif) no-repeat bottom left;}
.ltl{background:#efefef url(intensesimplicity-images/corners/l_tl.gif) no-repeat top left;}
.ltr{background:transparent url(intensesimplicity-images/corners/l_tr.gif) no-repeat top right;}
.lbr{background:transparent url(intensesimplicity-images/corners/l_br.gif) no-repeat bottom right;}
.lbl{background:transparent url(intensesimplicity-images/corners/l_bl.gif) no-repeat bottom left;}
/* blockquotes and code*/
blockquote{
min-height:35px;
width:100%;
display:block;
margin:10px auto;
background:transparent url(intensesimplicity-images/blockquote/quote.gif) no-repeat 10px 10px;
}
* html blockquote{
min-height:35px;
height:auto !important;
height:35px;
}
blockquote p{
margin:0px;
line-height:17px;
padding:10px 10px 10px 50px;
}
blockquote span{
color:#999;
font-size:9px;
padding-top:5px;
display:block;
}
blockquote span a{
color:#555;
text-decoration:none;
}
blockquote span a:hover{
text-decoration:underline;
}
blockquote.go{
background:transparent url(intensesimplicity-images/blockquote/go.gif) no-repeat 10px 50%;
}
blockquote.stop{
background:transparent url(intensesimplicity-images/blockquote/stop.gif) no-repeat 11px 50%;
}
blockquote.exclamation{
background:transparent url(intensesimplicity-images/blockquote/exclamation.gif) no-repeat 23px 50%;
}
code{
display:block;
width:92%;
margin:0px auto 15px auto;
line-height:17px;
}
code .red{
color:#af454a;
}
/* forms */
form select,
form input,
form textarea{
font:11px Verdana,Arial,Helvetica,sans-serif;
border:1px solid #888;
}
form input:hover,
form input:focus,
form textarea:hover,
form textarea:focus,
form select:hover,
form select:focus{
background-color:#f9f9f9;
/*border:1px dotted #888; optional thought */
border:1px solid #444;
}
form select{
padding:1px;
}
form input{
padding:1px;
}
form label{
display:block;
color:#777
}
form textarea{
padding:1px;
line-height:16px;
}
form p{
margin:10px 0px;
}
/* top section */
#top{
background:url(intensesimplicity-images/contentbg.gif) repeat-y top center;
}
/* very bottom curve */
#bottom{
background:url(intensesimplicity-images/container_b.gif) no-repeat bottom center;
height:9px;
}
* html #bottom{
margin-top:-4px;
}
/* header */
#header{
font:30px Georgia,Verdana,Arial,Helvetica,sans-serif;
width:680px;
height:175px;
margin:auto;
background:url(intensesimplicity-images/headers/h1.jpg) no-repeat top center;
text-align:left;
}
#title{
margin-top:130px;
margin-left:13px;
position:absolute;
color:#fff;
background-color:transparent;
cursor:default;
}
/* menubar */
.nav{
height:40px;
background-color:#222;
color:#fff;
width:680px;
margin:auto;
text-align:left;
font-size:11px;
cursor:default;
}
.nav2{
height:40px;
}
#slogan{
position:absolute;
margin:11px 0px 0px 15px;
font-size:14px;
}
#navdiv{
text-align:right;
}
#navlist{
list-style-type:none;
margin:0px;
padding:13px 8px 0px 0px;
}
#navlist li{
display:inline;
}
#navlist li a{
color:#fff;
font-weight:bold;
text-decoration:none;
height:40px;
padding:8px 6px 9px 6px;
}
#navlist li a:hover{
color:#bfbfbf;
/* other thoughts
border-top:5px solid #fff;
color:#df521b;
*/
}
/* content */
#content{
min-height:400px;
width:680px;
margin:auto;
color:#222;
text-align:left;
}
* html #content{
min-height:400px;
height:auto !important;
height:400px;
}
#left{
width:440px;
float:left;
padding:10px 10px 20px 10px;
}
* html #left{
padding-top:20px;
}
/* sidebar */
#right{
width:190px;
float:right;
padding:20px 10px 20px 20px;
}
* html #right{
padding-top:30px;
}
#right .sideitem{
margin-bottom:25px;
}
#right .sideitem h4{
font:12px Georgia,Arial,Helvetica,sans-serif;
font-weight:bold;
color:#222;
width:100%;
background:#fff url(intensesimplicity-images/dottedborder.gif) repeat-x bottom center;
padding-bottom:3px;
margin-bottom:13px;
}
#right .sideitem b{
/*display:block;*/
}
#right .sideitem p{
padding:0px 5px;
}
#right .sideitem ul{
margin-left:-4px;
}
/* footer */
.footer{
height:30px;
width:680px;
margin:auto;
color:#fff;
text-align:left;
clear:both;
}
.footer div{
height:30px;
}
#copyright{
text-align:left;
float:left;
padding:8px;
margin-top:0px !important;
margin-bottom:-16px;
}
#designcredit{
float:right;
text-align:right;
padding:8px;
margin-bottom:-16px;
}
#designcredit a{
color:#9f9f9f;
}
#designcredit a:hover{
color:#cf262d;
text-decoration:none;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div id="header">
<div id="title">Intense Simplicity</div>
<!-- header text -->
</div>
<div class="nav bl">
<div class="nav2 br">
<div id="slogan">A clean, modern, and fun design.</div>
<!-- place an optional slogan here. -->
<div id="navdiv">
<ul id="navlist">
<!-- menu -->
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="help.html">Help</a></li>
<li><a href="tags.html">Tags</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="left">
<h2>Tips</h2>
<p>This page has some info about how to use the template <em>Intense Simplicity</em>.</p>
<h4>Blockquotes</h4>
<p>In order to get a good-looking blockquote, you have to add some extra divs (one for each corner) around the <span class="pre"><blockquote></span> tag to get rounded corners. This makes for messy code, but perhaps when CSS3 is better supported we can clean it up by assigning all corner images to the blockquote, instead of one per div.</p>
<div class="ltl">
<div class="ltr">
<div class="lbr">
<div class="lbl">
<blockquote>
<p>Roses are red, violets are blue, this is a blockquote, and it doesn't rhyme.</p>
</blockquote>
</div>
</div>
</div>
</div>
<p><em>Source:</em></p>
<code> <div class="ltl"><br />
<div class="ltr"><br />
<div class="lbr"><br />
<div class="lbl"><br />
<blockquote><br />
<p>Roses are red, violets are blue, this is a blockquote, and it doesn't rhyme.</p><br />
</blockquote><br />
</div><br />
</div><br />
</div><br />
</div> </code>
<p>You can get different icons by changing the class of the blockquote (see <a href="tags.htm">tags</a>).</p>
<h4>Highlighting Code in <code> Blocks</h4>
<p>You can make bits of code in a code block red by surrounding it with <span class="pre"><span class="red"></span>, such as in the third line of the following:</p>
<code> public class Main {<br />
public static void main(String[] args) {<br />
<span class="red">//this line is red (duh)</span><br />
System.out.println("Hello World!");<br />
}<br />
}<br />
</code>
<p><em>Source:</em></p>
<code> <code><br />
...<br />
<span class="red"><span class="red"></span>//this line is red (duh)<span class="red"></span></span><br />
...<br />
</code> </code> </div>
<div id="right">
<div class="sideitem">
<h4>The Sidebar</h4>
<p>This is the sidebar. Put something interesting here.</p>
</div>
<div class="sideitem">
<h4>News</h4>
<p><b>5/09/06</b> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas iaculis urna hendrerit. <a href="http://www.free-css.com/">read more></a></p>
<p><b>5/05/06</b> - Nam blandit. Nunc dolor. Vestibulum auctor. Mauris congue. <a href="http://www.free-css.com/">read more></a></p>
</div>
<div class="sideitem">
<h4 class="itemtitle">Links</h4>
<ul>
<li><a href="http://www.free-css.com/">Lorem</a></li>
<li><a href="http://www.free-css.com/">Ipsum</a></li>
<li><a href="http://www.free-css.com/">Dolor</a></li>
<li><a href="http://www.free-css.com/">Ridiculus mus</a></li>
</ul>
</div>
</div>
</div>
<div class="footer tl">
<div class="tr">
<div class="br">
<div class="bl">
<div id="copyright">Copyright © 2006 Your Name</div>
<div id="designcredit">Design by <a href="http://saltedsugar.com/">sofaspud</a> | valid <a href="http://validator.w3.org/check?uri=referer">strict XHTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></div>
</div>
</div>
</div>
</div>
</div>
<div id="bottom"> </div>
</div>
</body>
</html>
Related examples in the same category