<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Feststehende Kopf- und Fußzeile</title>
<style type="text/css">
/* ############# Grunddesign ############### */
/* gestaltet kompletten Body Bereich */
body
{
position:absolute;
background:#000000; /* schwarz*/
behavior: url("Stylesheet/csshover3-source.htc");
}
html, body
{
top:0; left:0; right:0;
min-height:100%;
margin:0;
padding:0;
width:100%;
font: 85% arial, hevetica, sans-serif; /* Textformat */
color: blue; /* Textfarbe */
background-image: url(Stylesheet/1.gif); /* hintergrundbild */
overflow:auto;/* scrollbalken wenn benötigt */
}
/* ############# Inhaltsbereich ############# */
#content
{
margin:0;
padding-top:4.85em;
padding-left:15em;
padding-bottom:3em;
z-index:0; /* als unterste Ebene deklariert */
overflow:auto /* scrollbalken wenn benötigt */
}
/* ################ Menü ################# */
#Navigation
{
position:fixed;
top:5em;
left:.5em;
width:40mm;
padding:.5em;
background-color: #FBF2B7; /* Hintergrundfarbe der Navi */
}
/* Einstellungen für die unsortierte Liste */
ul#Navigation
{
width:35mm; /* Breite */
margin: .3em; padding: .7em; /* Abstand der Navi links und rechts*/
border: 0px; /* Randstärke der Navi */
background-color: #FBF2B7; /* Hintergrundfarbe der Navi */
z-index:10;
}
/* Einstellungen für die Listeneinträge */
ul#Navigation li
{
position:relative;
list-style: none; /* Liste ohne Punkt */
margin: 0.5em; padding: 0.05em; /* Abstand der Listeneinträge */
}
/* Einstellungen für die Unterpunkte*/
ul#Navigation li ul
{
position: absolute;
top: 5px;
left: 2em;
display:none; /* Submenü ausblenden */
z-index:50;
}
/* Einstellungen für die Listeneinträge bei Mouseover */
ul#Navigation li:hover ul, li:active, li:focus
{
display:block; /* Submenü einblenden */
z-index:50;
}
/* Einstellungen für die Zweite Ebene */
ul#Navigation li ul li
{
margin: 0.1em 0; /* Abstand der Unterpunkte */
}
/*Einstellungen der Hyperlinks - Button*/
ul#Navigation a, ul#Navigation span
{
display:block; /* der gesamte Bereich als Hyperlink */
width: 100%; /* gesamte Breite nutzen */
padding: 0.1em; /* Größe des Bereichs außerhalb der Schrift */
text-decoration: none; /* keine Linkunterstreichung*/
font: 1em;
font-weight:bold; /* fette Schrift */
border: 1px solid #A28520; /* Umrandung */
border-left-color: #D9B742; border-top-color: #D9B742; /* links u. oben Randfarbe */
color: black; background-color: #FDFCCE; /* Schrift- und Hintergrundfarbe */
}
/*Einstellungen der Hyperlinks bei Mouseover*/
ul#Navigation a:hover, ul#Navigation span
{
border-color: white; /* Linkfarbe Mouseover */
border-left-color: #F8CF7C; border-top-color: #F8CF7C;
/* Randfarbe links und oben Mouseover */
color: #D69714; background-color: #FDFCCE;
/* Schrift- und Hintergrundfarbe Mouseover */
}
/* +++++ Einstellungen für den IE unter Version 8 ++++ */
/* Der IE soll das Element breiter darstellen,*/
/* da margin und padding hier von der Breite abgezogen wird! */
* html #Navigation
{
margin:0;
width:10.5em;
}
* html #Navigation
{
position:absolute;
}
/*--nur für IE 7 erkennbar -> +* -*/
* + html #Navigation ul li
{
float: left;
width: 100%;
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
* html #Navigation ul li
{
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body
{
behavior: url("Stylesheet/csshover3-source.htc");
font-size: 100%;
}
*html #Navigation ul li a
{
height: 1%;
}
/* Korrekturen fuer IE 5.x */
* html ul#Navigation
{
width: 40mm;
w\idth: 40mm;
padding-left: 0;
padd\ing-left: 0.3em;
}
* html ul#Navigation li ul li
{
margin-left: 0.1em;
ma\rgin-left: 0;
}
/* ######### Nur für den MS Internet Explorer ############ */
* html, * html body
{
overflow:hidden;
bottom:0;
height:100%;
}
* html #content
{
position:absolute;
top:0; bottom:0; left:0; right:0;
height:100%;
width:100%;
overflow:auto;
margin:0;
}
</style>
<!--[if lt IE 8]>
<style type="text/css" media="screen">
ul#Navigation li { position:static; }
ul#Navigation li.onhover, ul#Navigation li:hover { position:relative; }
</style>
<![endif]-->
</head>
<body>
<!-- ######## Inhalte der einzelnen Bereiche #########-->
<!-- eigentliches Navi in Form einer unsortierten Liste mit der ID "Navigation" -->
<ul id="Navigation">
<li><a href="aktu.html" target="mitte">Aktuelles</a></li><br>
<li><a href="index.html" target="mitte">Home</a>
<ul>
<li><a href="haus.html" target="mitte">unser Haus</a></li>
<li><a href="geschichte.html" target="mitte">Geschichte</a></li>
<li><a href="futter.html" target="mitte">Futterstellen</a></li>
<li><a href="chronik.html" target="mitte">Kurzchronik</a></li>
</ul>
</li>
<li><a href="vermitt.html" target="mitte">Vermittlung</a>
<ul>
<li><a href="neuzu.html" target="mitte">Neuzugänge</a></li>
<li><a href="sorgen.html" target="mitte">Sorgenkinder</a></li>
<li><a href="tipps.html" target="mitte">Tipps</a></li>
<li><a href="suche.html" target="mitte">Vermisst</a></li>
</ul>
</li>
<li><a href="uns.html" target="mitte">um uns gehts</a>
<ul>
<li><a href="schick.html" target="mitte">Schicksale</a></li>
<li><a href="foto.html" target="mitte">Fotoalbum</a></li>
<li><a href="gedenken.html" target="mitte">in Gedenken</a></li>
</ul>
</li>
</ul>
<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste-->
<!-- Inhalt -->
<div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>
