zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Suchen Heutige Beiträge Alle Foren als gelesen markieren

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mein Footer verschwindet in der Tablet und Mobile-Ansicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.05.2016, 13:43
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
  #2 (permalink)  
Alt 15.05.2016, 20:17
Erfahrener Benutzer
XHTMLforum-Mitglied
  
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard
Zitat:
Zitat von leverkusenerjung Beitrag anzeigen
Für einen Tipp wäre ich sehr dankbar.
Hi,

Der HTML-Code ist fehlerhaft und kann so nicht richtig dargestellt werden.

Error: Stray end tag main.

HTML-Code:
</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>
_______________
MfG Roland
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.05.2016, 20:19
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
  
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard
Schau dir mal deinen HTML-Code an:

Code:
        </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>
Nimm das rotmarkierte </main> raus und schon funzts, (evtl. bei footer width auf 100% ändern)

Edit:validator.w3.org und
css-validator
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS
Geändert von kadees (15.05.2016 um 22:01 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 16.05.2016, 10:11
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 13.12.2010
Beiträge: 19
leverkusenerjung befindet sich auf einem aufstrebenden Ast
Standard Danke
wie schon zu erwarten ein technischer Fehler meinerseits *facepalm*

Hätte ich zur Not auch selbst drauf kommen können, aber irgendwie war ich so fixiert drauf, dass der Fehler in der css liegen muss...

Danke und ein schönes Restwochenende.
Mit Zitat antworten
Antwort

« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Navigationleiste kollabiert in Mobile Ansicht - suche Alternative Krischu Site- und Layoutcheck 13 22.04.2015 17:28
Footer Div verschwindet unter absolut positioniertem div pkipper CSS 6 01.03.2010 12:48
cssstickyfooter.com | horizontales Scrollen --> Footer verschwindet daigo CSS 0 19.05.2009 10:56
Scrollbalken verschwindet hinter fixem Footer DieterWelzel CSS 3 19.09.2007 21:44
Footer Problem blub19 CSS 6 25.01.2005 11:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:50 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023