|
|||
Responisve Webseite Logo springt der Buttons nach links
Hallo,
ich habe eine Responsive Webseite erstellt. Beim Anklicken der Buttons springt der Logo Text im Header immer nach links. Ich habe schon alles probiert und keine Lösung gefunden. Danke für die Hilfe! http://www.orgelakademie-uckermark-westpommern.de Code:
<!DOCTYPE html> <html lang="de"> <head> <title>Orgelkonzert Uckermark-Westpommern</title> <meta charset="UTF-8" /> <meta name="description" content="" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <link href="css/style.css" type="text/css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> <body> <nav class="navBar"> <nav class="wrapper"> <input type="checkbox" id="menu-toggle"> <label for="menu-toggle" class="hamburger"> <div></div> <div></div> <div></div> </label> </input> <div class="logo"> <p class="orgelakademie">ORGELAKADEMIE</p> <p class="uckermark">UCKERMARK-WESTPOMMERN</p> <p class="kulturland">kulturland pomerania</p> </div><!-- Logo --> <ul> <a href="index.html" class="active"><li>Home</li></a> <a href="unterricht.html"><li>Unterricht</li></a> <a href="seminare.html"><li>Seminare</li></a> <a href="dozenten.html"><li>Dozenten</li></a> <a href="instrumente.html"><li>Instrumente</li></a> </ul> </nav> </nav> <section id="main"> <article> <img class="wagner_prospekt" src="images/wagner_orgel.jpg" /> <p class="bildunterschrift_wagnerprospekt"><i>Angermünde St. Marien, Joachim Wagner, 1742/44</i></p><br /><br /><br /><br /> <p>Die Uckermark und Westpommern haben mit ihrer einzigartigen Naturlandschaft auch Kulturgüterter von besonderer Bedeutung.<br /> Inmitten einer zum Teil noch unberührten Natur, umgeben von vielen Seen und Gewässern, stehen alte markante Feldsteinkirchen. Hier ist auch der Ort, wo die „Königin der Instrumente‟ - die Orgel, steht. Zeugnis einer hochstehenden Musikkultur und einer großartigen Handwerkskunst! Der Orgelbau hat eine sehr lange Geschichte. Aber in der Renaissance- und Barockzeit und eine kurze Zeit danach, gelang es den Orgelbaumeistern Instrumente zu bauen, die in ihrer handwerklichen Kunst und in ihrer ausdrucksstarken, facettenreichen Klangvielfalt eine Meisterleistung darstellen und bis heute als maßstabsetzend gelten.<br /> <br />Einer der bedeutendsten und berühmtesten Orgelbaumeister aus dieser Zeit ist, neben Gottfried Silbermann und Arp Schnitger, Joachim Wagner (1690-1749). Ein prachtvolles und sehr gut erhaltenes Werk aus seiner späten Schaffenszeit steht in der Marienkirche Angermünde.<br /><br /> Dieter Glös, ORGELAKADEMIE </p> </article> <aside> <section class="section_1"> <div class="streifen"></div> <h2>Termine 2017</h2> <ul> <li>15.09. bis 17.09. Schloss Wartin</li> <li>29.09. bis 01.10. Schloss Stettin</li> <li>13.10. bis 14.10. Schloss Wartin</li> </ul> </section> <section class="section_2"> <div class="streifen"></div> <h2>Information</h2> <p>Wie in den vergangenen Jahren, finden auch in diesem Jahr weitere Workshops für deutsche und polnische ehrenamtliche Kantoren und Studenten statt. Im Mittelpunkt steht die Interpretation der Orgelmusik <i>Alter Meister und Johann Seabstian Bachs</i>.<br /><br /> Die <i>Improvisation</i> wird in allen 3 Workshops als ein elementares Gestaltungselement in den Unterricht eingebunden. </p> </section> <section class="section_3"> <div class="streifen"></div> <h2>Entdecken</h2> <ul> <li>Kulturgüter</li> <li>restaurierte Orgeln</li> <li>einzigartige Naturlandschaft</li> </ul> </section> <section class="section_3"> <div class="streifen"></div> <h2>Kennenlernen</h2> <ul> <li>Musik</li> <li>Handwerkskunst<br />›restaurierte Instrumente‹</li> <li>Kultur und Heimatgeschichte</li> </ul> </section> <section class="section_2"> <div class="teilnahme"> <div class="streifen"></div> <h2><a href="kontakt.html">Teilnahme und Kontakt</a></h2> <p>Die Teilnahme an den Workshops ist mit Verpflegung und Unterkunft kostenfrei!</p> </div> </section> </aside> </section> <footer> <ul> <li>Ⓒ COPY, 2017</li> <a href="kontakt.html"><li>KONTAKT</li></a> <a href="impressum.html"><li>IMPRESSUM</li></a> </ul> </footer> <div id="footer"> <div id="back-top"><!-- Button nach oben--> <a href="#top"><img class="pfeil" src="images/pfeil_oben22.gif" /></a> </div> <!-- F O O T E R E N D E --> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="jquery.pageslide.min.js"></script> <!--Button nach oben--> <script type="text/javascript"> $(document).ready(function(){ // Button einblenden beim Scrollen, für zurück nachoben(back-top) $(function(){ $(window).scroll(function(){ if ($(this).scrollTop() >200){ $('#back-top').fadeIn(); } else{ $('#back-top').fadeOut(); } }); // nach oben scrollen beim Klicken $('#back-top a').click(function(){ $('body,html').animate({ scrollTop: 0 }, 350); return false; }); }); }); </script> </body> </html> Code:
@font-face { font-family: 'helvetica-light.ttf'; src: url(Helvetica/helvetica-light.ttf); } /* GENERAL STYLE */ body { /* Permalink - use to edit and share this gradient: Ultimate CSS Gradient Generator - ColorZilla.com */ background: rgb(252,255,244); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(252,255,244,1) 0%, rgba(233,233,206,1) 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ margin: 0em; padding: 0em; font-size: 63%; /* 16px=1.6em*/ } h2 { font-size: 2.5em; /*line-height: 2.88em;*/ font-family: Helvetica; font-weight: 100; color: #495252; margin: 0em; padding: 1.4em; text-align: left; } p { font-family: 'Helvetica-light.ttf'; font-size: 1.4em; font-weight: 100; color: #002517; margin: 0em; padding: 2em 1em 1em 1em; text-align: left; /*text-align: justify;*/ } ul { margin: 0px; padding: 0px; } li { list-style: square; font-family: 'helvetica-light.ttf'; font-size: 1.5em; font-weight: 100; color: #F2F2F2; /*Farbe Menüleiste*/ line-height: 1.8em; margin: 0em; padding: 0em; } img { width: 40%; height: auto; max-width: 100%; } a { text-decoration: none; } .navBar { /* Permalink - use to edit and share this gradient: Ultimate CSS Gradient Generator - ColorZilla.com */ background: rgb(181,189,200); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-top-left-radius: 3px; -moz-border-top-right-radius: 3px; position: fixed; min-width: 100%; height: 120px; margin-top: -2em; } .logo { letter-spacing: 2px; margin-left: -12em; } .orgelakademie { font-size: 3vmax; margin-left: -0.1em; font-family: 'Helvetica-bold.ttf'; /*color: #F9E188;*/ color: #FFCB65; margin: 0 0 0 -2px; padding: 0; } .uckermark { font-size: 2vh; margin: 0 0 0 -1px; padding: 0; color:#FFFFFF; letter-spacing: 1.3px; } .kulturland { font-size: 1.8vh; color:#FFFFFF; margin: 0; padding: 0; line-height: 20px; } nav ul { display: -moz-flex; display: -o-flex; display: -ms-flex; display: -webkit-flex; display: flex; justify-content: space-between; list-style-type: none; margin-right:6em; margin-left: -3em; padding-top: 8em; clear: both; } nav ul a { text-decoration: none; transition: all 0.5s ease; padding-left: 0.8em; font-size: 1em; letter-spacing: 0.8px; font-family: 'helvetica-light.ttf'; } nav ul li:hover { color: #BCBCBC; transition: .5s; } nav ul li:active { background-color: #A91E1E; } nav li { display: inline-block; } nav #menu-toggle { display: none; } nav .label-toggle { display: none; } nav .wrapper { align-items: center; display: flex; justify-content: space-between; } .bildunterschrift_wagnerprospekt { font-size: 1.1em; padding: 25px 0 0 1.8em; margin-right: 2em; float: left; } @media screen and (max-width: 768px) { .wrapper { width:100%; } .navBar { height:auto; } .logo { margin: 1.5em 0 0 4.5em; padding: 1em 0 3em 0em; } nav ul { /* Permalink - use to edit and share this gradient: Ultimate CSS Gradient Generator - ColorZilla.com */ background: rgb(40,52,59); /* Old browsers */ background: -moz-linear-gradient(top, rgba(40,52,59,1) 0%, rgba(181,189,200,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(40,52,59,1) 0%,rgba(181,189,200,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(40,52,59,1) 0%,rgba(181,189,200,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28343b', endColorstr='#b5bdc8',GradientType=0 ); /* IE6-9 */ display: block; height: 0; list-style-type: none; opacity: 0; text-align: center; transition: all 1s ease; width: 100%; visibility: hidden; padding: 0; margin-right: 0em; margin-left: 0em; } /* SCHRIFT ANPASSEN TOGGLE MENUE */ nav li { border-bottom: 0.5px solid #9B9B9B; color: #FFFFFF; display: block; padding-bottom: 15px; font-size: 14px; font-family: 'helvetica-light.ttf'; } nav ul a { font-size: 0.7em; } /* SCHRIFT ANPASSEN TOGGLE MENUE */ nav #menu-toggle:checked ~ ul { opacity: 1; height: 100vh; visibility: visible; } .hamburger div { border: solid 2px #EDEDED; width: 18px; margin: 3.5px; } .hamburger { float: right; cursor: pointer; margin: 45px 15px 0 0; } nav .wrapper { display: block; } footer { margin-top: 0; } } /* CONTENT */ #main { display: block; width: 96%; max-width: 980px; margin: 2.0em auto; /*Abstand nach oben; Seitenverhältnisse links und rechts auto*/ padding: 0em; padding-top: 9em; } #main article { display: inline-block; /*Ausrichtung von main und aside nebeneinander.*/ width: 65.3%; /* Permalink - use to edit and share this gradient: Ultimate CSS Gradient Generator - ColorZilla.com */ background: rgb(252,255,244); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(252,255,244,1) 0%, rgba(233,233,206,1) 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ margin-top: 3em; vertical-align: top; padding: 0em; text-align: center; } #main .wagner_prospekt { width: 95%; max-width: 630px; padding-left: 0.5em; } #main article h2 { font-size: 2em; font-family: 'helvetica-light.ttf'; } #main article p { /*clear: both;*/ margin-top: -2.3em; padding-bottom: 1em; } /* ASIDE */ #main aside { display: inline-block; /*Ausrichtung von aside und main nebeneinander.*/ width: 30.6%; margin-left: 3%; padding:0 0 0 0; vertical-align: top; margin-bottom: -20px; margin-top: 3em; height: auto; } #main aside section { margin-bottom: 0.5em; /*background-color: #E1E1E1;*/ border-left: dotted 0.5px #002517; border-right: dotted 0.5px #002517; border-bottom: 0.5px dotted #002517; border-top: 0.5px dotted #002517; } #main aside section ul li { color: #002517; font-size: 1.4em; } aside section h2 { padding: 1em 0em 0em 0em; margin-top: -0.5em; font-size: 1.5em; } #main aside section ul { padding: 0em 3em 2em 3em; } /* BOXEN ASIDE AUSRICHTEN */ aside .section_1 h2 { margin-bottom: 0.1em; margin-left: 1em; } aside .section_2 h2 { margin-bottom: 0.1em; margin-left: 1em; } aside .section_3 h2 { margin-bottom: 0.1em; margin-left: 1em; } .teilnahme { background-color: #E0E0B1; } .teilnahme p { clear: both; padding: 0.5em 1em 2em 1em; } .teilnahme a{ font-size: 1em; color: #495252; border-bottom: 0.5px solid; } aside .section_2 h2 { float: left; } aside .section_2 li { /*Teilnahme und Kontakt*/ width: 150%; list-style: none; } .streifen { background-color: #E0E0B1; /*Streifen ASIDE*/ width: 100%; height: 1.5em; display: block; position: relative; padding: 0; margin: 0; z-index: -1; } /* FOOTER */ footer { display: block; /*Ganze Breite der Webseite*/ /* Permalink - use to edit and share this gradient: Ultimate CSS Gradient Generator - ColorZilla.com */ background: rgb(181,189,200); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ text-align: center; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-bottom-left-radius: 3px; -moz-border-bottom-right-radius: 3px; } footer ul { display: block; width: 100%; max-width: 980px; height: auto; margin: 0 auto; } footer ul li { display: inline; font-size: 1.1em; line-height: 4.5em; color: #000000; padding: 0em 0.3em 0em 0.3em; font-family: 'helvetica-light.ttf'; margin-top: 60px; } footer ul li a { color: #0B0B0B; } /*Button nach oben Anfang*/ #back-top a { max-width: 1.3em; display: block; text-align: right; font-size: 45px; margin: -1.2em 10px 0 0; width: 10%; float: right; } #back-top { display: none; float:right; z-index: -3; } /*Button nach oben Ende*/ /* MOBILE STYLE */ @media screen and (max-width: 600px) { #main aside, #main article { width: 100%; display: block; margin: 1em 0em 1em 0em; } #main aside { margin-top: 2.2em; } } @media screen and (max-width: 600px) { .kulturland { font-size: 1.2em; letter-spacing: 1px; } } @media screen and (min-width: 550px) { .nav.nav { display: block !important; } } @media screen and (max-width: 550px) { body { font-size: 65%; } #back-top a { width: 1.1em; margin: -1.2em 5px 0 0; float: right; } #main { padding-top: 7em; } #main article { border-left:none; } #main .wagner_prospekt { width: 93%; } .bildunterschrift_wagnerprospekt { margin-left: -0.4em; } #main aside { padding-top: 1.3em; } .orgelakademie { font-size: 1.4em; } .uckermark { line-height: 20px; } .kulturland { letter-spacing: 1px; font-size: 0.9em; } .nav ul li { display: block; margin: 0em 0 0em 0; font-size: 1em; font-family: 'helvetica-light.ttf'; border-top : 0.5px solid #484848; padding-bottom: 1.3em; } .navBar { height: auto; } .logo { margin: 0em 0 0 0; padding: 1em 0 2.5em 4em; } footer ul li { margin: 0 0 0 -1em; padding: 0 8px 0 8px; } footer ul a { padding: 15px 0 0 0; margin-top: -14px; } } /*Button nach oben Anfang*/ #back-top { margin:5px 10px 0 0px; display: none; float: right; z-index: -3; } #back-top a { width: 1em; height: 2.5em; margin-top: -55px; display: block; text-align: center; padding-top: 15px; font-size: 20px; color: #fff; background-color: ; text-decoration: none; } #back-top a:hover { text-decoration: none; } .pfeil { height: 25px; width: 25px; } /*Button nach oben Ende*/ /* IMPRESSUM */ .impressum { margin-left:o.7em; } Dieter |
Sponsored Links |
Stichwörter |
responsive webseite |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
Bookmark Links für "Social Bookmarking" Dienste auf der Webseite | cantor | (X)HTML | 3 | 30.10.2007 00:05 |
Holy Grail und der Internet Explorer! | ONeill | CSS | 23 | 01.06.2006 19:20 |
Problem mit dem Menü [erledigt] | Julian | CSS | 2 | 16.01.2006 00:27 |
Probleme mit 3 spalten | luk | CSS | 3 | 08.06.2005 15:39 |