ARCSTER

Yahoo YUI template example

Hats off to Yahoo for their Yahoo User Interface Library. I used their grids and templates to come up with a two-column layout with the second column being divided into a 3/4-1/4 grid. An example is available.

<!-- Updated 4/8/08 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>ARCSTER</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/base/base-min.css"> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/fonts/fonts-min.css"> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/grids/grids-min.css"> 
</head>
<body>
<div id="doc3" class="yui-t2"><!--doc3 designates 100%; yui-t2 designates a 2-col grid with a 180px left col-->
	<div id="hd"><!--header-->
	<p>header</p>
	</div><!--/hd-->
<div id="bd"><!--body-->	
	<div id="yui-main"><!--Designates the child yui-b block as primary-->
		<div class="yui-b"><!--The second of the two columns/blocks. It appears first in the code for SEO-->
		  <div class="yui-ge"><!--designate 3/4, 1/4 grid within the parent yui-b block -->
				<div class="yui-u first"><!--first (3/4 width) unit within the grid -->
				<!-- main content -->
				<p>content</p>
				</div><!--/yui-u first-->
				<div class="yui-u"><!--second (1/4 width) unit within the grid -->
				<p>column 3</p>
				</div><!--/yui-u-->
			</div><!--/yui-ge -->
		</div><!--/yui-b #2-->
	</div><!--/yui-main-->

			<div class="yui-b"><!--The first of the two columns/blocks. 180 px wide-->
			<p>column 1</p>
			</div><!--/yui-b #1 -->
	</div><!--/bd-->

	<div id="ft"><!--FOOTER-->
	<p>footer</p>
 	</div><!--/ft-->

</div><!--/doc3 & yui-t2 -->
</body>
</html>

Random Link

Internet Movie Database

Hello private callers, IDs blocked
- Wilco