fluidity
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Fluidity.com</title>
<style type='text/css'>
/* A fluid template for business or fun */
/* By Dave Reeder, www.davereederdesign.com */
body { margin: 0; padding: 0; background: #262626; }
* {margin: 0; padding: 0; border: 0; font-family: "Trebuchet MS", Arial, sans-serif; }
/*------------Basic styles------------*/
p, h1, h2, h3, span#copyright, span#design { margin: 0 10px; color: #fff; font-weight: normal; text-decoration: none; background: transparent }
p { font-size: 0.8em; line-height: 1.4em; text-align: justify }
h1 { font-size: 1.3em; line-height: 1.4em; letter-spacing: 0.25em } /* site heading */
h2 { font-size: 1.0em; line-height: 1.4em; color: #FFA000 } /* site heading */
h3 { font-size: 0.8em; line-height: 1.4em; color: #FFA000 } /* sub headings */
span#copyright { font-size: 13px; line-height: 35px } /* sets the copyright styles */
span#design { float: right; font-size: 13px; line-height: 35px } /* floats the design link into position */
span.validation { float: right; margin-right: 10px; } /* floats the validation buttons */
.validation img { margin: 0; } /* floats the validation buttons */
div { padding: 10px 0;}
#hdrimg a {color: #06FF00; text-decoration: none; font-weight: normal;}
#hdrimg a strong {color: #fff; text-decoration: none; font-weight: normal;}
#hdrimg a:hover {color: #fff; text-decoration: none; font-weight: normal;}
#hdrimg a:hover strong {color: #06FF00; text-decoration: none; font-weight: normal;}
a {color: #06FF00; text-decoration: none}
a:hover {color: #fff; text-decoration: underline}
/*-------------Layout----------------*/
#hdrimg { /* Large image */
float: left;
width: 100%;
margin-bottom: 5px;
background: url('fluidity-images/hdr.gif') repeat-x;
height: 170px; /* ie5x hack begins here */
voice-family: "\"}\"";
voice-family: inherit;
height: 150px;
}
html>body #hdrimg {
height: 150px; /* ie5x hack ends here */
}
.rowcontainer { /* Used to keep the divs in a row. you can use this for any size of divs */
float: left;
margin-bottom: 5px;
width: 100%;
overflow: hidden;
background: #333;
}
#bttmbar { float: left; width: 100%; height: 35px; background: url('fluidity-images/hdr.gif') bottom repeat-x } /* Bottom copyright bar */
/*------Columns: Note they dont add up to 100%, this is intentional to avoid problems!----------*/
.fullcolumn { float: left; width: 99%;} /* Full width column for a one column site */
.halfcolumn { float: left; width: 49%;} /* Half width column for a two column site. */
.onethirdcolumn { float: left; width: 33%; } /* One third width column for a three column site */
.quartercolumn { float: left; width: 24.5% } /* One quarter width column for a four column site */
/*------------------------------Main Navigation------------------------------------------*/
#nav { position: absolute; top: 145px; left: 0px; height: 25px; width: 100% }
ul#nav { margin: 0 }
#nav li /* Main nav list items */
{
font-size: 13px;
float: left;
list-style: none;
text-align: center
}
#nav li a { /* Main nav styles for all links */
display: block; /* Although display:block suggests a vertical list the float:left property under #nav li causes the menu to float inline */
margin-left: 5px; /* adds a gap between the tabs */
width: 90px; /* width of the tab */
line-height: 25px; /* height of the tab */
text-decoration: none;
}
#nav a:link, #nav a:visited { background: url('fluidity-images/tab.gif') no-repeat 0 -25px }
#nav a:hover, #nav a:active { background: url('fluidity-images/tab.gif') no-repeat 0 0 }
#nav a#current { background: url('fluidity-images/tab.gif') no-repeat 0 0 }
/*-----------------------------------Other tags-----------------------------------------*/
acronym { border-bottom: 1px dashed #999; cursor: help }
/* lists */
ul { margin: 5px 0 5px 35px; list-style: url('fluidity-images/bullet.gif') }
ol { margin: 5px 0 5px 35px; list-style: decimal }
ol li, ul li { color: #fff; font-size: 0.8em; line-height: 1.4em }
hr { margin: 10px 0px; height: 1px; background: #444; color: #444 } /* rule styling */
img {margin: 0 10px} /* all images styling */
img.right {float: right} /* right floating images */
img.left {float: left} /* left floating images */
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="hdrimg"> <span class="validation"> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="fluidity-images/fluidcss.gif" alt="" /></a> <a href="http://validator.w3.org/check?uri=referer"><img src="fluidity-images/fluidxhtml1.1.gif" alt="" /></a> </span>
<h1><a href="http://www.free-css.com/"><strong>fluidity</strong>.com</a></h1>
<ul id="nav">
<li><a href="http://www.free-css.com/" id="current">home</a></li>
<li><a href="http://www.free-css.com/">about</a></li>
<li><a href="http://www.free-css.com/">blog</a></li>
<li><a href="http://www.free-css.com/">contact</a></li>
<li><a href="http://www.free-css.com/">links</a></li>
</ul>
</div>
<!-- end of hdr img -->
<div class="rowcontainer">
<div class="fullcolumn">
<h2>Welcome to Fluidity.com</h2>
<p>Hello and welcome to fluidity.com a template by <acronym title="Dave Reeder Design">drd</acronym><br />
I wanted to finish 2005 with something a bit different. Although this template appears to be simple and the <acronym title="Cascading Style Sheets">CSS</acronym> is quite small, it is highly versatile. Fluidity.com is a <acronym title="Expands when you resize the window">fluid</acronym> layout which has all the CSS needed to create one, two, three or four column layouts.<br />
Because Fluidity.com uses a row div called "rowcontainer" to keep the columns together, you can mix and match the number of columns on one page just like I have in the standard configuration of the template.</p>
<h3>A note from the author</h3>
<p>You can see more of my work on my site: www.davereederdesign.com. If you have any problems using the template or simply want to say "hi" then it would be great to hear from you!</p>
<p>Hope you have fun with the template,<br />
<br />
-Dave</p>
</div>
</div>
<div class="rowcontainer">
<div class="halfcolumn">
<h3>Careful testing</h3>
<p>Careful testing of any webpage should be top priority, so I've validated the code and tested the template in the following browsers: </p>
<ul>
<li>Internet Explorer 5.5</li>
<li>Internet Explorer 6.0</li>
<li>Mozilla Firefox 0.8</li>
<li>Opera 7.54u2</li>
<li>Netscape 7.2</li>
</ul>
</div>
<div class="halfcolumn">
<h3>Controlling the columns</h3>
<img src="fluidity-images/sample.gif" alt="" class="right" />
<p>Of course, the columns do <em>not</em> have to be of equal proportions. You could specify one column that was a quarter of the screens width and another which was three quarters. Simply specify a column in the xhtml with a class name that corresponds to the relevent column in the CSS. <br />
<br />
Now I'll leave you with some Lorem Ipsum to fill the rest of the space :)</p>
</div>
</div>
<div class="rowcontainer">
<div class="onethirdcolumn">
<h3>Example of three columns!</h3>
<p>Nam ac ligula. Morbi cursus nonummy leo. Duis aliquet. Quisque rhoncus, odio eget malesuada imperdiet, magna lectus iaculis velit, in tincidunt odio sapien nec lacus. Curabitur ullamcorper metus ac justo.<br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer volutpat leo sit amet eros. Sed vestibulum porta sapien. Nunc venenatis tortor ut massa. Aliquam ut eros. Sed tempus nibh id felis. Cras vehicula tincidunt orci. Mauris viverra, diam id volutpat condimentum, dolor nisl pretium nisi, ut blandit nisi neque tempus lectus. In ultricies metus quis est. Integer lobortis pretium elit. Curabitur et turpis. Morbi vitae sem at odio sagittis consequat. </p>
</div>
<div class="onethirdcolumn">
<h3>Example of three columns!</h3>
<p> Proin arcu sem, tempor vel, luctus sagittis, dictum sit amet, lectus. Phasellus leo ante, elementum id, pellentesque non, cursus eget, purus. Aenean lobortis laoreet quam. Nullam enim. Aenean malesuada, diam in tempor feugiat, nibh arcu feugiat eros, ut rutrum dolor diam sed nulla. Etiam sit amet nisl at dui cursus auctor. Nunc vulputate est et leo. Curabitur dolor leo, vulputate elementum, egestas viverra, gravida eget, nisi. Suspendisse sed odio. Duis sed dolor. Nulla euismod ipsum vitae quam. Sed sed libero. Nam sed mauris eu sem fermentum varius. Aliquam porttitor consectetuer ipsum. Duis sagittis ipsum sed justo. Vestibulum consectetuer. </p>
</div>
<div class="onethirdcolumn">
<h3>Example of three columns!</h3>
<p>Quisque sed nisi et quam aliquam volutpat. Aliquam erat volutpat. Vivamus id ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ac lorem. Proin venenatis rutrum nisl. Donec molestie laoreet tortor. Maecenas velit. Vivamus pulvinar pellentesque eros. Nulla feugiat. Quisque sit amet nulla mattis dolor adipiscing bibendum. Nam odio urna, convallis eu, vestibulum eu, molestie in, libero. </p>
</div>
</div>
<div class="rowcontainer">
<div class="quartercolumn">
<h3>Example of four columns!</h3>
<p>Morbi metus diam, faucibus tincidunt, mattis et, tristique in, massa. Pellentesque ac nulla in neque interdum suscipit. Nunc sodales. Curabitur a mauris. Maecenas eu elit at tortor convallis congue. <br />
<br />
Donec id tortor ut ligula sagittis feugiat. Integer cursus. Vestibulum tellus lectus, tincidunt sed, imperdiet eu, congue et, diam. In eget diam a tortor pulvinar mattis. </p>
</div>
<div class="quartercolumn">
<h3>Example of four columns!</h3>
<p> Quisque et tellus. Nulla egestas rutrum massa. Etiam nisi. Morbi mauris urna, auctor vel, ullamcorper et, cursus luctus, magna. Fusce tristique. Vestibulum varius auctor dolor. Donec bibendum faucibus nibh. <br />
<br />
Duis dapibus blandit erat. Nam orci. Ut justo. Fusce ornare neque vitae leo. Nullam laoreet. Etiam adipiscing, arcu nec dapibus laoreet, nunc nibh facilisis erat, quis ultricies purus odio at tellus. </p>
</div>
<div class="quartercolumn">
<h3>Example of four columns!</h3>
<p>Curabitur at velit id massa gravida tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi convallis. Sed aliquam nunc non quam. Nulla porttitor convallis erat. Cras venenatis. Quisque id dolor. Vivamus vitae purus. Duis posuere, risus sit amet viverra bibendum, augue eros pellentesque nibh, vitae mollis nisl libero nec justo. </p>
</div>
<div class="quartercolumn">
<h3>Example of four columns!</h3>
<p>Ut a nunc. Ut quam. Proin ullamcorper, leo ut varius luctus, nulla purus ultricies nibh, ac ornare libero elit non elit. Donec cursus vestibulum mi. Sed risus. Pellentesque justo. Nunc ac elit. </p>
</div>
</div>
<div id="bttmbar"> <span id="design">design: <a href="http://www.davereederdesign.com/">davereederdesign.com</a></span><span id="copyright">Copyright © 2005 Yourcopyright. All Rights Reserved</span> </div>
<!-- end of bttmbar -->
</body>
</html>
Related examples in the same category