Return to Snippet

Revision: 26109
at May 18, 2010 08:40 by LuckyShot


Updated Code
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?=TITLE?></title>
<style type="text/css">
/* Yahoo CSS Reset - Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.8.1 */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}

/* 1KB grid - 12 columns, 60 pixels each, with 20 pixel gutter (960px) */
.g1{width:60px;}.g2{width:140px;}.g3{width:220px;}.g4{width:300px;}.g5{width:380px;}.g6{width:460px;}.g7{width:540px;}.g8{width:620px;}.g9{width:700px;}.g10{width:780px;}.g11{width:860px;}.g12{width:940px;}.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12{overflow:hidden;float:left;display:inline;margin:0 10px;}.row{width:960px;overflow:hidden;margin:0 auto;}.row .row{width:auto;display:inline-block;margin:0 -10px;}

/* Common styling */
.center {text-align:center}
.right {text-align:right}
.left {text-align:left}
.fright {float:right}
.fleft {float:left}
strong,.strong {font-weight:900}
em,.em {background:#FF9}
small,.small {font-size:.7em}

/* Style sheet -  */
body {}
 #navtop {}
  #navtop div ul li {display:inline}
 #header {}
  #header div h1 {}
 #nav {}
  #nav div ul li {display:inline}
 #content {}
  #sidebar-one {}
  #sidebar-two {}
  #main {}
 #footer {}
  #footer div {}

div {outline:1px solid #069 /* this is for debugging */}
</style>
</head>

<body>

	<div id="navtop" class="row">
		<div class="g12">
        	<ul class="right">
            	<li><a href="#">Item1</a></li>
            	<li><a href="#">Item2</a></li>
            	<li><a href="#">Item3</a></li>
            	<li><a href="#">Item4</a></li>
            </ul>
    	</div>
    </div>

	<div id="header" class="row">
		<div class="g12">
        	<h1>Heading</h1>
    	</div>
    </div>

	<div id="nav" class="row">
		<div class="g12">
        	<ul>
            	<li><a href="#">Item1</a></li>
            	<li><a href="#">Item2</a></li>
            	<li><a href="#">Item3</a></li>
            	<li><a href="#">Item4</a></li>
            </ul>
    	</div>
    </div>

	<div id="content" class="row">
		<div id="sidebar-one" class="g3">
        	<h4>Heading4</h4>
    	</div>
		
        <div id="main" class="g6">
        	<h2>Heading2</h2>
            <p>Paragraph</p>
        	<h3>Heading3</h3>
    	</div>
        
		<div id="sidebar-two" class="g3">
        	<h4>Heading4</h4>
    	</div>
    </div>

	<div id="footer" class="row">
		<div class="g12">
        	<p>Paragraph</p>
    	</div>
    </div>
		
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			/* jQuery magic here */
		});
	</script>

</body>
</html>

Revision: 26108
at May 18, 2010 08:38 by LuckyShot


Updated Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>@@@@@@@@@</title>
<style type="text/css">
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.8.1
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}

/* 1KB grid - 12 columns, 60 pixels each, with 20 pixel gutter */
.g1{width:60px;}.g2{width:140px;}.g3{width:220px;}.g4{width:300px;}.g5{width:380px;}.g6{width:460px;}.g7{width:540px;}.g8{width:620px;}.g9{width:700px;}.g10{width:780px;}.g11{width:860px;}.g12{width:940px;}.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12{overflow:hidden;float:left;display:inline;margin:0 10px;}.row{width:960px;overflow:hidden;margin:0 auto;}.row .row{width:auto;display:inline-block;margin:0 -10px;}

/* Common styling */
.center {text-align:center}
.right {text-align:right}
.left {text-align:left}
.fright {float:right}
.fleft {float:left}
strong {font-weight:900}
em {background:#FF9}
small {font-size:.7em}

/* Style sheet -  */
body {}
 #navtop {}
  #navtop div ul li {display:inline}
 #header {}
  #header div h1 {}
 #nav {}
  #nav div ul li {display:inline}
 #content {}
  #sidebar-one {}
  #sidebar-two {}
  #main {}
 #footer {}
  #footer div {}

div {outline:1px solid #069}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		
	});
</script>
</head>

<body>

	<div id="navtop" class="row">
		<div class="g12">
        	<ul class="right">
            	<li><a href="#">Item1</a></li>
            	<li><a href="#">Item2</a></li>
            	<li><a href="#">Item3</a></li>
            	<li><a href="#">Item4</a></li>
            </ul>
    	</div>
    </div>

	<div id="header" class="row">
		<div class="g12">
        	<h1>Heading</h1>
    	</div>
    </div>

	<div id="nav" class="row">
		<div class="g12">
        	<ul>
            	<li><a href="#">Item1</a></li>
            	<li><a href="#">Item2</a></li>
            	<li><a href="#">Item3</a></li>
            	<li><a href="#">Item4</a></li>
            </ul>
    	</div>
    </div>

	<div id="content" class="row">
		<div id="sidebar-one" class="g3">
        	<h4>Heading4</h4>
    	</div>
		
        <div id="main" class="g6">
        	<h2>Heading2</h2>
            <p>Paragraph</p>
        	<h3>Heading3</h3>
    	</div>
        
		<div id="sidebar-two" class="g3">
        	<h4>Heading4</h4>
    	</div>
    </div>

	<div id="footer" class="row">
		<div class="g12">
        	<p>Paragraph</p>
    	</div>
    </div>

</body>
</html>

Revision: 26107
at April 17, 2010 17:05 by LuckyShot


Updated Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>@@@@@@@@@</title>
<style type="text/css">
/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.8.0r4
*/
body{margin:10px;}h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong,dt{font-weight:bold;}optgroup{font-weight:normal;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;}em{font-style:italic;}del{text-decoration:line-through;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{border:1px solid #000;padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}sup{vertical-align:super;}sub{vertical-align:sub;}p,fieldset,table,pre{margin-bottom:1em;}button,input[type="checkbox"],input[type="radio"],input[type="reset"],input[type="submit"]{padding:1px;}

/* 1KB grid - 12 columns, 60 pixels each, with 20 pixel gutter */
.g1{width:60px;}.g2{width:140px;}.g3{width:220px;}.g4{width:300px;}.g5{width:380px;}.g6{width:460px;}.g7{width:540px;}.g8{width:620px;}.g9{width:700px;}.g10{width:780px;}.g11{width:860px;}.g12{width:940px;}.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12{overflow:hidden;float:left;display:inline;margin:0 10px;}.row{width:960px;overflow:hidden;margin:0 auto;}.row .row{width:auto;display:inline-block;margin:0 -10px;}

/* Common styling */
.center {text-align:center}
.right {text-align:right}
.left {text-align:left}
.fright {float:right}
.fleft {float:left}
strong {font-weight:900}
em {background:#FF9}
small {font-size:.7em}

/* Style sheet -  */
body {}
 #navtop {}
  #navtop div ul li {display:inline}
 #header {}
  #header div h1 {}
 #nav {}
  #nav div ul li {display:inline}
 #content {}
  #sidebar-one {}
  #sidebar-two {}
  #main {}
 #footer {}
  #footer div {}

div {outline:1px solid #069}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		
	});
</script>
</head>

<body>

	<div id="navtop" class="row">
		<div class="g12">
        	<ul class="right">
            	<li><a href="#">Item1</a></li>
            	<li><a href="#">Item2</a></li>
            	<li><a href="#">Item3</a></li>
            	<li><a href="#">Item4</a></li>
            </ul>
    	</div>
    </div>

	<div id="header" class="row">
		<div class="g12">
        	<h1>Heading</h1>
    	</div>
    </div>

	<div id="nav" class="row">
		<div class="g12">
        	<ul>
            	<li><a href="#">Item1</a></li>
            	<li><a href="#">Item2</a></li>
            	<li><a href="#">Item3</a></li>
            	<li><a href="#">Item4</a></li>
            </ul>
    	</div>
    </div>

	<div id="content" class="row">
		<div id="sidebar-one" class="g3">
        	<h4>Heading4</h4>
    	</div>
		
        <div id="main" class="g6">
        	<h2>Heading2</h2>
            <p>Paragraph</p>
        	<h3>Heading3</h3>
    	</div>
        
		<div id="sidebar-two" class="g3">
        	<h4>Heading4</h4>
    	</div>
    </div>

	<div id="footer" class="row">
		<div class="g12">
        	<p>Paragraph</p>
    	</div>
    </div>

</body>
</html>

Revision: 26106
at April 17, 2010 16:52 by LuckyShot


Initial Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>@@@@@@@@@</title>
<style type="text/css">
/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.8.0r4
*/
body{margin:10px;}h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong,dt{font-weight:bold;}optgroup{font-weight:normal;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;}em{font-style:italic;}del{text-decoration:line-through;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{border:1px solid #000;padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}sup{vertical-align:super;}sub{vertical-align:sub;}p,fieldset,table,pre{margin-bottom:1em;}button,input[type="checkbox"],input[type="radio"],input[type="reset"],input[type="submit"]{padding:1px;}

/* 1KB grid - 12 columns, 60 pixels each, with 20 pixel gutter */
.g1{width:60px;}.g2{width:140px;}.g3{width:220px;}.g4{width:300px;}.g5{width:380px;}.g6{width:460px;}.g7{width:540px;}.g8{width:620px;}.g9{width:700px;}.g10{width:780px;}.g11{width:860px;}.g12{width:940px;}.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12{overflow:hidden;float:left;display:inline;margin:0 10px;}.row{width:960px;overflow:hidden;margin:0 auto;}.row .row{width:auto;display:inline-block;margin:0 -10px;}

/* Common styling */
.center {text-align:center}
.right {text-align:right}
.fright {float:right}
.fleft {float:left}
strong {font-weight:900}
em {background:#FF9}
small {font-size:.7em}

/* Style sheet -  */
body {}
 #navtop {}
 #header {}
  #header div h1 {}
 #nav {}
  #nav div ul li {}
 #content {}
  #sidebar-one {}
  #sidebar-two {}
  #main {}
 #footer {}
  #footer div {}

div div {background:#069}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		
	});
</script>
</head>

<body>

	<div id="navtop" class="row">
		<div class="g12 right">
        	<ul>
            	<li><a href="#">Item</a></li>
            	<li><a href="#">Item</a></li>
            	<li><a href="#">Item</a></li>
            	<li><a href="#">Item</a></li>
            </ul>
    	</div>
    </div>

	<div id="header" class="row">
		<div class="g12">
        	<h1>Heading</h1>
    	</div>
    </div>

	<div id="nav" class="row">
		<div class="g12">
        	<ul>
            	<li><a href="#">Item</a></li>
            	<li><a href="#">Item</a></li>
            	<li><a href="#">Item</a></li>
            	<li><a href="#">Item</a></li>
            </ul>
    	</div>
    </div>

	<div id="content" class="row">
		<div id="sidebar-one" class="g3">
        	1
    	</div>
		<div id="main" class="g6">
        	2
    	</div>
		<div id="sidebar-two" class="g3">
        	3
    	</div>
    </div>

	<div id="footer" class="row">
		<div class="g12">
        	F
    	</div>
    </div>

</body>
</html>

Initial URL


Initial Description


Initial Title
Web Template - HTML, CSS and JS ready to start coding (1KB 960px mod, Yahoo Reset, jQuery, XHTML strict)

Initial Tags
css, js, html, jquery

Initial Language
HTML