01-Scripts/design.html

## design.html
<!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="de" lang="de">

<head>
    <title>Codeschnipsel: Seitengestaltung mit PHP - by 01-Scripts.de</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="author" content="Michael Lorer - www.01-scripts.de" />
    <meta name="description" content="Seitengesaltung und -Aufteilung mit HTML, CSS & PHP" />

    <!-- Lizenziert unter Creative Commons Namensnennung 3.0 Deutschland (CC BY 3.0)
         http://creativecommons.org/licenses/by/3.0/de/ -->

	 <link rel="stylesheet" media="all" href="system/style.css" type="text/css" />

</head>

<body>

<div id="logo" class="center_container">
	<h1>Logo</h1>
</div>

<div id="navigation" class="center_container">
	<ul>
		<li><a href="#">Navigationspunkt 1</a></li>
		<li><a href="#">Navigationspunkt 2</a></li>
		<li><a href="#">Navigationspunkt 3</a></li>
		<li><a href="#">Navigationspunkt 4</a></li>
		<li><a href="#">Navigationspunkt 5</a></li>
	</ul>
</div>

<div id="content" class="center_container">
<h1>Codeschnipsel: Seitengestaltung mit PHP - by 01-Scripts.de</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id urna neque. Aenean vehicula congue arcu eget condimentum. Mauris feugiat velit sit amet lectus pulvinar blandit. Phasellus metus urna, pretium sed interdum sit amet, pellentesque eget elit. Cras eget massa neque, eu rutrum augue. Praesent dui mi, cursus eu sollicitudin ut, tristique non enim. Etiam euismod gravida libero, a sodales mi molestie et. Nunc ullamcorper varius velit nec commodo. Pellentesque urna erat, volutpat vitae lacinia sit amet, laoreet eu sem. Vestibulum molestie velit vitae nunc adipiscing ac fermentum leo egestas.</p>

<p>Pellentesque vestibulum accumsan tempor. Donec turpis lacus, varius eu molestie sed, euismod ac nunc. Sed commodo, tellus nec molestie vestibulum, sem ante molestie nisl, eget pellentesque lorem purus vitae tellus. Sed convallis, diam at scelerisque luctus, justo ligula pulvinar nulla, id dictum est ipsum in dui. Nullam semper rutrum sagittis. Nunc orci lectus, venenatis a blandit non, fermentum vitae ipsum. Ut at nisi quam. Proin faucibus est in massa dapibus sed facilisis neque convallis. Nunc condimentum venenatis aliquet. Fusce sed imperdiet est. In hac habitasse platea dictumst. Vivamus a elit lorem. Aliquam volutpat leo at lorem facilisis imperdiet.</p>

<p>Mauris quis diam quis eros pellentesque venenatis non a quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur magna tortor, fringilla quis dignissim ut, mattis non nulla. Nullam placerat felis eu nibh hendrerit tincidunt. Ut vestibulum cursus ipsum et condimentum. Ut non velit mi. Proin vel nulla a lorem pretium elementum. Nulla facilisi. Pellentesque a lacinia massa. Aenean purus odio, gravida quis tristique a, rhoncus ut justo. Ut eget lorem in turpis lobortis pretium. Donec rhoncus vestibulum pharetra. Integer tincidunt mollis dolor, et mollis augue auctor elementum. Maecenas at nulla ante. Curabitur vitae felis neque. Aliquam sed libero velit, a hendrerit mauris.</p>

<p>Donec nec tortor ut nunc semper aliquam. Fusce in nunc tortor, eget feugiat ante. Ut ultricies viverra lectus, vel euismod libero egestas id. Etiam accumsan iaculis dapibus. Vivamus a leo non dolor pretium accumsan ac ut mi. Donec semper lacus sed purus lobortis congue. Phasellus at tortor diam, id rutrum tellus. Donec vehicula, erat ac fermentum euismod, nisl ante bibendum odio, ut eleifend orci ligula ut orci. Phasellus eu orci non nulla mattis facilisis. Vestibulum ac porta nulla.</p>

<p>Donec faucibus porta purus, eu ullamcorper turpis aliquet quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc et augue dolor. Curabitur venenatis, lorem at fringilla vestibulum, nibh tellus cursus orci, id pretium lectus nibh ac nisl. Pellentesque augue turpis, ornare eu pulvinar sit amet, scelerisque ac elit. Fusce eu turpis non mi tempus faucibus vehicula eget arcu. Aenean convallis imperdiet sem, nec vehicula dui molestie tristique. Aliquam aliquam iaculis egestas. Proin interdum lobortis lectus non viverra. Proin sit amet ipsum in mauris dapibus auctor.</p>
</div>


<div id="footer" class="center_container">
	<p class="center">Dieser Beitrag ist unter der <a href="http://creativecommons.org/licenses/by/3.0/de/">Creative Commons Namensnennung 3.0 Deutschland</a> lizensiert.<br />
Bearbeitung, Nutzung &amp; Verbreitung ist ausdr&uuml;cklich gestattet.</p>
</div>

</body>
</html>

## foot.php
</div>


<div id="footer" class="center_container">
	<p class="center">Dieser Beitrag ist unter der <a href="http://creativecommons.org/licenses/by/3.0/de/">Creative Commons Namensnennung 3.0 Deutschland</a> lizensiert.<br />
Bearbeitung, Nutzung &amp; Verbreitung ist ausdr&uuml;cklich gestattet.</p>
</div>

</body>
</html>

## head.php
<!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="de" lang="de">

<head>
    <title>Codeschnipsel: Seitengestaltung mit PHP - by 01-Scripts.de</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="author" content="Michael Lorer - www.01-scripts.de" />
    <meta name="description" content="Seitengesaltung und -Aufteilung mit HTML, CSS & PHP" />

    <!-- Lizenziert unter Creative Commons Namensnennung 3.0 Deutschland (CC BY 3.0)
         http://creativecommons.org/licenses/by/3.0/de/ -->

	 <link rel="stylesheet" media="all" href="system/style.css" type="text/css" />

</head>

<body>

<div id="logo" class="center_container">
	<h1>Logo</h1>
</div>

<div id="navigation" class="center_container">
	<ul>
		<li><a href="#">Navigationspunkt 1</a></li>
		<li><a href="#">Navigationspunkt 2</a></li>
		<li><a href="#">Navigationspunkt 3</a></li>
		<li><a href="#">Navigationspunkt 4</a></li>
		<li><a href="#">Navigationspunkt 5</a></li>
	</ul>
</div>

<div id="content" class="center_container">

## index.php
<?PHP include("system/head.php"); ?>

<h1>Codeschnipsel: Seitengestaltung mit PHP - by 01-Scripts.de</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id urna neque. Aenean vehicula congue arcu eget condimentum. Mauris feugiat velit sit amet lectus pulvinar blandit. Phasellus metus urna, pretium sed interdum sit amet, pellentesque eget elit. Cras eget massa neque, eu rutrum augue. Praesent dui mi, cursus eu sollicitudin ut, tristique non enim. Etiam euismod gravida libero, a sodales mi molestie et. Nunc ullamcorper varius velit nec commodo. Pellentesque urna erat, volutpat vitae lacinia sit amet, laoreet eu sem. Vestibulum molestie velit vitae nunc adipiscing ac fermentum leo egestas.</p>

<p>Pellentesque vestibulum accumsan tempor. Donec turpis lacus, varius eu molestie sed, euismod ac nunc. Sed commodo, tellus nec molestie vestibulum, sem ante molestie nisl, eget pellentesque lorem purus vitae tellus. Sed convallis, diam at scelerisque luctus, justo ligula pulvinar nulla, id dictum est ipsum in dui. Nullam semper rutrum sagittis. Nunc orci lectus, venenatis a blandit non, fermentum vitae ipsum. Ut at nisi quam. Proin faucibus est in massa dapibus sed facilisis neque convallis. Nunc condimentum venenatis aliquet. Fusce sed imperdiet est. In hac habitasse platea dictumst. Vivamus a elit lorem. Aliquam volutpat leo at lorem facilisis imperdiet.</p>

<p>Mauris quis diam quis eros pellentesque venenatis non a quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur magna tortor, fringilla quis dignissim ut, mattis non nulla. Nullam placerat felis eu nibh hendrerit tincidunt. Ut vestibulum cursus ipsum et condimentum. Ut non velit mi. Proin vel nulla a lorem pretium elementum. Nulla facilisi. Pellentesque a lacinia massa. Aenean purus odio, gravida quis tristique a, rhoncus ut justo. Ut eget lorem in turpis lobortis pretium. Donec rhoncus vestibulum pharetra. Integer tincidunt mollis dolor, et mollis augue auctor elementum. Maecenas at nulla ante. Curabitur vitae felis neque. Aliquam sed libero velit, a hendrerit mauris.</p>

<p>Donec nec tortor ut nunc semper aliquam. Fusce in nunc tortor, eget feugiat ante. Ut ultricies viverra lectus, vel euismod libero egestas id. Etiam accumsan iaculis dapibus. Vivamus a leo non dolor pretium accumsan ac ut mi. Donec semper lacus sed purus lobortis congue. Phasellus at tortor diam, id rutrum tellus. Donec vehicula, erat ac fermentum euismod, nisl ante bibendum odio, ut eleifend orci ligula ut orci. Phasellus eu orci non nulla mattis facilisis. Vestibulum ac porta nulla.</p>

<p>Donec faucibus porta purus, eu ullamcorper turpis aliquet quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc et augue dolor. Curabitur venenatis, lorem at fringilla vestibulum, nibh tellus cursus orci, id pretium lectus nibh ac nisl. Pellentesque augue turpis, ornare eu pulvinar sit amet, scelerisque ac elit. Fusce eu turpis non mi tempus faucibus vehicula eget arcu. Aenean convallis imperdiet sem, nec vehicula dui molestie tristique. Aliquam aliquam iaculis egestas. Proin interdum lobortis lectus non viverra. Proin sit amet ipsum in mauris dapibus auctor.</p>

<?PHP include("system/foot.php"); ?>

## style.css
body {
	margin: 0 auto;
	color: #000;
	}

ul,li {
	padding: 0;
	}

.center_container {
	width: 1110px;
	margin: 0 auto;
	background-color: #FFF;
	}

#logo {
	height: 100px;
	}

#navigation {
	width: 1090px;
	height: 27px;
	background-color: #202047;
	border-bottom: 2px solid #f8a000;

	color: #FFF;

	padding-top: 13px;
	padding-left: 20px;
}


#content {

}

#footer {
	height: 65px;
	background-color: #919191;
	border-top: 25px solid #FFF;
}


#navigation ul {
	list-style: none;
	margin: -3px 0 0 40px;
	padding: 0;
	}

#navigation li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 15pt;
	margin-left:40px;
	display: inline;
	margin: 0;
	padding-right: 40px;

}

#navigation a:link,
#navigation a:visited,
#navigation a:hover,
#navigation a:active {
	color: #FFF;
	text-decoration:none
	}
#navigation a:hover {
	color: #F8A000;
	}

p.center {
	text-align: center;
}
	<!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="de" lang="de">

	<head>
	<title>Codeschnipsel: Seitengestaltung mit PHP - by 01-Scripts.de</title>

	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<meta name="author" content="Michael Lorer - www.01-scripts.de" />
	<meta name="description" content="Seitengesaltung und -Aufteilung mit HTML, CSS & PHP" />

	<!-- Lizenziert unter Creative Commons Namensnennung 3.0 Deutschland (CC BY 3.0)
	http://creativecommons.org/licenses/by/3.0/de/ -->

	<link rel="stylesheet" media="all" href="system/style.css" type="text/css" />

	</head>

	<body>

	<div id="logo" class="center_container">
	<h1>Logo</h1>
	</div>

	<div id="navigation" class="center_container">
	<ul>
	<li><a href="#">Navigationspunkt 1</a></li>
	<li><a href="#">Navigationspunkt 2</a></li>
	<li><a href="#">Navigationspunkt 3</a></li>
	<li><a href="#">Navigationspunkt 4</a></li>
	<li><a href="#">Navigationspunkt 5</a></li>
	</ul>
	</div>

	<div id="content" class="center_container">
	<h1>Codeschnipsel: Seitengestaltung mit PHP - by 01-Scripts.de</h1>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id urna neque. Aenean vehicula congue arcu eget condimentum. Mauris feugiat velit sit amet lectus pulvinar blandit. Phasellus metus urna, pretium sed interdum sit amet, pellentesque eget elit. Cras eget massa neque, eu rutrum augue. Praesent dui mi, cursus eu sollicitudin ut, tristique non enim. Etiam euismod gravida libero, a sodales mi molestie et. Nunc ullamcorper varius velit nec commodo. Pellentesque urna erat, volutpat vitae lacinia sit amet, laoreet eu sem. Vestibulum molestie velit vitae nunc adipiscing ac fermentum leo egestas.</p>

	<p>Pellentesque vestibulum accumsan tempor. Donec turpis lacus, varius eu molestie sed, euismod ac nunc. Sed commodo, tellus nec molestie vestibulum, sem ante molestie nisl, eget pellentesque lorem purus vitae tellus. Sed convallis, diam at scelerisque luctus, justo ligula pulvinar nulla, id dictum est ipsum in dui. Nullam semper rutrum sagittis. Nunc orci lectus, venenatis a blandit non, fermentum vitae ipsum. Ut at nisi quam. Proin faucibus est in massa dapibus sed facilisis neque convallis. Nunc condimentum venenatis aliquet. Fusce sed imperdiet est. In hac habitasse platea dictumst. Vivamus a elit lorem. Aliquam volutpat leo at lorem facilisis imperdiet.</p>

	<p>Mauris quis diam quis eros pellentesque venenatis non a quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur magna tortor, fringilla quis dignissim ut, mattis non nulla. Nullam placerat felis eu nibh hendrerit tincidunt. Ut vestibulum cursus ipsum et condimentum. Ut non velit mi. Proin vel nulla a lorem pretium elementum. Nulla facilisi. Pellentesque a lacinia massa. Aenean purus odio, gravida quis tristique a, rhoncus ut justo. Ut eget lorem in turpis lobortis pretium. Donec rhoncus vestibulum pharetra. Integer tincidunt mollis dolor, et mollis augue auctor elementum. Maecenas at nulla ante. Curabitur vitae felis neque. Aliquam sed libero velit, a hendrerit mauris.</p>

	<p>Donec nec tortor ut nunc semper aliquam. Fusce in nunc tortor, eget feugiat ante. Ut ultricies viverra lectus, vel euismod libero egestas id. Etiam accumsan iaculis dapibus. Vivamus a leo non dolor pretium accumsan ac ut mi. Donec semper lacus sed purus lobortis congue. Phasellus at tortor diam, id rutrum tellus. Donec vehicula, erat ac fermentum euismod, nisl ante bibendum odio, ut eleifend orci ligula ut orci. Phasellus eu orci non nulla mattis facilisis. Vestibulum ac porta nulla.</p>

	<p>Donec faucibus porta purus, eu ullamcorper turpis aliquet quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc et augue dolor. Curabitur venenatis, lorem at fringilla vestibulum, nibh tellus cursus orci, id pretium lectus nibh ac nisl. Pellentesque augue turpis, ornare eu pulvinar sit amet, scelerisque ac elit. Fusce eu turpis non mi tempus faucibus vehicula eget arcu. Aenean convallis imperdiet sem, nec vehicula dui molestie tristique. Aliquam aliquam iaculis egestas. Proin interdum lobortis lectus non viverra. Proin sit amet ipsum in mauris dapibus auctor.</p>
	</div>


	<div id="footer" class="center_container">
	<p class="center">Dieser Beitrag ist unter der <a href="http://creativecommons.org/licenses/by/3.0/de/">Creative Commons Namensnennung 3.0 Deutschland</a> lizensiert.<br />
	Bearbeitung, Nutzung & Verbreitung ist ausdrücklich gestattet.</p>
	</div>

	</body>
	</html>
	<?PHP include("system/head.php"); ?>

	<h1>Codeschnipsel: Seitengestaltung mit PHP - by 01-Scripts.de</h1>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id urna neque. Aenean vehicula congue arcu eget condimentum. Mauris feugiat velit sit amet lectus pulvinar blandit. Phasellus metus urna, pretium sed interdum sit amet, pellentesque eget elit. Cras eget massa neque, eu rutrum augue. Praesent dui mi, cursus eu sollicitudin ut, tristique non enim. Etiam euismod gravida libero, a sodales mi molestie et. Nunc ullamcorper varius velit nec commodo. Pellentesque urna erat, volutpat vitae lacinia sit amet, laoreet eu sem. Vestibulum molestie velit vitae nunc adipiscing ac fermentum leo egestas.</p>

	<p>Pellentesque vestibulum accumsan tempor. Donec turpis lacus, varius eu molestie sed, euismod ac nunc. Sed commodo, tellus nec molestie vestibulum, sem ante molestie nisl, eget pellentesque lorem purus vitae tellus. Sed convallis, diam at scelerisque luctus, justo ligula pulvinar nulla, id dictum est ipsum in dui. Nullam semper rutrum sagittis. Nunc orci lectus, venenatis a blandit non, fermentum vitae ipsum. Ut at nisi quam. Proin faucibus est in massa dapibus sed facilisis neque convallis. Nunc condimentum venenatis aliquet. Fusce sed imperdiet est. In hac habitasse platea dictumst. Vivamus a elit lorem. Aliquam volutpat leo at lorem facilisis imperdiet.</p>

	<p>Mauris quis diam quis eros pellentesque venenatis non a quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur magna tortor, fringilla quis dignissim ut, mattis non nulla. Nullam placerat felis eu nibh hendrerit tincidunt. Ut vestibulum cursus ipsum et condimentum. Ut non velit mi. Proin vel nulla a lorem pretium elementum. Nulla facilisi. Pellentesque a lacinia massa. Aenean purus odio, gravida quis tristique a, rhoncus ut justo. Ut eget lorem in turpis lobortis pretium. Donec rhoncus vestibulum pharetra. Integer tincidunt mollis dolor, et mollis augue auctor elementum. Maecenas at nulla ante. Curabitur vitae felis neque. Aliquam sed libero velit, a hendrerit mauris.</p>

	<p>Donec nec tortor ut nunc semper aliquam. Fusce in nunc tortor, eget feugiat ante. Ut ultricies viverra lectus, vel euismod libero egestas id. Etiam accumsan iaculis dapibus. Vivamus a leo non dolor pretium accumsan ac ut mi. Donec semper lacus sed purus lobortis congue. Phasellus at tortor diam, id rutrum tellus. Donec vehicula, erat ac fermentum euismod, nisl ante bibendum odio, ut eleifend orci ligula ut orci. Phasellus eu orci non nulla mattis facilisis. Vestibulum ac porta nulla.</p>

	<p>Donec faucibus porta purus, eu ullamcorper turpis aliquet quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc et augue dolor. Curabitur venenatis, lorem at fringilla vestibulum, nibh tellus cursus orci, id pretium lectus nibh ac nisl. Pellentesque augue turpis, ornare eu pulvinar sit amet, scelerisque ac elit. Fusce eu turpis non mi tempus faucibus vehicula eget arcu. Aenean convallis imperdiet sem, nec vehicula dui molestie tristique. Aliquam aliquam iaculis egestas. Proin interdum lobortis lectus non viverra. Proin sit amet ipsum in mauris dapibus auctor.</p>

	<?PHP include("system/foot.php"); ?>
	body {
	margin: 0 auto;
	color: #000;
	}

	ul,li {
	padding: 0;
	}

	.center_container {
	width: 1110px;
	margin: 0 auto;
	background-color: #FFF;
	}

	#logo {
	height: 100px;
	}

	#navigation {
	width: 1090px;
	height: 27px;
	background-color: #202047;
	border-bottom: 2px solid #f8a000;

	color: #FFF;

	padding-top: 13px;
	padding-left: 20px;
	}


	#content {

	}

	#footer {
	height: 65px;
	background-color: #919191;
	border-top: 25px solid #FFF;
	}


	#navigation ul {
	list-style: none;
	margin: -3px 0 0 40px;
	padding: 0;
	}

	#navigation li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 15pt;
	margin-left:40px;
	display: inline;
	margin: 0;
	padding-right: 40px;

	}

	#navigation a:link,
	#navigation a:visited,
	#navigation a:hover,
	#navigation a:active {
	color: #FFF;
	text-decoration:none
	}
	#navigation a:hover {
	color: #F8A000;
	}

	p.center {
	text-align: center;
	}