Hey,
ich bin grade am erstellen einer Website und habe Probleme mit dem responsiven Design und zwar mit der Navigation.
Das ist mein HTML Code:
HTML
<head>
<title>Zimmerei Kohlhepp</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript">
$(document).ready(function(){
$('.menubutton').click(function() {
$('nav').slideToggle('slow');
});
});
</script>
<meta charset="UTF-8">
</head>
<body>
<div class="oben">
<section id="menubar">
<ul>
<li>
<a class="menubutton" href="#menu">
<img src="Bilder/hamburger.png">
</a>
</li>
</ul>
</section>
<header>
<img src="Bilder/Logo.jpg">
<h1>Zimmerei Kohlhepp</h1>
</header>
<nav class="nav">
<ul>
<li>
<a href="Index.html" class="active">Start</a>
<a href="Ueber_uns.html" >Über uns</a>
<a href="Leistungen.html" >Leistungen</a>
<a href="Kontakt.html" >Kontakt</a>
</li>
</ul>
</nav>
</div>
<section id="main">
<div class="braun">
<h2>Herzlich Willkommen!</h2><section id= "banner">
<img class="Banner" src="Bilder/Banner.jpg">
</section>
<article>
<img src="Bilder/Bild1.jpg"/>
<div class="Schrift">
<p > Starke Leistungen brauchen ein starkes Team! </p>
<p>Vom Dachstuhl bis zum kompletten Haus können wir Ihnen alles im Bereich Holzbau bieten!</p>
<p>Kontaktieren Sie uns und wir setzen Ihre Wünsche um!</p>
<p>Wir freuen uns auf Sie! </p>
</div>
</article>
<footer>
<ul>
<li><a href="Impressum.html" >Impressum</a></li>
</ul>
</footer>
</section>
</div>
</body>
</html>und das mein CSS dazu:
Code
/*General Style*/
html { background: url(Bilder/Hintergrund.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{font-size: 100%;
margin: 0em;
padding: 0em;
}
.braun {background: rgb(243,218,170);
margin:auto;
border-radius: 30px;
max-width: 1200px;
margin-top: 2em;
margin-bottom: 5em;
padding-bottom: 2em;}
.oben {background: white;
width: 100%;
}
h1 {font-size: 2.75em;
line-height: 1.8em;
font-family: Lobster;
font-weight: 100;
margin: 0em;
display: inline-block;
}
h2 {font-size: 2em;
line-height: 1.8em;
font-family: Yanone Kaffeesatz;
font-weight: bold;
letter-spacing: 0.1em;
margin: 0em;
padding: 0em;
padding-top: 0.5em;
padding-left:1em;
text-align: left;}
p {
text-align: center;
font-size:1.5em;
font-family: Yanone Kaffeesatz;
font-weight: normal;
text-align: left;
display: inline-block;
padding-left: 2.0em;
padding-top: 0em;
}
ul {
margin:0px;
padding: 0px;
}
li {list-style: square;
line-height: 1.25em;
font-family: Yanone Kaffeesatz;
font-weight: normal;
margin: 0.313em 0em 0.313em 0em;
padding: 0em;
text-align: justify;}
img {
width:60%;
height: auto;
max-width: 100%;
}
a {text-decoration: none;}
/* On top Bar */
#menubar{
display: block;
background: white;
}
#menubar ul {
display: block;
width:2em;
padding: 0em;
padding-top:0.9em;
}
#menubar ul li {
display: inline;
line-height: 0.1em;
}
#menubar ul li a.menubutton {
display: none;
}
#menubar ul li a img {width:100%;
padding-left: 2em;}
/*header*/
header {
display: inline-block;
background: white;
padding-left: 6em;
max-width: 40%;
}
header img {max-width: 8%;
height: auto;
padding-right: 1em;
}
/* Navigation */
nav {
display:block;
background: white;
text-align:center;
}
nav ul {
display: block;
}
nav ul li {
display: inline;
margin: 0em 0.188em 0em 0.188em;
}
nav ul li a {
color: black;
font-size:1.5em;
line-height: 2.5em;
padding: 0.563em 0.938em 0.375em 0.983em;
transition:background 0.2s;
-webkit-transition:background 0.2s;
}
nav ul li a:hover { background: rgb(136,114,103);
border-bottom: 0.188em solid #3e322d;
}
nav ul li a.active {border-bottom: 0.188em solid #3e322d;
}
/*Conten´t Area */
#main {
display: block;
width:96%;
max-width: 1200px;
margin: 0em auto;
padding:0em;
}
#main article { display: inline-block;
width: 100%;
vertical-align: top;
margin:0em;
padding: 0em;
}
#main article img {
max-width: 400px;
margin-top: 2em;
border: 5px solid rgb(75,69,53);
display: inline-block;
text-align: center;
margin-left: 2em;
}
.Schrift {display: inline-block;
position: relative;
max-width: 600px;
padding-top: -10em;
}
#banner {
display: block;
width:100%;
max-width: 1200px;
margin: 0em auto;
padding:0em;
}
#banner img {
max-width: 1200px;
width: 100%;
}
/* footer */
footer {
display: block;
text-align: right;
margin-top: 1em;
margin-bottom: -0.5em;
}
footer ul li { text-align: right;
padding-right: 3em;
list-style-type: none;
}
footer ul li a { color: black;
padding: 0.2em;
border: 3px solid rgb(75,69,53);}
/* Mobile Ansicht */
@media screen and (max-width: 800px){
body { font-size: 90%;
}
}
@media screen and (max-width: 600px){
#main article {
width:100%;
display: block;
margin: 0.625em 0em 0.625em 0em; }
#main article img {
margin-left: 1.3em;
width: 220px;
}
.Schrift p {
text-align: center;
max-width: 250px;}
.Schrift {margin-left: -1.9em;}
}
@media screen and (max-width: 550px) {
nav.nav {display: block !important ;}
body{font-size: 86%;}
#menubar ul li a.menubutton {
display: block;
}
nav { display: none;
height: auto;}
nav ul li {display: block;
margin: 0.3em 0em 0.3em 0em}
}Ich würde mich extrem freuen, wenn mir irgendjemand helfen kann !
Danke schonmal!
Ganz Liebe Grüße
Sundream
