<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Beispiel-Layout mit Floatboxen, 2 Spalten 100% ,FauxColumns und FooterSticky</title>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
border:none;
}
html , body , #wrapper {
height:100%;
}
html {
background:url(wrapper_bg.png) 60% 0 repeat-y , url(html_bg.png) repeat-y;
width:100%;
max-width:1300px;
min-width:760px;
margin:0 auto;
}
#wrapper {
margin-bottom:-100px;
font: 100.01% tahoma , arial,helvetica, sans-serif;
}
#logo {
position:relative;
top:0;
left:0;
margin:0;
padding:0;
background:url(header_bg.png) repeat-x ;
height:236px;
width:100%;
}
#logo span {
position:absolute;
left:0px;
top:0;
height:250px;
width:100%;
background:url(bild.png) no-repeat;
display:block;
}
#inhalt {
width:60%;
float:left;
background:url(schatten.png) repeat-x ;
}
#inhalt h2 , #inhalt p {
padding:20px 20px 20px 95px;
color:#fff;
}
#news h2 , #news p {
padding:20px 20px 20px 145px;
color:#fff
}
#news {
width:40%;
float:left;
background:url(schatten.png) repeat-x;
}
#footer {
background:#222;
color:#fff;
clear:both;
height:100px;
}
#footer p {
margin: 0;
text-align:center;
color:#ddd;
}
/*Topnavi*/
UL#topnavi {
position:relative;
font-size:75%;
background:#87815f ;
overflow:hidden;
}
UL#topnavi LI {
float:right;
}
ul#topnavi LI A {
padding:15px;
color:#000;
text-decoration:none;
font-weight:bold;
display:block;
float:left;
text-decoration:underline;
}
ul#topnavi li A:hover {
text-decoration:none;
}
/* Horizontal*/
UL#hnavi {
height:70px;
width:100%;
background:#000;
}
UL#hnavi LI {
float:left;;
height:50px;
}
UL#hnavi LI A {
float:left;
padding:16px;
text-decoration:none;
font-weight:bold;
color:#fff;
}
UL#hnavi LI A:hover {
color:#ffa;
text-decoration:underline;
}
#grafik {
padding:20px 20px 20px 95px;
}
#grafik a {
color:#ffa;
}
</style>
<!--[if lt IE 10]>
<style type="text/css">
body {
background:#313131;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<ul id="topnavi">
<li><a href="#">Startseite </a></li>
<li><a href="#">Impressum </a></li>
<li><a href="#">kontakt </a></li>
</ul>
<h1 id="logo"><span></span>Pandora Softair</h1>
<ul id="hnavi">
<li><a href="#">Thema 1 </a></li>
<li><a href="#">Thema 2 </a></li>
<li><a href="#">Thema 3 </a></li>
</ul>
<!--++++++++++++++++++++++++++++++++++++++++ Ende Kopfbereich ++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
<div id="inhalt">
<h2>Inhalt</h2>
</div>
<div id="news">
<h2>Nachrichtentechnik</h2>
</div>
</div>
<!--++++++++++++++++++++++++++++++++++++ ende wrapper+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
<div id="footer">
<p>Footer</p>
</div>
<!--++++++++++++++++++++++++++++++++++++ ende Footer +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
</body>
</html>
