reflection
<!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-AU">
<head>
<title>Reflection Aqua Colour Scheme</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type='text/css'>
/*
_________________________________________________________
| |
| Design + http://fullahead.org |
| DATE + 2005.05.12 |
| COPYRIGHT + free use if this notice is kept in place |
|_________________________________________________________|
*/
/* -- Main layout styles -- */
body {
margin: 1em 1em 1em 1em;
padding: 0px;
font-family: verdana, sans-serif;
font-size: 1.0em;
background-color: #333;
}
#siteBox {
float: left;
width: 100%;
color: #FFF;
}
/* -- header-layout/display styles -- */
#header-{
float: left;
width: 100%;
height: 4em;
background: #25509F url(reflection-images/hdr.jpg) no-repeat bottom left;
}
#header-a {
float: right;
width: 8em;
padding: 5px 10px 5px 10px;
font-size: 0.6em;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #FFF;
background-color: #666;
border-bottom: 2px solid #333;
border-right: 1px solid #333;
border-left: 1px solid #333;
}
#header-a:hover, #header-a.active {
padding-top: 10px;
background-color: #333;
}
#header-a.lastMenuItem {
background-image: url(reflection-images/corner_tr.gif);
background-repeat: no-repeat;
background-position: top right;
border-right: 0px;
}
a .desc {
display: none;
text-transform: lowercase;
color: #FC0;
}
a:hover .desc, .active .desc {
display: block;
}
/* -- header-title and subTitle layout/display styles -- */
.title {
float: left;
padding: 1em 30px 0 2em;
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
text-align: right;
line-height: 0.75em;
letter-spacing: -0.15em;
color: #FC0;
}
.subTitle {
display: block;
font-size: 0.4em;
text-transform: lowercase;
line-height: 1.2em;
letter-spacing: 0.01em;
}
/* -- Content layout/display styles -- */
#content {
float: left;
width: 100%;
padding: 1em 0 1em 0;
background-color: #666;
}
#contentLeft {
float: left;
width: 23.3%;
margin-bottom: 1em;
background: #777 url(reflection-images/corner_sub_tr.gif) no-repeat top right;
}
#contentRight {
float: right;
width: 75%;
background: #777 url(reflection-images/corner_sub_tl.gif) no-repeat top left;
}
#content p {
margin: 1.2em 1.2em 2em 1.2em;
font-size: 0.8em;
line-height: 1.8em;
}
#content a {
text-decoration: none;
color: #FC0;
border-bottom: 1px solid #AAA;
}
#content a:hover {
color: #DDD;
background-color: #888;
border-bottom: 1px solid #EEEEEE;
}
.header, .subheader-{
display: block;
clear: both;
font-weight: bold;
font-size: 0.8em;
text-transform: lowercase;
color: #FC0;
border-bottom: 1px solid #AAA;
}
.subheader-{
border: 0px;
}
/* -- Content left site links (large plus icon) -- */
#content a.menuItem {
display: block;
padding: 5px 0 5px 54px;
background: url(reflection-images/icn_plus.gif) no-repeat center left;
border: 0px;
}
#content a:hover.menuItem {
color: #DDD;
background: #888 url(reflection-images/icn_plus_on.gif) no-repeat center left;
border: 0px;
}
/* -- Footer layout/display styles -- */
#footer {
float: left;
width: 100%;
height: 3em;
margin-bottom: 1em !important;
margin-bottom: 0;
font-size: 0.6em;
text-transform: lowercase;
line-height: 2.6em;
color: #0AD;
background: #25509F url(reflection-images/hdr.jpg) repeat-y top left;
}
#footerLeft {
float: left;
width: 60%;
height: 3em;
text-align: left;
background: url(reflection-images/corner_bl.gif) no-repeat bottom left;
}
#footerRight {
float: right;
width: 35%;
height: 3em;
text-align: right;
background: url(reflection-images/corner_br.gif) no-repeat bottom right;
}
#footer a {
color: #0AD;
}
#footer a:hover {
color: #666666;
}
/* -- Display formatting styles -- */
.grey {
font-size: 0.9em;
color: #AAA;
}
.white {
color: #FFF;
}
acronym {
cursor: help;
border-bottom: 1px dotted #AAA;
}
/* -- <ul> tag styles -- */
ul{
font-size: 0.8em;
padding-top: 5px;
padding-bottom: 5px;
list-style-image: url(reflection-images/li_bullet.gif);
}
li {
margin-left: 50px;
}
/* -- Image alignment classes -- */
.imgLeft, .imgRight {
margin: 5px;
}
.imgLeft {
float: left;
margin-left: 0px;
}
.imgRight {
float: right;
margin-right: 0px;
}
/* -- Utility classes to create the bottom rounded corners -- */
.bottomCorner {
text-align: right;
}
.vBottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<!-- Main site container -->
<div id="siteBox">
<!-- Main site header-: holds the img, title and top tabbed menu -->
<div id="header">
<!-- top rounded corner -->
<img src="reflection-images/corner_tl.gif" alt="corner" style="float:left;" />
<!-- Site title and subTitle -->
<span class="title"> <span class="white">reflect</span>ion <span class="subTitle"> fullahead.org </span> </span>
<!-- Menu is displayed in reverse order from how you define it (caused by float: right) -->
<a href="http://www.free-css.com/" class="lastMenuItem">contact<span class="desc">send a msg</span></a> <a href="http://www.free-css.com/">services<span class="desc">free quotes</span></a> <a href="http://www.free-css.com/">products<span class="desc">full catalog</span></a> <a href="http://www.free-css.com/">about us<span class="desc">our company</span></a> <a href="http://www.free-css.com/" class="active">home<span class="desc">welcome</span></a> </div>
<!-- Content begins -->
<div id="content">
<!-- Left side menu : side bar links/news/search/etc. -->
<div id="contentLeft">
<p> <span class="header">links</span> Space for a left side link menu if needed: </p>
<p> <a href="http://www.free-css.com/" class="menuItem">yellow theme</a> <a href="http://www.free-css.com/" class="menuItem">deviantART</a> <a href="http://www.free-css.com/" class="menuItem">fullahead</a> </p>
<p> <span class="header">sub section</span> Another sub section that could be used for news items or a search maybe? </p>
<!-- Creates the rounded corner on the bottom of the left menu -->
<div class="bottomCorner"> <img src="reflection-images/corner_sub_br.gif" alt="" class="vBottom"/> </div>
</div>
<!-- Right side main content -->
<div id="contentRight">
<p> <span class="header">template info</span> Another fluid, <acronym title="eXtensible Hypertext Markup Language">XHTML</acronym>/<acronym title="Cascading Style Sheet">CSS</acronym> template for <acronym title="Open Web Design">OWD</acronym>. I decided to give a go at creating one that could be easily modified and this is what I came up with. The header/footer images are easy to change, along with the <a href="http://www.free-css.com/">accent colour</a> - just do a search in the style sheet for <acronym title="base 16 number system w/ values from 0-9 and A-F (10-15)">hex</acronym> value <acronym title="aqua">#00F1F4</acronym>. The template was tested in the usual, and looks good in all: </p>
<ul>
<li>Firefox 1.0.3</li>
<li>Internet Explorer 6.0</li>
<li>Netscape 7.02</li>
<li>Opera 8.0</li>
</ul>
<p> <img src="reflection-images/firefox.jpg" alt="" class="imgLeft"/> Images have full support without the need for tables. To align them left or right, use the .imgLeft or .imgRight classes. The headings will act as boundaries, so you don't have to worry about overflowing pics. It should also be fairly straightforward to use tables for layout if you find the need for them. </p>
<p> <span class="header">fluid css</span> Most of the dimensions of the template are defined relative to the font size or using percentages, so increases/decreases in font size won't break the layout. The template also gracefully contracts/expands to different screen resolutions, so there are no gaps. </p>
<p> This is a <acronym title="if you make bags of $$$ w/ it, send one my way">free use template</acronym> - hope it makes your life easier. If you do end up finding a use for it, send me an e-mail since it's interesting to see my templates in action. </p>
<!-- Creates bottom left rounded corner -->
<img src="reflection-images/corner_sub_bl.gif" alt="" class="vBottom"/> </div>
</div>
<!-- Footer begins -->
<div id="footer">
<div id="footerLeft"> Design <a href="http://openwebDesign.org/userinfo.phtml?user=snop" title="OWD Design work">snop</a> <span class="grey">+</span> photo plasticboy <span class="grey">=</span> valid <a href="http://validator.w3.org/check?uri=referer" title="validate XHTML">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator">CSS</a> </div>
<div id="footerRight"> </div>
</div>
</div>
</body>
</html>
Related examples in the same category