zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responisve Webseite Logo springt der Buttons nach links

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.05.2017, 13:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 31
Soelg befindet sich auf einem aufstrebenden Ast
Standard 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&uuml;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&uuml;terter von
                besonderer Bedeutung.<br /> Inmitten einer zum Teil noch unber&uuml;hrten Natur, umgeben von vielen Seen und Gew&auml;ssern,
                stehen alte markante Feldsteinkirchen. Hier ist auch der Ort, wo die „K&ouml;nigin der Instrumente‟ - die Orgel, steht.
                Zeugnis einer hochstehenden Musikkultur und einer gro&szlig;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&szlig;stabsetzend gelten.<br />
                <br />Einer der bedeutendsten und ber&uuml;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&auml;ten Schaffenszeit steht in der
                Marienkirche Angerm&uuml;nde.<br /><br />
                Dieter Gl&ouml;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&uuml;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&uuml;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;
}
Beste Grüße
Dieter
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.05.2017, 14:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Ohne Link zur Website können wir dir nicht helfen.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.05.2017, 14:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 31
Soelg befindet sich auf einem aufstrebenden Ast
Standard Responsive Webseite

Vielen Dank für Deine Antwort.
Ich habe den Link zur Webseite erstellt.

Ich freue mich über Deine Hilfe!
Dieter
Mit Zitat antworten
Antwort

Stichwörter
responsive webseite

Themen-Optionen
Ansicht

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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:52 Uhr.