WebMonkey Beta 2.0: The Web Developer's Resource

Help|
Rss feeds
- Rss feeds
- Subscribe to:
- Tutorials
- Reference
- Code library
- All articles
- Monkey Bites Blog

Member Sign In

Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.

It's fast and free.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Join Webmonkey

E-mail address:

Username:

Password:

Confirm password:

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.

Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.

Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

Webmonkey is a property of Wired Digital.

processing...

Welcome to Webmonkey

A private profile page has been created for you.

As a member of Webmonkey, you can now:

edit articles
add to the code library
design and write a tutorial
comment on any Webmonkey article

Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.

If you cannot find it in your in-box, please check your bulk or junk folders.

Webmonkey is a property of Wired Digital.

Blank HTML Document With Left Nav

/skill level/

/viewed/

0 Times

This is a blank HTML document with a header, footer, a main content area and separate column for navigational elements on the left. If you want to make a web page with a simple two-column layout, copy and paste this code into a text editor and start typing your awesome content.

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>My Web Page</title>
	
	<style type="text/css">
		* { margin: 0; padding: 0; }

		html { height:100%; }

		body {
		text-align: left; 
		width: 100%;
		height: 100%;
		font-size: 62.5%; 
		font-family: Helvetica, arial, sans-serif;
		color: #000;
		background: #fff;
		margin: 0;
		border: 0;
		padding: 0; }

		a { color:#007ca5; text-decoration:none; outline: none; }
		a:visited { color:#666; } 
		a:active { color:#999; } 
		
		.left_col a { color:#fff; text-decoration: none; outline: none; }
		.left_col a:hover { color:#fff; text-decoration: underline; outline: none; }
		.left_col a:visited { color:#fff; } 
		.left_col a:active { color:#fff; }

    
		img, a img { border-style: none; }
	
		h1, .h1 { font-size: 2.4em; }
		h2, .h2 { font-size: 2em; } /* 20pt */
		h3, .h3 { font-size: 1.8em; } /* 18pt */
		h4, .h4 { font-size: 1.6em; } /* 16pt */
		h5, .h5 { font-size: 1.4em; } /* 14pt */
		h6, .h6 { font-size: 1.1em; } /* 11pt */

		.small { font-size: .9em; }

		.clearer { clear:both; }

		.header {
			text-align: left;
			background: #4f0f00;
			color: #fff;
			width: 980px;
			margin: 0 0 0 0;
			border: 0;
			padding: 10px;
			overflow: hidden;
			}

		.left_col {
			text-align: left;
			float: left;
			background: #007ca5;
			color: #fff;
			width: 160px;
			height: 600px;
			margin: 0 0 0 0;
			border: 0;
			padding: 10px;
			overflow: hidden;
			}
	
		.main_col {
			text-align: left;
			float: right;
			background: #fff;
			color: #000;
			width: 800px;
			height: 600px;
			margin: 0 0 0 0;
			border: 0;
			padding: 10px;
			overflow: hidden;
			}

		.footer {
			text-align: left;
			background: #eceae1;
			color: #000;
			width: 980px;
			margin: 0 0 0 0;
			border: 0;
			padding: 10px;
			overflow: hidden;
			}
			
		.wrapper {
			text-align: center;
			width: 1000px;
			margin-left: auto;
			margin-right: auto;
			}
			

	</style>

</head>
<body>

  	<div class="wrapper">

		<div class="header">

			<br />
			<h1>Header content goes here</h1>
			(980px wide + 10px padding)
		
			<br /><br />

		</div>


		<div class="left_col">

			<h5>Left column content goes here</h5>
			(160px wide + 10px padding)

		</div>

		<div class="main_col">

			<h2>Main content goes here</h2>
			(800px wide + 10px padding)

		</div>


		<br class="clearer" /">


		<div class="footer">

			<span class="small">
				Tiny footer content goes here
				<br />
				(980px wide + 10px padding)
			</span>

		</div>
	
  	</div>
  
</body>
</html>

Retrieved from "http://rprod.webmonkey.com/codelibrary/Blank_HTML_Document_With_Left_Nav"