Thema: Mein Footer verschwindet in der Tablet und Mobile-Ansicht
Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 15.05.2016, 13:43
leverkusenerjung leverkusenerjung ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 13.12.2010
Beiträge: 19
leverkusenerjung befindet sich auf einem aufstrebenden Ast
Standard Mein Footer verschwindet in der Tablet und Mobile-Ansicht
Guten Tag zusammen,

ich habe mal wieder ein (wahrscheinlich kleines) Problem mit großer Wirkung.

Bei meiner WebseiteUnbenanntes Dokument verschwindet bei der Tablet- und Mobileansicht der Footer.
Ich musste dem <main> eine position:relative; z-index:-1 geben, damit das Menu davor runterslided.

Funktioniert auch, aber dafür verschwindet der footer. Hab es über <position:relative; z-index: irgendwas positives> versucht (also beim footer),
hat aber auch nicht geholfen.

Für einen Tipp wäre ich sehr dankbar.

Der Code:

Code:
@charset "utf-8";
/* Einfache fließende Medien
   Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
.ie6 img {
	width:100%;
}
* {padding:0; margin:0;}

body{
	font-size:16px;
	font-family: 'Archivo Narrow', sans-serif;
	background:url(../img/img01.JPG);
	background-size:cover;
	background-attachment:fixed;
}	
	
a{text-decoration:none; color:#ccc; font-size:16px;}

li{list-style-type:none;}

/* Layout für Mobilgeräte: 480*px oder weniger. */
h1{
	font-size:24px;
	font-weight:300;
	text-align:left;
	color:#333;
	line-height:40px;
}


h3{
	font-size:24px;
	line-height:40px;
	font-weight:300;
	text-align:left;
	color:#333;
}


p{
	font-size:16px;
	font-weight:300;
	text-align:justify;
	color:#666;
	line-height:28px;
	white-space:normal;
}

.small{
	font-size:14px;
	line-height:18px;	
}

header{
	width:100%;
	height:80px;
	margin:auto;
	border-bottom:3px solid #FF8409;
	z-index:99;
	background:#fff;
	position:absolute;
}	

#brand{
	float:left;
	height:80px;
	padding-left:5%;
}

nav{width:100%; text-align:center;}
nav ul{line-height:30px;}
nav li{display:block;border-bottom:1px solid #fff;}
nav a, nav a:visited{padding:0px; text-transform:uppercase;color:#FF8409;}
nav a:hover{color:#fff;}

/*--------------------------------------*/

.menu{
	width:100%;
	height:auto;
	background:#333;
	position:absolute;
	top:-251px;	
	left:0;
	z-index:3;
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
}

.menu-icon{
	float:right;
	padding:12px 20px;
	background:#333;
	color:#FF8409;	
	font-size:20px;
	cursor:pointer;
	margin:10px 10px 0 0;
	z-index:999;
	position:relative;
	border-radius:3px;
}

#menuToggle{display:none;}
#menuToggle:checked ~ .menu {top:81px; position:absolute;}


#slider{
	width:100%;
	float:left;
	margin:0 0 50px 0;
	padding:0;

}
.cycle-slideshow{
	width:100%;
	max-width:1240px;
	display:block;
	position:relative;
	margin:0 auto;
	overflow:hidden	
	z-index: -1;
	float:left;
	border-top:2px solid #FF870F;
}

.slide{display:block; position:relative; width:100%;}

.caption{
	width:100%;
	display:block;
	position: absolute;
	background:url(../img/white.png);
	bottom: 0;
	left:0;
	padding:3px 0 3px 15px;
	z-index:99;
	box-sizing:border-box;
	text-align:left;	
}

.caption h3 {
	text-transform:uppercase; 
	color:#FF8409; 
	font-size:14px; 
	letter-spacing: 1px;
	font-weight:bold; 
	padding-bottom:0;
	padding-left:0;
	text-align:left;
	line-height:120%;
}

.caption p {
	color:#fff; 
	font-size:12px; 
	letter-spacing:1px;
	padding-bottom:0;
	padding-left:0;
	text-align:left;
	line-height:120%;
}


/*end header*/



main{
	width:100%;
	background:#F2F2F2;
	margin-left:0;
	margin-top:83px;
	float:left;
	border-top:2px solid #FF8409;
	position:absolute;
	z-index:1;
}

.important{font-weight:700; color:#FF8409;}

article{
	float:left;
	width:80%;
	padding:50px 10% 50px 10%;
}

aside{
	float:left;
	margin-right:0;
	width:	90%;
	padding:20px 5% 30px 5%;
	background:#E6E6E6;
	border-left:1px solid #CDCDCD;
}

aside p{line-height:28px;}
aside a, aside a:visited{color:#FF8409; margin-top:10px; text-decoration: none;}
aside a:hover{font-weight:bold;}


.entry{
	width:80%;
	border:1px solid #ccc;
	margin:0 0 40px 0;
	padding:5px 10%;
	float:left;
}

.pic{
	margin:0 0 10px 0;
	width:100%;
	-webkit-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	-moz-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
}

.social{
	height:40px;
	margin:5px 10px 5px 0;
	float:left;
	display:inline;
}

.social:hover{
	border-radius:30px;
	-webkit-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	-moz-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
}

footer{
	width:100%;
	clear:both;
	margin:auto;
	bottom:0;
	padding:5px 0 5px 0;
	background:#7f8000;
}

footer p{	
	color:#fff;
	text-align:center;
	font-size:1em;
}

#navi ul{
	text-align:center;
	background:#7f8000;
	line-height:30px;
}
#navi li {
display:inline-block; 
margin:auto;
text-align:center;
list-style-type:none; 
transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
}


#navi a{
font-size:12px;
text-decoration:none; 
text-transform:uppercase;
text-align:center;
color:#fff; 
text-decoration:underline;
padding:10px;
}

#navi a:hover {color:#FF870F; text-decoration:underline;}


/* Layout für Tablet-PCs: 481 bis 768*px. Erbt Stile vom: Layout für Mobilgeräte. */

@media only screen and (min-width: 769px) {


header{
	width:100%;
	height:80px;
	margin:auto;
	border-bottom:3px solid #FF8409;
	z-index:99;
	background:#fff;
	position:absolute;
}	

#brand{
	float:left;
	line-height:80px;
	color:#ccc;
	font-size:30px;
	font-weight:bolder;	
}

nav{width:100%; margin-left:0;text-align:center;}
nav ul{line-height:40px; float:none; padding-right:0;background:#333;}
nav li{display:inline-block;border:none;}
nav a{padding:10px; color:#FF8409;}
nav a:hover{background:none; color:#fff;}
nav a:visited {color:#FF8409;}

/*--------------------------------------*/

.menu{
	width:100%;
	height:40px;
	background:none;
	position:absolute;
	top:0px;	
	left:0;
	z-index:2;
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
}

.menu-icon{display:block;}

#menuToggle{display:none;}
#menuToggle:checked ~ .menu {top:83px; position:absolute;}




main{
	width:100%;
	background:#F2F2F2;
	margin-left:0;
	margin-top:83px;
	float:left;
	border-top:2px solid #FF8409;
	position:absolute;
	z-index:1;
}

.important{font-weight:700; color:#FF8409;}

article{
	float:left;
	width:59%;
	min-height:100%;
	padding:50px 4% 50px 6%;
}

aside{
	float:right;
	margin-right:0;
	width:	24%;
	padding:50px 3% 50px 3%;
	background:#E6E6E6;
	border-left:1px solid #CDCDCD;
}

aside p{line-height:28px;}
aside a, aside a:visited{color:#FF8409; margin-top:10px; text-decoration: none;}
aside a:hover{font-weight:bold;}


.entry{
	width:90%;
	border:1px solid #ccc;
	margin:0 0 40px 0;
	padding:5px 5%;
	float:left;
}

.pic{
	margin:0 0 10px 0;
	width:100%;
	-webkit-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	-moz-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
}

.social{
	height:40px;
	margin:5px 10px 5px 0;
	float:left;
	display:inline;
}

.social:hover{
	border-radius:30px;
	-webkit-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	-moz-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
}

footer{
	width:100%;
	clear:both;
	margin:auto;
	bottom:0;
	padding:5px 0 5px 0;
	background:#7f8000;

}

footer p{	
	color:#fff;
	text-align:center;
	font-size:1em;
}

#navi ul{
	text-align:center;
	background:#7f8000;
	line-height:30px;
}
#navi li {
display:inline-block; 
margin:auto;
text-align:center;
list-style-type:none; 
transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
}


#navi a{
font-size:12px;
text-decoration:none; 
text-transform:uppercase;
text-align:center;
color:#fff; 
text-decoration:underline;
padding:10px;
}

#navi a:hover {color:#FF870F; text-decoration:underline;}

}

/* Desktoplayout: 769 bis maximal 1232*px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */

@media only screen and (min-width: 1040px) {
h1{
	font-size:24px;
	font-weight:300;
	text-align:left;
	color:#333;
	line-height:40px;
}


h3{
	font-size:24px;
	line-height:40px;
	font-weight:300;
	text-align:left;
	color:#333;
}


p{
	font-size:16px;
	font-weight:300;
	text-align:justify;
	color:#666;
	line-height:28px;
}

header{
	width:70%;
	height:80px;
	margin:auto;
	border-bottom:3px solid #FF8409;
	z-index:9;
	background:#fff;
	position:relative;
}	

#brand{
	float:left;
	line-height:80px;
	color:#ccc;
	font-size:30px;
	font-weight:bolder;	
}

nav{width:60%; text-align:center;}
nav ul{line-height:80px; float:right; background:none; padding-right:2%;}
nav li{display:inline-block;border:none;}
nav a{padding:10px; color:#FF8409;}
nav a:hover{background:#eee; color:#fff;}
nav a:visited {color:#FF8409;}

/*--------------------------------------*/

.menu{
	width:70%;
	height:80px;
	background:none;
	position:absolute;
	top:0px;	
	left:15%;
	z-index:9999;
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
}

.menu-icon{display:none;}

#menuToggle{display:none;}
#menuToggle:checked ~ .menu {top:83px; position:absolute;}




main{
	width:70%;
	background:#F2F2F2;
	margin-left:15%;
	margin-top:0;
	float:left;
	border-top:2px solid #FF8409;
	position:relative;
	z-index:1;
}

.important{font-weight:700; color:#FF8409;}

article{
	float:left;
	width:59%;
	min-height:100%;
	padding:50px 4% 50px 6%;
}

aside{
	float:right;
	margin-right:0;
	width:	24%;
	padding:50px 3% 50px 3%;
	background:#E6E6E6;
	border-left:1px solid #CDCDCD;
}

aside p{line-height:28px;}
aside a, aside a:visited{color:#FF8409; margin-top:10px; text-decoration: none;}
aside a:hover{font-weight:bold;}


.entry{
	width:90%;
	border:1px solid #ccc;
	margin:0 0 40px 0;
	padding:5px 5%;
	float:left;
}

.pic{
	margin:0 0 10px 0;
	width:100%;
	-webkit-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	-moz-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
}

.social{
	height:40px;
	margin:5px 10px 5px 0;
	float:left;
	display:inline;
}

.social:hover{
	border-radius:30px;
	-webkit-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	-moz-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
}

footer{
	width:70%;
	clear:both;
	margin:auto;
	bottom:0;
	padding:5px 0 5px 0;
	background:#7f8000;

}

footer p{	
	color:#fff;
	text-align:center;
	font-size:1em;
}

#navi ul{
	text-align:center;
	background:#7f8000;
	line-height:30px;
}
#navi li {
display:inline-block; 
margin:auto;
text-align:center;
list-style-type:none; 
transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
}


#navi a{
font-size:12px;
text-decoration:none; 
text-transform:uppercase;
text-align:center;
color:#fff; 
text-decoration:underline;
padding:10px;
}

#navi a:hover {color:#FF870F; text-decoration:underline;}

}

@media only screen and (min-width: 1240px) {


header{
	width:60%;
}	

#brand{
	float:left;
	line-height:80px;
	color:#ccc;
	font-size:30px;
	font-weight:bolder;	
}

nav{width:60%; text-align:center;}
nav ul{line-height:80px; float:right; background:none; padding-right:2%;}
nav li{display:inline-block;border:none;}
nav a{padding:10px; color:#FF8409;}
nav a:hover{background:#eee; color:#fff;}
nav a:visited {color:#FF8409;}

/*--------------------------------------*/

.menu{
	width:60%;
	height:80px;
	background:none;
	position:absolute;
	top:0px;	
	left:20%;
	z-index:9999;
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
}

main{
	width:60%;
	background:#F2F2F2;
	margin-left:20%;
	margin-top:0;
	float:left;
	border-top:2px solid #FF8409;
	position:relative;
	z-index:1;
}

.important{font-weight:700; color:#FF8409;}

article{
	float:left;
	width:59%;
	min-height:100%;
	padding:50px 4% 50px 6%;
}

aside{
	float:right;
	margin-right:0;
	width:	24%;
	padding:50px 3% 50px 3%;
	background:#E6E6E6;
	border-left:1px solid #CDCDCD;
}

aside p{line-height:28px;}
aside a, aside a:visited{color:#FF8409; margin-top:10px; text-decoration: none;}
aside a:hover{font-weight:bold;}


.entry{
	width:90%;
	border:1px solid #ccc;
	margin:0 0 40px 0;
	padding:5px 5%;
	float:left;
}

.pic{
	margin:0 0 10px 0;
	width:100%;
	-webkit-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	-moz-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
}

.social{
	height:40px;
	margin:5px 10px 5px 0;
	float:left;
	display:inline;
}

.social:hover{
	border-radius:30px;
	-webkit-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	-moz-box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
	box-shadow: 0px 2px 5px 2px rgba(102,102,102,1);
}

footer{
	width:60%;
	clear:both;
	margin:auto;
	bottom:0;
	padding:5px 0 5px 0;
	background:#7f8000;

}

footer p{	
	color:#fff;
	text-align:center;
	font-size:1em;
}

#navi ul{
	text-align:center;
	background:#7f8000;
	line-height:30px;
}
#navi li {
display:inline-block; 
margin:auto;
text-align:center;
list-style-type:none; 
transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
}


#navi a{
font-size:12px;
text-decoration:none; 
text-transform:uppercase;
text-align:center;
color:#fff; 
text-decoration:underline;
padding:10px;
}

#navi a:hover {color:#FF870F; text-decoration:underline;}

}
HTML-Code:
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unbenanntes Dokument</title>
<link href='https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>

<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.cycle2.min.js"></script>

<script type="text/javascript">
$('.has-sub').click( function(e) {
    e.preventDefault();
    $(this).parent().toggleClass('tap');
});
</script>
<script src="js/respond.min.js"></script>
</head>
<body>


<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon">☰</label>

  
<header>
  	<div id="brand"><img src="img/logo.png" height="80px"></div> 
  </header>
  
  <nav class="menu">
  	<ul>
    <li><a href="index.html">Über uns</a></li>
  	<li><a href="leistungen.html">Leistungen</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="impressum.html">Impressum</a></li>
    </ul>
  </nav>
  
<main>

    <!-- Responsive Slider with full control -->
  
  <!--cycle slideshow -->
  <div class="cycle-slideshow" data-cycle-slides=".slide" data-cycle-pause-on-hover="true" data-cycle-fx="scrollHorz" data-cycle-timeout="3000" data-cycle-speed="3000">

	<!--slide-->
	<div class="slide">
	<img src="img/slider_index/slider01.png" alt="Lorem Ipsum">
	<!--caption-->
	<div class="caption">
	<h3>Baumfällungen</h3>
	<p>Baumfällungen aller Art gemäß Baumschutzsatzung, Gefahrbaumfällung, Spezialfällungen.</p>
	</div><!--caption-->
	</div>
	<!--end slide-->

<!--slide-->
	<div class="slide">
	<img src="img/slider_index/slider02.png" alt="Lorem Ipsum">
	<!--caption-->
	<div class="caption">
	<h3>Sturmschadenbeseitigung</h3>
	<p>Beseitigung der Schäden und Verwertung</p>
	</div><!--caption-->
	</div>
	<!--end slide-->
    
    <!--slide-->
	<div class="slide">
	<img src="img/slider_index/slider03.png" alt="Lorem Ipsum">
	<!--caption-->
	<div class="caption">
	<h3>Baumpflege</h3>
	<p>Optische und Vitalitätssichernde Pflege mit schonender Klettertechnik</p>
	</div><!--caption-->
	</div>
	<!--end slide-->
    
    <!--slide-->
	<div class="slide">
	<img src="img/slider_index/slider04.png" alt="Lorem Ipsum">
	<!--caption-->
	<div class="caption">
	<h3>Grünschnitt</h3>
	<p>Schnitt und Entsorgung</p>
	</div><!--caption-->
	</div>
	<!--end slide-->


	
</div>

<!--end cycle slideshow -->

<!-- End Responsive Slider with full control -->

<article><h1>Herzlich Willkommen</h1>
		<br>
		<p> Wir bieten Ihnen den kompletten <span class="important">Rundum-Service</span> um Ihre Bäume.</p><br>
		<p>Dieser umfaßt sowohl die <span class="important">Pflege</span> als auch, falls notwendig, die 
		<span class="important">Fällung und Entsorgung beschädigter Bäume</span>.</p><br>
		<p>Mit <span class="important">moderner Seiltklettertechnik</span> können wir den Baum bis in die Krone 
		eingehend auf Schäden und Totholz untersuchen und dieses schonend und auf engstem Raum entfernen.</p><br>
		<p>Dies dient nicht nur der <span class="important">Erhaltung der Vitalität</span>, sondern auch 	zum <span class="important">Erhalt der Verkehrssicherheit</span>.</p><br>
		<p>Wir beseitigen Sturmschäden schnell, zuverlässig und fachgerecht. All dies selbstverständlich gemäß der <span class="important">Baumschutzsatzung</span>.</p>
		<p>Selbstverständlich kümmern wir uns auf Wunsch auch um die Weiterverarbeitung zu Kaminholz oder die Entsorgung des Stammholzes.</p><br>
		<p>Bitte nutzen Sie das <a href="kontakt.html"><span class="important">Kontaktformular</span></a>, um mit uns einen unverbindlichen und kostenfreien Besichtigungstermin zu vereinbaren. Vor Ort finden wir gemeinsam die optimale Lösung 
		für Ihre Aufgabenstellung.</p>
	</article>
    
    <aside>
            <section class="entry">
            <img class="pic" src="img/img02.jpg" width="100%">
            <h3>Kontaktdaten</h3>
		<p>Thomas Markett<br>
		Umlag 2<br>
		51371 Leverkusen</p>
		<p>M: 0173 / 2664737<br>
		<a href="mailto:info@cortarbor.de">info@cortarbor.de</a></p>
            </section>
            
            <section class="entry">
            <h3>Nützliche Links</h3>
       		<p><a href="https://www.monheim.de/fileadmin/user_upload/Media/Dokumente/Rathaus/Ortsrecht/Satzungen/664.pdf" target="new">
		Baumschutzsatzung Monheim</a><p>	
		<p><a href="http://www.leverkusen.de/vv/produkte/FB32/Baumschutz.php" target="new">
		Baumschutz Leverkusen</a><p>

			<p><a href="http://www.ortsdienst.de/nordrhein-westfalen/mettmann/langenfeld/gruenflaechenamt/" target="new">
		Grünflächenamt Langenfeld<br> <span style="color:#333;font-size:.7em; font-weight:100;">(verfügt über keine offizielle Baumschutzsatzung)</span></a><p><br>
        </section>

	<section class="entry">
	<img class="social" src="img/fb-logo.png">
	<img class="social" src="img/google-logo.png">
        </section>

        </aside>
        
</main>

<footer>
	<p>copyright 2016 Thomas Markett</p>
    <div id="navi">
    <ul>
    <li><a href="index.html">Über uns</a></li>
  	<li><a href="leistungen.html">Leistungen</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="impressum.html">Impressum</a></li>
    </ul>
    </div>
</footer>


</main>

</body>
</html>
Mit Zitat antworten
Sponsored Links