webpage with ton of layouts?

Discussion in 'CSS' started by mnymkr, Nov 15, 2006.

0
  1. #1
    I had the wonderul page bookmarked once with idk dozens of different layouts and their xhtml/css sheets. I can no longer find it. If anyone might have an inckling of what I am looking for please let me know.
     
    mnymkr, Nov 15, 2006 IP
  2. jared

    jared Peon

    Messages:
    231
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    jared, Nov 15, 2006 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I typically avoid using pre-generated layouts, and use wireframes instead. I have a couple here that you can use (SitePoint forum veterans will probably recognize them). Bear in mind that both of them use image replacement styling in the header section, so if you don't need a logo/brand image in the header, feel free to remove the style rules for it (and the span inside the H1 element).

    2 column layout:
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--

* {
	margin: 0;
	padding: 0;
}

body {
	background: #FFF;
	color: #000;
}

.skipLink {
	position: absolute;
	left: -999em;
}

	#header {
		background: #00F;
		color: #FFF;
	}	
		h1, h1 span {
			background: url('/images/header.png') no-repeat;
			height: 80px; /* just an example height */
			width: 618px; /* just an example width */
		}
			h1 span {
				display: block;
				margin-bottom: -80px; /* must be the same as the height of the image */
				position: relative;
				z-index: 1;
			}
			
		#header p {
			position: relative;
				top: -2em; 
		}
	
	#menu {
		float: left;
		list-style: none;
		width: 7em;
	}
		#menu li {
			display: inline;
		}
		
		#menu a {
			background: #F00;
			color: #FFF;
			display: block;
			text-decoration: none;
			width: 100%;
		}
		
		#menu a:hover {
			background: #FF0;
			color: #000
		}
	
	#content {
		margin-left: 7em;
	}
		#content h2 {
			text-align: center;
		}
		
		#content h3 {
			padding-left: 0.5em;
		}
		
		#content .section {
			padding: 0.5em 0;
		}
		
		#content p {
			padding: 0.25em 0.5em;
		}

#footer {
	background: #F0F;
	clear: both;
	color: inherit;
	padding: 1em 0;
}	
	#footer p {
		clear: left;
		text-align: center;
	}

-->
</style>
</head>
<body>
<div id="header">
	<h1><span></span>Level 1 Header</h1>
	<p>
		Tag Line
	</p>
</div>
<div id="main">
	<strong class="skipLink">Main Menu <a href="#content">(Skip to Content)</a></strong>
	<ul id="menu">
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
	</ul>
	<div id="content">
		<h2>Page Title</h2>
		<div class="section">
			<h3>Section Header</h3>
			<p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
		</div>
		<div class="section">
			<h3>Section Header</h3>
			<p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
		</div>
	</div>
</div>
<div id="footer">
	<p>
		Copyright &copy; 2006, Copyright Holder. All Rights Reserved.
	</p>
</div>
</body>
</html>
    HTML:
    3 column layout:
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--

* {
	margin: 0;
	padding: 0;
}

body {
	background: #FFF;
	color: #000;
}

.skipLink {
	position: absolute;
	left: -999em;
}

	#header {
		background: #00F;
		color: #FFF;
	}	
		h1, h1 span {
			background: url('/images/header.png') no-repeat;
			height: 80px; /* just an example height */
			width: 618px; /* just an example width */
		}
			h1 span {
				display: block;
				margin-bottom: -80px; /* must be the same as the height of the image */
				position: relative;
				z-index: 1;
			}
			
		#header p {
			position: relative;
				top: -2em; 
		}
	
	#main {
		float: left;
		margin-right: -12em; /* equal to the width of the #sidebar DIV container */
		width: 100%; /* DO NOT CHANGE OR REMOVE */
	}
		#menu {
			float: left;
			list-style: none;
			width: 7em;
		}
			#menu li {
				display: inline;
			}
			
			#menu a {
				background: #F00;
				color: #FFF;
				display: block;
				text-decoration: none;
				width: 100%;
			}
			
			#menu a:hover {
				background: #FF0;
				color: #000
			}
		
		#content {
			margin: 0 12em 0 7em; /* right margin is equal to the width of the sidebar, left margin is equal to the width of the menu */
		}
			#content h2 {
				text-align: center;
			}
			
			#content h3 {
				padding-left: 0.5em;
			}
			
			#content .section {
				padding: 0.5em 0;
			}
			
			#content p {
				padding: 0.25em 0.5em;
			}
	
	#sidebar {
		background: #999;
		color: #FFF;
		float: right;
		width: 12em;
	}
		#sidebar h2, #sidebar h3 {
			text-align: center;
		}
		
		#sidebar .section {
			padding: 0 0.25em
		}
		
		#sidebar p {
			padding: 0.25em 0.5em;
		}

#footer {
	background: #F0F;
	clear: both;
	color: #FFF;
	padding: 1em 0;
}	
	#footer p {
		clear: left;
		text-align: center;
	}

-->
</style>
</head>
<body>
<div id="header">
	<h1><span></span>Level 1 Header</h1>
	<p>
		Tag Line
	</p>
</div>
<div id="main">
	<strong class="skipLink">Main Menu <a href="#content">(Skip to Content)</a></strong>
	<ul id="menu">
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
	</ul>
	<div id="content">
		<h2>Page Title</h2>
		<div class="section">
			<h3>Section Header</h3>
			<p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
		</div>
		<div class="section">
			<h3>Section Header</h3>
			<p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
		</div>
	</div>
</div>
<div id="sidebar">
	<h2>Sidebar Title</h2>
	<div class="section">
		<h3>Section Header</h3>
		<p>Lorem ipsum...</p>
		<p>Lorem ipsum...</p>
		<p>Lorem ipsum...</p>
	</div>
	<div class="section">
		<h3>Section Header</h3>
		<p>Lorem ipsum...</p>
		<p>Lorem ipsum...</p>
		<p>Lorem ipsum...</p>
	</div>
</div>
<div id="footer">
	<p>
		Copyright &copy; 2006, Copyright Holder. All Rights Reserved.
	</p>
</div>
</body>
</html>
    HTML:
     
    Dan Schulz, Nov 17, 2006 IP