Margin Padding Boxen (Nav + Content)

Sempervivum · 2. März 2020

Du hast übersehen, dass ich einige Namen geändert habe: Der Container um den Hauptinhalt ist jetzt main und dem Wrapper um die beiden Elemente nebeneinander habe ich die Klasse wrapper-horizontal gegeben. Daher passt das CSS nicht zum HTML und wirkt teilweise nicht.

Andrin.Spitzer · 2. März 2020

habe es bemerkt und geändert. jetzt funktioniert es perfekt. danke.

ist das richtig das ich das so ändern muss um die nav zu fixieren?

HTML:

<body id="body">       
            <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#info">Info</a></li>
            <li><a href="#team">Teilnehmer</a></li>
            <li><a href="#sing in">Anmelden</a></li>
            <li><a href="#sponsoren">Sponsoren</a></li>
        </ul>
    </nav>
    <section class="scroll" id="content">
    <main>
        <h1 class="title" id="home">
            Betriebs-Meisterschaften <br>
            Schaffhausen
        </h1>
        <div class="item" id="info">
            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. Stet
            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <div class="item" id="team">
            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. Stet
            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <div class="wrapper-horizontal">
            <div class="item-REGISTER" id="sign-in">
                <h2>Anmeldung</h2>
            </div>
            <div class="item-CONTACT">
                Max Muster<br>
                Musterstrasse 5 <br>
                Musterstadt 8253
                <hr>
                Tel +41 46 45 45 45<br>
                E-Mail muster@muster.com
            </div>
        </div>
        <div class="item" id="sponsoren">
            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. Stet
            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
    </main>
        </section>
    </body>

und einfach das noch der css hinzufügen..?

CSS:

.scroll {
            overflow-y: scroll;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: auto;
        }

Sempervivum · 2. März 2020

Soweit ist das schon richtig. Was noch fehlt, ist, dass Du die Höhe des gesamten Inhaltes auf die Fensterhöhe beschränken musst, weil sich body sonst einfach nach unter ausdehnt und keine Scrollbar auftaucht. Also

CSS:

body {
    height: 100vh;
}

vh sind Viewport-Units, in diesem Fall 100% der Höhe des Browserfensters (Viewport).

Sempervivum · 2. März 2020

Das beeinträchtigt zwar die Funktion nicht, aber ich bin immer gegen eine Inflation von Containern. Das section kannst Du auch weg lassen und einfach das main scrollbar machen.

Andrin.Spitzer · 2. März 2020

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>FirmenMeisterschaft 2020</title>
        <meta name="description" content="Ein interaktiver Wegweiser für die ersten Schritte mit Brackets.">
        <link rel="stylesheet" type="text/css" href="./css/layout.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="./css/background.css" media="screen" />
    </head>
    <body id="body">       
            <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#info">Info</a></li>
            <li><a href="#team">Teilnehmer</a></li>
            <li><a href="#sing in">Anmelden</a></li>
            <li><a href="#sponsoren">Sponsoren</a></li>
        </ul>
    </nav>
    <main class="scroll" id="content">
        <h1 class="title" id="home">
            Betriebs-Meisterschaften <br>
            Schaffhausen
        </h1>
        <div class="item" id="info">
            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. Stet
            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <div class="item" id="team">
            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. Stet
            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <div class="wrapper-horizontal">
            <div class="item-REGISTER" id="sign-in">
                <h2>Anmeldung</h2>
            </div>
            <div class="item-CONTACT">
                Kontakt:<hr>
                asd<br>
                asd<br>
                asd<hr>
                asd<br>
                asd
            </div>
        </div>
        <div class="item" id="sponsoren">
            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. Stet
            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
    </main>
    </body>
</html>
<script>
    (function(){
      var parallax = document.querySelectorAll("body"),
          speed = 0.8;
      window.onscroll = function(){
        [].slice.call(parallax).forEach(function(el,i){
          var windowYOffset = window.pageYOffset,
              elBackgrounPos = "50% " + (windowYOffset * speed) + "px";
          el.style.backgroundPosition = elBackgrounPos;
        });
      };
    })();
</script>

CSS:

body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        height: 100vh;
}   

main {
            display: flex;
            flex-direction: column;
}

html {
        scroll-behavior: smooth;
}

.scroll {
            overflow-y: scroll;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: auto;
        }

.wrapper-horizontal {
            display: flex;
        }

.title {
        margin-top: 15%;
        margin-bottom: 3em;
        margin-left: 20%;
        margin-right: 20%;
        flex-basis: 100%;
        color: #FFFFFF;
        text-align: center;
        font-size: 11.5em;
        text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC, -40px 40px 20px rgba(206,89,55,0);
}

ul {
        margin: 0px auto;
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: center;
        width: 1400px;
}

li {
        position: relative;
        padding: 15px 0;
}

a {
        color: white;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 2em;
        letter-spacing: 0.40em;
        display: inline-block;
        padding: 20px 20px;
}

a:after {
        bottom: 0;
        content: "";
        display: block;
        height: 4px;
        left: 50%;
        position: absolute;
        background: white;
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 0;
        border-radius: 10px;
}

a:hover:after {
        width: 100%;
        left: 0;
}

.item {
            flex: 1;
            margin-top: 0em;
            margin-bottom: 2em;
            margin-left: 20%;
            margin-right: 20%;
            background-color: whitesmoke;
            -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            padding: 2em;
}
.item-REGISTER {
            flex: 3;
            margin-top: 0em;
            margin-bottom: 2em;
            margin-left: 20%;
            /* margin-right: 40%; */
            background-color: whitesmoke;
            -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            padding: 2em;
}
.item-CONTACT {
            flex: 1;
            margin-top: 0em;
            margin-bottom: 2em;
            margin-left: 1.5%;
            margin-right: 20%;
            background-color: whitesmoke;
            -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            padding: 2em;
}

klappt leider noch nicht

Sempervivum · 2. März 2020

Die Überschrift ist ja gewaltig jetzt. Damit es mit dem Scrollen klappt, muss man auch body ein display:flex und flex-direction:column geben:

CSS:

        html,
        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

Und height:100% für html und body, damit rechts keine zweite Scrollbar auftaucht.
Dies ist das vollständige CSS:

CSS:

        html,
        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            height: 100%;
            display: flex;
            flex-direction: column;
        }


        main {
            display: flex;
            flex-direction: column;
        }

        html {
            scroll-behavior: smooth;
        }

        .scroll {
            overflow-y: scroll;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: auto;
        }

        .wrapper-horizontal {
            display: flex;
        }

        .title {
            margin-top: 15%;
            margin-bottom: 3em;
            margin-left: 20%;
            margin-right: 20%;
            flex-basis: auto;
            color: #FFFFFF;
            text-align: center;
            font-size: 11.5em;
            text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC, -40px 40px 20px rgba(206, 89, 55, 0);
        }

        ul {
            margin: 0px auto;
            padding: 0;
            list-style: none;
            display: flex;
            justify-content: center;
            width: 1400px;
        }

        li {
            position: relative;
            padding: 15px 0;
        }

        a {
            color: white;
            text-transform: uppercase;
            text-decoration: none;
            font-size: 2em;
            letter-spacing: 0.40em;
            display: inline-block;
            padding: 20px 20px;
        }

        a:after {
            bottom: 0;
            content: "";
            display: block;
            height: 4px;
            left: 50%;
            position: absolute;
            background: white;
            transition: width 0.3s ease 0s, left 0.3s ease 0s;
            width: 0;
            border-radius: 10px;
        }

        a:hover:after {
            width: 100%;
            left: 0;
        }

        .item {
            flex: 1;
            margin-top: 0em;
            margin-bottom: 2em;
            margin-left: 20%;
            margin-right: 20%;
            background-color: whitesmoke;
            -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            padding: 2em;
        }

        .item-REGISTER {
            flex: 3;
            margin-top: 0em;
            margin-bottom: 2em;
            margin-left: 20%;
            /* margin-right: 40%; */
            background-color: whitesmoke;
            -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            padding: 2em;
        }

        .item-CONTACT {
            flex: 1;
            margin-top: 0em;
            margin-bottom: 2em;
            margin-left: 1.5%;
            margin-right: 20%;
            background-color: whitesmoke;
            -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
            padding: 2em;
        }

Andrin.Spitzer · 3. März 2020

Funktioniert gut jedoch funktioniert mein parallax scrolling effect nicht mehr

.

Andrin.Spitzer · 3. März 2020

und lässt sich die scroll bar ausblenden?

Sempervivum · 3. März 2020

jedoch funktioniert mein parallax scrolling effect nicht mehr

Dann poste doch mal den Code dieses Effektes. Sicher kann man ihn wieder zum Laufen bringen.

und lässt sich die scroll bar ausblenden?

Dann könnte man ja nur mit dem Mausrad scrollen? Ich bin immer genervt, wenn ich auf eine Seite komme, wo das so ist.

Andrin.Spitzer · 3. März 2020

Javascript:

<script>
    (function(){
      var parallax = document.querySelectorAll("body"),
          speed = 0.8;
      window.onscroll = function(){
        [].slice.call(parallax).forEach(function(el,i){
          var windowYOffset = window.pageYOffset,
              elBackgrounPos = "50% " + (windowYOffset * speed) + "px";
          el.style.backgroundPosition = elBackgrounPos;
        });
      };
    })();
</script>

Margin Padding Boxen (Nav + Content)

Sempervivum

Erfahrenes Mitglied

Andrin.Spitzer

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

Andrin.Spitzer

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

Andrin.Spitzer

Erfahrenes Mitglied

Andrin.Spitzer

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

Andrin.Spitzer

Erfahrenes Mitglied

Neue Beiträge