<!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" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Geek Portfolio.com</title>
	<link rel="stylesheet" href="/style/new_screen.css" type="text/css" media="screen" />
 
	<script type="text/javascript">
		// this is a quick-and-dirty script to allow an anchor
		// to toggle the display state of a specific DIV
 
		// *** this has no safeguards or error checks, it works
		// in the two browsers that I use: Moz 1.5 and IE 6.0***
 
		// notice that the toggle_filter anchor has no onclick action,
		// it is dynamically added with a window.onload event
 
		function togfiller()
		{
			var x = document.getElementById("filler_text");
			if(x.style.display == "none")
				x.style.display = "block";
			else
				x.style.display = "none";
			return false;
		}
 
		function setup_toggle(formid)
		{
			var x = document.getElementById(formid);
			x.onclick = function (){ return togfiller(); };
		}
 
		window.onload = function(){ setup_toggle("toggle_filter") };
	</script>
</head>
<body>
	<h1>
		<a href="http://geekportfolio.com/">GeekPortfolio.com</a>
	</h1>
	<div id="wrapper">
		<div id="content">
			<h2>Case Study: CSS Layout</h2>
			<p>
				<a href="/viewsource/viewsource.php?f=casestudy/csslayout.xhtml">View X/HTML source here</a>
				and <a href="/viewsource/viewsource.php?f=style/new_screen.css">view CSS source here</a>.
				This is a sample two-column page layout. Content comes first in the document, as it is
				the most important information on the page.  It is followed by the navigation bar in
				a second DIV.  ULs create the nav items, and they are styled with CSS.
			</p>
			<p>
				The columns will auto-adjust as necessary for either taller content or a taller navigation
				bar.  Some <a href="http://lipsum.com">Lipsum</a> is included below to expand the page
				vertically, click here to
				<a href="#" id="toggle_filter" title="toggle filler text on or off">toggle the filler text</a>
				and show the behaviour for longer content.
			</p>
			<div id="filler_text" style="display:none">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porttitor, diam ut convallis posuere, mauris est ullamcorper felis, a blandit sapien urna in nisi. Donec sodales nulla id urna. Mauris at velit. Duis dolor. Aliquam at leo. In hac habitasse platea dictumst. In nulla. Nulla facilisi. Morbi aliquam tellus sit amet turpis. Donec ullamcorper cursus nisl. Donec nonummy, est id viverra porttitor, purus est pretium ante, at sollicitudin nisl purus ac purus. Etiam malesuada porta felis.</p>
			<p>Ut at velit non ante volutpat tincidunt. Nulla ac felis vitae libero semper scelerisque. Nulla eu enim non eros tempus facilisis. Vivamus vel tellus. Mauris mattis turpis quis nisl. Curabitur ipsum. Maecenas scelerisque odio id erat pulvinar pretium. Suspendisse tellus mauris, pellentesque in, molestie condimentum, varius a, nisi. Duis eu eros. Integer vel ante et elit cursus dignissim. Integer tempus fringilla ipsum.</p>
			<p>Sed odio. Pellentesque massa. Donec ut enim non massa lobortis ultrices. Mauris bibendum. Integer malesuada turpis eget pede. Duis bibendum lacus luctus tortor. Suspendisse sodales dolor quis diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut commodo bibendum quam. Suspendisse dignissim, purus at tincidunt tempor, tortor magna adipiscing turpis, fringilla fringilla nibh nibh ut velit. Vestibulum interdum ornare erat. Donec arcu. Curabitur volutpat cursus mi. Donec facilisis, elit eu varius vehicula, nibh felis consequat tellus, non venenatis nulla urna vitae dolor. Sed in leo ut urna ultricies cursus. Maecenas elementum nisl et sapien. Nulla enim. Nam vel lectus porttitor enim pellentesque convallis.</p>
			<p>Donec iaculis, dolor id suscipit porta, justo nulla ultrices velit, et hendrerit nisl eros et neque. Curabitur fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ac odio sit amet leo interdum eleifend. Mauris vitae sem eu erat posuere ornare. Etiam nibh. Praesent tincidunt risus. Vivamus ornare, turpis vestibulum adipiscing consequat, sem diam laoreet leo, a malesuada enim felis a nulla. Vestibulum convallis nisl vel nisl. Duis dictum, nibh a interdum faucibus, lorem velit congue massa, et semper turpis orci vel lorem. Maecenas nisl. Nunc hendrerit, lorem ac eleifend tristique, arcu purus fringilla pede, quis pretium urna libero et elit. Sed dignissim urna lobortis sem. Curabitur magna eros, mattis eu, ullamcorper sed, bibendum a, nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed sit amet lacus.</p>
			</div>
		</div>
		<div id="nav">
			<ul>
				<li>
					<a href="/resume/resume_web.xhtml">My Resume</a>
				</li>
				<li>
					<a href="/casestudy/csslayout.xhtml" id="selected">CSS Layout Sample</a>
				</li>
				<li>
					<a href="/casestudy/photosharing.xhtml">Photo-Sharing Application</a>
				</li>
				<li>
					<a href="/casestudy/hashcash.xhtml">Hashcash Form Security</a>
				</li>
				<li>
					<a href="#" title="coming soon..." class="disabled">Web-Enabled Catalog</a>
				</li>
				<li>
					<a href="#" title="coming soon..." class="disabled">Online Reporting Mechanism</a>
				</li>
			</ul>
		</div>
	</div>
	<div id="footer">
		<div class="clearit"></div>
		<div class="leftfloat">Contact info: ryan at geek portfolio dot com</div>
		<div class="rightfloat">
		<a href="http://validator.w3.org/check?uri=referer&amp;outline=1">
			<img src="/img/valid-xhtml10.png" alt="Valid XHTML" height="31" width="88" />
		</a>
		<a href="http://jigsaw.w3.org/css-validator/check/referer">
			<img src="/img/vcss.png" alt="Valid CSS" height="31" width="88" />
		</a>
		</div>
		<div class="clearit"></div>
	</div>
</body>
</html>