zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Heutige Beiträge

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden navigation funktionert auf Tablet nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.01.2016, 12:25
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 13.12.2010
Beiträge: 19
leverkusenerjung befindet sich auf einem aufstrebenden Ast
Standard navigation funktionert auf Tablet nicht
Guten Morgen und ein frohes Neues Jahr zusammen.

Ich habe eine responsive Webseite erstellt. Funktioniert auf dem Mobilphone einwandfrei, funktionert auf dem PC einwandfrei, nur auf dem Tablet habe ich Probleme und weiss nicht warum.

Wenn ich die Seite im Google Chrome teste, reagiert sie auf die Verkleinerung und Vergrößerung des Bildschirms genau wie gewünscht. Das Menu funktioniert in allen Devices.

Wenn ich die Seite über Handy oder Tablet aufrufe, baut sie sich zwar auf wie gewünscht, allerdings reagiert beim Tablet der Menubutton nicht. Heisst: die Navigationsleiste slided nicht herunter.

Da ich für alle Devices identisch vorgegangen bin, versteh ich nicht wirklich, woran es liegen könnte.

Hat von Euch jemand eine Idee?

Danke im voraus.


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="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/respond.min.js"></script>
</head>
<body>

<div class="gridContainer clearfix">
<label for="menuToggle" class="menu-icon">Menu</label>
   <input type="checkbox" id="menuToggle">  
  <header>
  <div id="logo"><img src="img/logo.png"></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="links.html">Links / Hinweise</a></li>
         <li><a href="kontakt.html">Kontakt</a></li>
         <li><a href="impressum.html">Impressum</a></li>
      </ul>
   </nav>
  
  <main>
  
  <div id="img"><img src="img/img01.jpg"></div>
  
  <article>
  	<section><h1>Herzlich Willkommen</h1>
	<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. </p>
		<p>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. </p>
	
	<p>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. </p>
	
	<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	</section>
    </article>
    
  <aside>
  <h2>Kontaktdaten</h2>
      	<section>
        <div id="img"><img src="img/kontakt.png" width="100%"></div>
        </section>
  </aside> 
  
  <aside>
  <h2>Nützliche Links</h2>
      	<section>
        <h3><a href="http://www.tbr-info.de/files/daten/parks-friedhoefe/download/0.13.4_390_Baumschutzsatzung.pdf">Baumschutzsatzung Remscheid</a></h3>
        
		<h3><a href="http://www.tbr-info.de/files/daten/parks-http://www2.solingen.de/www/ressourcen.nsf/files/67-05.pdf/$file/67-05.pdf">Baumschutzsatzung Solingen</a></h3>	
        
        	<h3><a href="http://www.gesetze-im-internet.de/bundesrecht/bnatschg_2009/gesamt.pdf">Bundesnaturschutzgesetz</a></h3>	
        </section>
  </aside> 
  
  
  </main>
  
  <footer>
  <p>&copy;Copyright 2016 Thomas Markett</p>
  </footer>
</div>
</body>
</html>



Code:
@charset "utf-8";

img, object, embed, video {
	max-width: 100%;
}

.ie6 img {
	width:100%;
}

/* Layout für Mobilgeräte */
 h1{
		font-size:16px;
		font-weight:300;
		text-align:left;
		text-transform:uppercase;
		color:#666;
		font-style:italic;
		margin-bottom:14px;   
   }

h2{
		font-size:16px;
		font-weight:300;
		text-align:center;
		text-transform:uppercase;
		color:#fff;
		background:#000;
		font-style:normal;
		letter-spacing:1px;
		padding: 5px 0;
		margin:0;   
		width:100%;
   }
	
h3{
		font-size:12px;
		font-weight:300;
		text-align:left;
		color:#fff;
		font-style:normal;
		padding: 5px 0;
		margin:3px 0;  
   }
   
   p{
	  font-size:11px;
		font-weight:100;
		text-align:justify;
		color:#666;
		font-style:italic;
		line-height: 150%;   
   }
   a {
      text-decoration: none;
      color: #fff;
   }
   
   a:hover {
      text-decoration: none;
      color: #CCC;
   }
   li {
      list-style-type: none;
   }
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

header {
	width: 100%;
      height: 110px;
      margin: auto;
      border-bottom: 2px solid #fff;
	display: block;
	position: relative;
      background: rgba(51,31,2,1);
	  background: -moz-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(51,31,2,1)), color-stop(5%, rgba(51,31,2,1)), color-stop(31%, rgba(193,158,103,1)), color-stop(62%, rgba(182,141,76,1)), color-stop(95%, rgba(51,31,2,1)), color-stop(100%, rgba(51,31,2,1)));
	  background: -webkit-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -o-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -ms-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: linear-gradient(to right, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#331f02', endColorstr='#331f02', GradientType=1 );
	  -webkit-box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
-moz-box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
      z-index: 2;
}
#logo {
	float: left;
	margin:0;
    height: auto;
    width:100%;
	position:absolute;
}
nav {
      width: 100%;
	  height:auto;
      text-align: center;
   }
   nav ul {
      line-height: 30px;
	width:100%;
	margin:0;
   }
   nav li {
      display: inline-block;
	width:100%;
	line-height:30px;
	background:#7f8000;
	border-bottom:1px solid #fff;
   }


   nav a, nav a:visited {
      padding:0;
	  width:auto;
	  line-height:30px;
	  color:#fff;
	  text-transform:uppercase;
	  font-size:14px;
	letter-spacing:1px;
   }
   nav a:hover {
      background: #7f8000;
      color: #333;
   }
   
   .menu {
      width: 100%;
      height: 40px;
      background: #7f8000;
	  border-bottom:1px solid #fff;
      top: -142px;
      transition: all .6s ease-in-out;
      position: absolute;
      z-index: 1;
   }
   .menu-icon {
      float: none;
      width:100%;
      padding: 8px 0;
      background-color: #000;
      color: #fff;
	  font-size:14px;
	text-align:center;
      font-weight: normal;
	  text-transform:uppercase;
      cursor: pointer;
      border-radius: none;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
	  border-left: none;
      border-right:none;
	  margin: 110px 0 0 0;
      position: absolute;
      z-index: 3;
   }
   #menuToggle {
      display: none;
   }
   #menuToggle:checked ~ .menu {
      top: 143px;
   }
main {
	clear: both;
	float: left;
	margin: 50px 5% 0 5%;
	width: 90%;
	display: block;
}

#img{
	width:	clear:both;
	float:left;
	width:100%;
	padding:15px 0;
	border-top:1px solid #7f8000;
	border-bottom:1px solid #7f8000;
}
article {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
section {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
aside {
	clear: both;
	float: left;
	margin: 0 0 30px 0;
	width: 100%;
	display: block;
	background:#7f8000;
	border:1px solid #000;
	border-bottom-right-radius:10px;
	border-bottom-left-radius: 10px;
}
aside section {
	clear: both;
	float: left;
	margin:0 10%;
	width: 80%;
	display: block;
}

aside h2, #google h2{
	color:#7f8000; 
	margin-bottom:7px; 
	font-weight:400;
	border-bottom-right-radius: 10px;
	}
aside p{color:#333; line-height:120%;}

#kontakt {
	float: left;
	margin: 30px 0 0 0;
	width: 100%;
	display: block;
}
#google {
	float: left;
	margin: 30px 0 30px 0;
	width: 100%;
	display: block;
	background:#7f8000;
	border-bottom-right-radius:10px;
	border-bottom-left-radius: 10px;
}

#map{
	float:none;
	margin:10px 5%;
	width:90%;
}
#right-box {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
footer {
	clear: both;
	float: left;
	margin: 0;
	padding:10px 0;
	width: 100%;
	display: block;
	border-top:2px solid #7f8000;
	background: rgba(51,31,2,1);
	  background: -moz-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(51,31,2,1)), color-stop(5%, rgba(51,31,2,1)), color-stop(31%, rgba(193,158,103,1)), color-stop(62%, rgba(182,141,76,1)), color-stop(95%, rgba(51,31,2,1)), color-stop(100%, rgba(51,31,2,1)));
	  background: -webkit-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -o-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -ms-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: linear-gradient(to right, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#331f02', endColorstr='#331f02', GradientType=1 );
	  -webkit-box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
-moz-box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
}

footer p{
	text-align:center;
	color:#fff;	
	font-size:13px;
}

/* Layout für Tablet-PCs */

@media only screen and (min-width: 769px) {
 h1{
		font-size:16px;
		font-weight:300;
		text-align:left;
		text-transform:uppercase;
		color:#666;
		font-style:italic;
		margin-bottom:14px;   
   }

h2{
		font-size:16px;
		font-weight:300;
		text-align:center;
		text-transform:uppercase;
		color:#fff;
		background:#000;
		font-style:normal;
		letter-spacing:1px;
		padding: 5px 0;
		margin:0;   
		width:100%;
   }
	
h3{
		font-size:13px;
		font-weight:300;
		text-align:left;
		color:#fff;
		font-style:normal;
		padding: 5px 0;
		margin:3px 0;   
   }
   
   p{
	  font-size:11px;
		font-weight:100;
		text-align:justify;
		color:#666;
		font-style:italic;
		line-height: 150%;   
   }
   a {
      text-decoration: none;
      color: #fff;
   }
   
   a:hover {
      text-decoration: none;
      color: #CCC;
   }
   li {
      list-style-type: none;
   }
   
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

header {
	width: 100%;
      height: 110px;
      margin: auto;
      border-bottom: 2px solid #fff;
	display: block;
	position: relative;
      background: rgba(51,31,2,1);
	  background: -moz-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(51,31,2,1)), color-stop(5%, rgba(51,31,2,1)), color-stop(31%, rgba(193,158,103,1)), color-stop(62%, rgba(182,141,76,1)), color-stop(95%, rgba(51,31,2,1)), color-stop(100%, rgba(51,31,2,1)));
	  background: -webkit-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -o-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -ms-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: linear-gradient(to right, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#331f02', endColorstr='#331f02', GradientType=1 );
	  -webkit-box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
-moz-box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
      z-index: 2;
}
#logo {
	float: left;
	margin:0 20%;
    height: auto;
    width:60%;
	position:absolute;
}
nav {
      width: 100%;
	  height:auto;
      text-align: center;
   }
   nav ul {
      line-height: 40px;
	width:100%;
	margin:0;
   }
   nav li {
      display: inline-block;
	width:auto;
	line-height:40px;
	background:#7f8000;
	border-bottom:none;
   }


   nav a, nav a:visited {
      padding:0 12px;
	  width:auto;
	  line-height:40px;
	  color:#fff;
	  text-transform:uppercase;
	  font-size:16px;
	letter-spacing:none;
   }
   nav a:hover {
      background: #7f8000;
      color: #ccc;
   }
   
   .menu {
      width: 100%;
      height: 41px;
      background: #7f8000;
	  border-bottom:1px solid #fff;
      top: -112px;
      transition: all .6s ease-in-out;
      position: absolute;
      z-index: 1;
   }
   .menu-icon {
      float: right;
      width:auto;
      padding: 5px 10px;
      background-color: #7f8000;
      color: #fff;
	  font-size:14px;
	text-align:center;
      font-weight: normal;
	  text-transform:uppercase;
      cursor: pointer;
      border-radius: 7px;
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
	  border-left: 2px solid #fff;
	  border-right:2px solid #fff;
	  margin: 43px 20px 0 0;
      position: relative;
      z-index: 3;
   }
   #menuToggle {
      display: none;
   }
   #menuToggle:checked ~ .menu {
      top: 112px;
   }
main {
	clear: both;
	float: left;
	margin: 50px 5% 0 5%;
	padding-bottom:60px;
	width: 90%;
	display: block;
}

#img{
	clear:none;
	float:left;
	width:100%;
	padding:15px 0;
	border-top:1px solid #7f8000;
	border-bottom:1px solid #7f8000;
}
article {
	clear: none;
	float: left;
	margin-left: 0;
	margin-top:20px;
	width: 70%;
	display: block;
}
section {
	clear: none;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
aside {
	clear: none;
	float: right;
	margin: 28px 0 0 0;
	width: 25%;
	display: block;
	background:#7f8000;
	border:1px solid #000;
	border-bottom-right-radius:10px;
	border-bottom-left-radius: 10px;
}
aside section {
	clear: none;
	float: left;
	margin:0 3%;
	width: 94%;
	display: block;
}

aside h2, #google h2{
	color:#7f8000; 
	margin-bottom:7px; 
	font-weight:400;
	border-bottom-right-radius: 10px;
	}
aside p{color:#333; line-height:120%;}

#kontakt {
	float: left;
	margin: 40px 0 0 0;
	width: 50%;
	display: block;
}
#google {
	float: right;
	margin: 45px 0 0 0;
	width: 40%;
	display: block;
	background:#7f8000;
	border-bottom-right-radius:10px;
	border-bottom-left-radius: 10px;
}

#map{
	float:none;
	margin:10px 3%;
	width:94%;
}
#right-box {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
footer {
	clear: both;
	float: left;
	margin: 0;
	padding:10px 0;
	width: 100%;
	display: block;
	border-top:2px solid #7f8000;
	background: rgba(51,31,2,1);
	  background: -moz-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(51,31,2,1)), color-stop(5%, rgba(51,31,2,1)), color-stop(31%, rgba(193,158,103,1)), color-stop(62%, rgba(182,141,76,1)), color-stop(95%, rgba(51,31,2,1)), color-stop(100%, rgba(51,31,2,1)));
	  background: -webkit-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -o-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -ms-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: linear-gradient(to right, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#331f02', endColorstr='#331f02', GradientType=1 );
	  -webkit-box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
-moz-box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
}

footer p{
	text-align:center;
	color:#fff;	
	font-size:13px;
}
}

/* Desktoplayout */

@media only screen and (min-width: 1025px) {
 h1{
		font-size:20px;
		font-weight:300;
		text-align:left;
		text-transform:uppercase;
		color:#666;
		font-style:italic;
		margin-bottom:14px;   
   }

h2{
		font-size:15px;
		font-weight:300;
		text-align:center;
		text-transform:uppercase;
		color:#fff;
		background:#000;
		font-style:normal;
		letter-spacing:1px;
		padding: 5px 0;
		margin:0;   
		width:100%;
   }
	
h3{
		font-size:13px;
		font-weight:300;
		text-align:left;
		color:#fff;
		font-style:normal;
		padding: 5px 0;
		margin:3px 0;   
   }
   
   p{
	  font-size:13px;
		font-weight:100;
		text-align:justify;
		color:#666;
		font-style:italic;
		line-height: 150%;   
   }
   a {
      text-decoration: none;
      color: #fff;
   }
   
   a:hover {
      text-decoration: none;
      color: #CCC;
   }
   li {
      list-style-type: none;
   }
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

header {
	width: 100%;
      height: 140px;
      margin: auto;
      border-bottom: 2px solid #fff;
	display: block;
	position: relative;
      background: rgba(51,31,2,1);
	  background: -moz-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(51,31,2,1)), color-stop(5%, rgba(51,31,2,1)), color-stop(31%, rgba(193,158,103,1)), color-stop(62%, rgba(182,141,76,1)), color-stop(95%, rgba(51,31,2,1)), color-stop(100%, rgba(51,31,2,1)));
	  background: -webkit-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -o-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -ms-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: linear-gradient(to right, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#331f02', endColorstr='#331f02', GradientType=1 );
	  -webkit-box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
-moz-box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
box-shadow: 0px 6px 15px -2px rgba(0,0,0,0.51);
      z-index: 2;
}
#logo {
	float: left;
	margin:0 30%;
    height: auto;
    width:50%;
	position:absolute;
}
nav {
      width: 100%;
	  height:auto;
      text-align: center;
   }
   nav ul {
      line-height: 50px;
	width:100%;
	margin:0;
   }
   nav li {
      display: inline-block;
	width:auto;
	line-height:50px;
	background:#7f8000;
	border-bottom:none;
   }


   nav a, nav a:visited {
      padding:0 15px;
	  width:auto;
	  line-height:50px;
	  color:#fff;
	  text-transform:uppercase;
	  font-size:16px;
	letter-spacing:none;
   }
   nav a:hover {
      background: #7f8000;
      color: #ccc;
   }
   
   .menu {
      width: 100%;
      height: 51px;
      background: #7f8000;
	  border-bottom:1px solid #fff;
      top: -152px;
      transition: all .6s ease-in-out;
      position: absolute;
      z-index: 1;
   }
   .menu-icon {
      float: right;
      width:auto;
      padding: 8px 15px;
      background-color: #7f8000;
      color: #fff;
	  font-size:16px;
	text-align:center;
      font-weight: normal;
	  text-transform:uppercase;
      cursor: pointer;
      border-radius: 7px;
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
	  border-left: 2px solid #fff;
	  border-right:2px solid #fff;
	  margin: 55px 40px 0 0;
      position: relative;
      z-index: 3;
   }
   #menuToggle {
      display: none;
   }
   #menuToggle:checked ~ .menu {
      top: 143px;
   }
main {
	clear: both;
	float: left;
	margin: 0 24.9%;
	width: 46%;
	display: block;
	padding: 60px 2% 50px 2%;
      border-left: 1px solid #7f8000;
      border-right: 1px solid #7f8000;
	  -webkit-box-shadow: 0px 6px 10px 3px rgba(0,0,0,0.49);
-moz-box-shadow: 0px 6px 10px 3px rgba(0,0,0,0.49);
box-shadow: 0px 6px 10px 3px rgba(0,0,0,0.49);
}

#img{
	width:100%
		clear:none;
	float:left;
	padding:15px 0;
	border-top:1px solid #7f8000;
	border-bottom:1px solid #7f8000;
}
article {
	clear: none;
	float: left;
	margin-left: 0;
	width: 65%;
	display: block;
}
section {
	clear:none;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
aside {
	clear: none;
	float: right;
	margin: 35px 0 0 0;
	width: 25%;
	display: block;
	background:#7f8000;
	border:1px solid #000;
	border-bottom-right-radius:10px;
	border-bottom-left-radius: 10px;
}
aside section {
	clear: none;
	float: left;
	margin:0 5%;
	width: 90%;
	display: block;
}

aside h2, #google h2{
	color:#7f8000; 
	margin-bottom:7px; 
	font-weight:400;
	border-bottom-right-radius: 10px;
	}
aside p{color:#333; line-height:120%;}

#kontakt {
	float: left;
	margin: 40px 0 0 0;
	width: 50%;
	display: block;
}
#google {
	float: right;
	margin: 45px 0 0 0;
	width: 40%;
	display: block;
	background:#7f8000;
	border-bottom-right-radius:10px;
	border-bottom-left-radius: 10px;
}

#map{
	float:none;
	margin:10px 5%;
	width:90%;
}
#right-box {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
footer {
	clear: both;
	float: left;
	margin: 0 24.9%;
	width: 46%;
	display: block;
	padding: 10px 2%;
	border-top:2px solid #7f8000;
	 border-left: 1px solid #7f8000;
      border-right: 1px solid #7f8000;
	background: rgba(51,31,2,1);
	  background: -moz-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(51,31,2,1)), color-stop(5%, rgba(51,31,2,1)), color-stop(31%, rgba(193,158,103,1)), color-stop(62%, rgba(182,141,76,1)), color-stop(95%, rgba(51,31,2,1)), color-stop(100%, rgba(51,31,2,1)));
	  background: -webkit-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -o-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: -ms-linear-gradient(left, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  background: linear-gradient(to right, rgba(51,31,2,1) 0%, rgba(51,31,2,1) 5%, rgba(193,158,103,1) 31%, rgba(182,141,76,1) 62%, rgba(51,31,2,1) 95%, rgba(51,31,2,1) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#331f02', endColorstr='#331f02', GradientType=1 );
	  -webkit-box-shadow: 0px 6px 10px 3px rgba(0,0,0,0.49);
-moz-box-shadow: 0px 6px 10px 3px rgba(0,0,0,0.49);
box-shadow: 0px 6px 10px 3px rgba(0,0,0,0.49);
}

footer p{
	text-align:center;
	color:#fff;	
	font-size:13px;
}
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.01.2016, 19:39
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 13.12.2010
Beiträge: 19
leverkusenerjung befindet sich auf einem aufstrebenden Ast
Standard klar kann ich...
Code:
/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs  */
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/\(min\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1),maxw:D.match(/\(max\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
Mit Zitat antworten
Sponsored Links
Antwort

« Vorheriges Thema | Nächstes Thema »

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
Ausrichtung Kalender greece4u CSS 20 14.05.2012 13:32
Navigation ist nicht mittig Schokokrapfen CSS 29 19.09.2011 23:19
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:07 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