# Margin Padding Boxen (Nav + Content)



## Andrin.Spitzer (2. März 2020)

Hay.

Hab ein paar anliegen bezüglich margin.

Mein Problem ist das dass die Abstände zwischen den "Buttons" meiner NAV nicht gleichmäßig sind und ich finde den Fehler nicht.

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

mit folgendem style 

```
ul {
    margin: 0px auto;
    padding: 0;
    list-style: none;
    display: table;
    width: 1400px;
}

li {
    display: table-cell;
    position: relative;
    padding: 15px 0;
}

a { color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.5em;
    letter-spacing: 0.40em;
    display: inline-block;
    padding: 20px 20px;
    position: fixed;
}

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

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




Meine zweite frage ist wie bekomme ich die box class="item-CONTACT" aufgleicher höhe rechts von der box class="item-REGISTER"





```
<div id="wrapper">
            <div class="title" id="home">
                Betriebs-Meisterschaften <br>
                Schaffhausen
            </div>
            <div class="item" id="info">
                
            </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="item-REGISTER" id="sing in">
                <h1>Anmeldung</h1>   
            </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 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>
        </div>
```


```
.item {
    flex-basis: 100%;
    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-basis: 100%;
    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-basis: 100%;
    margin-top: 0em;
    margin-bottom: 2em;
    margin-left: 61%;
    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;
}
```


Ich hoffe ihr könnt mir helfen.

Den Ganzen Code zum downloaden

https://drive.google.com/open?id=1lH4YaJ9zG9_ubuaCYkQ9V4SrNrVLzYLi


----------



## Sempervivum (2. März 2020)

Zu der ersten Frage:  Ich musste erst Mal die Farben ändern, um etwas zu sehen zu bekommen. Und dann ist das Ganze ja riesig, ich habe zwar einen Full-HD-Bildschirm, aber da passt die Nav kaum drauf.
Aber netter Effekt mit dem animierten Unterstrich!
Deine eigentliche Frage kann man wie folgt beantworten:
Warum `display: table;`? Mit Flexlayout kannst Du die Elemente viel besser ausrichten, siehe hier:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

        li {
            /* display: table-cell; */
            position: relative;
            padding: 15px 0;
        }

        a {
            color: black;
            text-transform: uppercase;
            text-decoration: none;
            font-size: 1.5em;
            letter-spacing: 0.40em;
            display: inline-block;
            padding: 20px 20px;
            /* position: fixed; */
        }

        a:after {
            /* dieses wird ohnehin von dem background weiter unten überschrieben:
            /* background: none repeat scroll 0 0 transparent; */
            bottom: 0;
            content: "";
            display: block;
            height: 4px;
            left: 50%;
            position: absolute;
            background: lightblue;
            transition: width 0.3s ease 0s, left 0.3s ease 0s;
            width: 0;
            border-radius: 10px;
        }

        a:hover:after {
            width: 100%;
            left: 0;
        }
```
Und auf das `position: fixed;` kannst Du verzichten, wenn Du dieses Muster verwendest:
https://webentwicklung.ulrichbangert.de/flex-scrollable.html


----------



## Sempervivum (2. März 2020)

Zur zweiten Frage: Da Du bei den Items `flex-basis` verwendest, nehme ich an, dass der Wrapper ein `display: flex;` haben soll? Weise ich ihm das zu, sind die beiden Items auf gleicher Höhe, aber das Bild, das sich ergibt, ist merkwürdig: Sehr schmale Kästen mit großem Zwischenraum. Ist dies das, was Du wolltest?


----------



## Andrin.Spitzer (2. März 2020)

Hay danke für die schnelle Antwort.

Den Unterstrich habe ich mir aus diversen Foren Inhalten selbst zusammen gebastelt.

Hab nen ultra widescreen bin noch am lernen weiß noch nicht wie ich das so hinbekommen das sich die nav schön der grösse anpasst. haha

Nun ist aber die Nav nicht mehr fixiert am oberen rand.?

Kannst du mir das mal mit display: flex demonstrieren? wahrscheinlich hast du die kleine box mit den großen Abständen weil ich es noch nicht schaffe die Elemente der Bildschirmgröße anzupassen.


----------



## Sempervivum (2. März 2020)

> Nun ist aber die Nav nicht mehr fixiert am oberen rand.?


Dazu hatte ich dir eine Alternative gegeben, der unscheinbare Link "Demo Flexlayout" ganz unten in meinem ersten Posting. Versuche, es auf deine Seite umzusetzen.



> Kannst du mir das mal mit display: flex demonstrieren? wahrscheinlich hast du die kleine box mit den großen Abständen weil ich es noch nicht schaffe die Elemente der Bildschirmgröße anzupassen.


Gern, aber dazu muss ich erst Mal wissen, wie es aussehen soll. Beschreibe es oder, besser, mache eine Skizze.


----------



## Andrin.Spitzer (2. März 2020)

so stelle ich mir die divs for.


heißt das ich muss die teile die nicht fixirt werden sollen in der fixirt werden sollen in section scroll sind und es dan nur so aussieht als ob sich die nav mit runter scrollt aber eigentlich der text dahinter hoch geht?


----------



## Sempervivum (2. März 2020)

> heißt das ich muss die teile die nicht fixirt werden sollen in der fixirt werden sollen in section scroll sind und es dan nur so aussieht als ob sich die nav mit runter scrollt aber eigentlich der text dahinter hoch geht?


Ja, so in etwa. Die Nav steht fest und der Inhalt scrollt.
Die Skizze ist schon sehr gut. Ich werde es mir genauer ansehen.


----------



## Sempervivum (2. März 2020)

Ich schlage vor, es so zu machen: Um die beiden Elemente, die nebeneinander angeordnet werde sollen, einen Wrapper legen und die Margins etwas weniger großzügig dimensionieren. Den Container für den Hauptinhalt habe ich auf main geändert und den für die Überschrift auf h1.

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


----------



## Sempervivum (2. März 2020)

Am CSS habe ich auch nur wenig geändert und dann sieht es aus wie auf deiner Skizze.

```
main {
            display: flex;
            flex-direction: column;
        }
        h1 {
            text-align: center;
        }
        .wrapper-horizontal {
            display: flex;
        }
        .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: 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 (2. März 2020)

oki danke ich teste es mal


----------



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


```
<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..?

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

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

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


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

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

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

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


----------



## Sempervivum (3. März 2020)

So funktioniert es bei mir:

```
<script>
        (function () {
            var parallax = document.querySelectorAll("body"),
                speed = -0.8,
                vmain = document.querySelector('main');
            vmain.onscroll = function () {
                [].slice.call(parallax).forEach(function (el, i) {
                    var elBackgrounPos = "50% " + (vmain.scrollTop * speed) + "px";
                    el.style.backgroundPosition = elBackgrounPos;
                });
            };
        })();
    </script>
```


----------



## Andrin.Spitzer (3. März 2020)

Perfekt. was würde ich nur ohne dich machen DD


----------



## Andrin.Spitzer (3. März 2020)

Kannst du mir helfen dieses script auf meine nav anzuwenden?
JsFiddle

Ich möchte damit erreichen das beim hoch scrollen die nav leiste den content sauber überdeckt.


----------



## Sempervivum (3. März 2020)

Auch das ist leicht zu machen:

```
nav {
            transition: background-color 0.5s;
        }

        nav.scrolled {
            background-color: lightblue;
        }
```


```
<script>
        (function () {
            // Variablen fuer Parallax:
            var parallax = document.querySelectorAll("body"),
                speed = -0.8;
            // Variablen für Aendern des Hintergrundes der Nav:
            var vnav = document.querySelector('nav'),
                deltaScrollPos = 10;
            // Container, der gescrollt wird:
            vmain = document.querySelector('main');
            vmain.addEventListener('scroll', () => {
                // Scrollposition ermitteln:
                var scrollPos = vmain.scrollTop;
                // Fuer Parallax:
                [].slice.call(parallax).forEach(function (el, i) {
                    var elBackgrounPos = "50% " + (scrollPos * speed) + "px";
                    el.style.backgroundPosition = elBackgrounPos;
                });
                // Fuer Aendern des Hintergrundes der Nav:
                if (scrollPos < deltaScrollPos)
                    vnav.classList.remove('scrolled');
                else
                    vnav.classList.add('scrolled');
            });
        })();
    </script>
```
(Wie Du siehst, enthält dieses Script beides, Parallax und Umfärben der Nav).


----------



## Andrin.Spitzer (9. März 2020)

Funktioniert Perfekt.

Danke Schöön


----------



## Andrin.Spitzer (9. März 2020)

Noch eine winzige Detail frage. das <div class="item-CONTACT"> so einstellen das er sich nicht der höhe des <div class="item-REGISTER" id="sign-in"> anpasst sonder seines inhaltes?


----------



## Sempervivum (9. März 2020)

Das ist einfach, Du brauchst diesem Element nur ein `align-self: center;` zu geben, dann stellt sich die Höhe entspr. dem Inhalt ein. Oder, je nachdem, wie es ausgerichtet sein soll, auch flex-start oder flex-end.


----------



## Andrin.Spitzer (9. März 2020)

Perfekt.
Danke Das Ergebnis kann man hier anschauen.

https://firmenmeisterschaft-sh.ch/#home


----------



## Sempervivum (9. März 2020)

Schön, dass es funktioniert. Aber mit deinem Zertifikat stimmt etwas nicht, ich bekomme da eine Warnung von meinem Browser.


----------



## Andrin.Spitzer (9. März 2020)

Hab die domain erst seit einer stunde daher kann das gut sein.


----------



## Andrin.Spitzer (20. März 2020)

Hay. Ich habe noch ne frage. ich möchte ähnlich wie beim Kontakt anstatt die 2 div nebeneinander mehrere Logos nebeneinander und wen die Linie voll ist einfach in der nächsten reihe weiter auflisten.
Natürlich sollten alle alle bilder automatisch die selbe grösse vorweisen.


----------



## Sempervivum (20. März 2020)

Im einfachsten Fall geht das, indem Du einfach die Bilder nacheinander in einen Container schreibst und ihnen eine feste Höhe gibst. Der Zeilenumbruch erfolgt dann automatisch:

```
<div id="container">
        <img src="images/dia0.jpg">
        <img src="images/dia1.jpg">
        <img src="images/dia2.jpg">
        <img src="images/dia3.jpg">
        <img src="images/dia4.jpg">
    </div>
```


```
#container img {
            height: 200px;
        }
```


----------



## Andrin.Spitzer (20. März 2020)

Hay. Ich möchte mit wie im bisherigen Code mit margin und float arbeiten. Mein Ziel sind 4 max. Logos pro reihe nebeneinander und dann ein Umbruch und dann wider das selbe und so weiter wen es zu wenig Logos wären um eine ganze reihe zu füllen sollte einfach die reihe zentriert werden. wen du verstehst was ich meine


----------



## Sempervivum (20. März 2020)

In dem bisherigen Code in diesem Thread finde ich nur Flex, kein Float?


----------



## Andrin.Spitzer (22. März 2020)

Sempervivum hat gesagt.:


> In dem bisherigen Code in diesem Thread finde ich nur Flex, kein Float?



Ah ja klar habs verwechselt meine natürlich flex


----------



## Andrin.Spitzer (23. März 2020)

habe es so gelöst:

```
<div class="item-transparent" id="info">
    <ul class="flex-container wrap">
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
     </ul>
</div>
```


```
.item-transparent {
            flex: 1;
            margin-top: 0em;
            margin-bottom: 2em;
            margin-left: 20%;
            margin-right: 20%;
            padding: 2em;
}

.wrap    {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
} 

.flex-item {
  margin: 10px;
  line-height: 10px;
}

.logo {
            width: 35em;
}
```


----------



## Andrin.Spitzer (23. März 2020)

aber jetzt habe ich ein problem ich möchte das die verschidenen bilder immer eine linie bilden am besten schaust du dir die website an dann siehst du was ich meine


----------



## Sempervivum (23. März 2020)

Da sehe ich noch keine Reihe von Logos. Hast Du es überhaupt hoch geladen?


----------



## Andrin.Spitzer (23. März 2020)

Jetzt solltest du sie sehen


----------



## Sempervivum (23. März 2020)

Ja, jetzt sind sie da, aber untereinander. Wolltest Du sie nicht nebeneinander haben?


----------



## Andrin.Spitzer (23. März 2020)

Sempervivum hat gesagt.:


> Ja, jetzt sind sie da, aber untereinander. Wolltest Du sie nicht nebeneinander haben?




Jaein. Wenn du etwas raus zoomst sind sie neben einander, ich möchte das sie bei großen Bildschirm nebeneinander sind und umso kleiner die Bildschirmfläche wird umso mehr sollen untereinander sein. 

Aber du siehst bestimmt das sie keine saubere linie bilden und das möchte ich ändern.


----------



## Sempervivum (23. März 2020)

OK, habe ich. Das IWC-Logo hat oben sehr viel Leerraum, deshalb ist es so nach unten verrutscht. Davon abgesehen, kannst Du die Bilder mit align-items ausrichten auf start, center oder end, allerdings musst Du dazu dem Container ein `display: flex;` geben.


----------



## Andrin.Spitzer (23. März 2020)

also so?


```
.item-transparent {
            flex: 1;
            margin-top: 0em;
            margin-bottom: 2em;
            margin-left: 20%;
            margin-right: 20%;
            padding: 2em;
            display: flex;
            align-items: center;
}
```


----------



## Sempervivum (23. März 2020)

Ja genau.


----------



## Andrin.Spitzer (23. März 2020)

das klappt schon besser.


----------



## Sempervivum (23. März 2020)

Bei dem was online ist, finde ich kein `align-items: center;` dann greift der Defaultwert mit stretch.


----------



## Andrin.Spitzer (23. März 2020)

schau jetzt nochmals der Server hat gerade etwas beim aktualisieren.


----------



## Sempervivum (23. März 2020)

Nein, immer noch nicht, ich finde es nur bei .item-transparent.
Du brauchst es jedoch bei .flex-container.


----------



## Andrin.Spitzer (23. März 2020)

achso. ja jetzt hab ichs geändert


----------



## Andrin.Spitzer (23. März 2020)

kannst du es bei dir nochmals anschauen?
bei mir ist die erste box bündig mit den anderen und rechts gibt es dann so einen ekligen Abstand. was kann ich machen?


----------



## Andrin.Spitzer (23. März 2020)

und kann man das ändern der hintergrund farbe so ändern das es sich beim scrollen an der höhe "orrientiert" wie weit der change fortgeschritten ist so das es immer an der gleichen stelle egal ob beim rauf oder runterscrollen wider beginnt zu ändern?


----------



## Sempervivum (23. März 2020)

> rechts gibt es dann so einen ekligen Abstand


Dann zentrierst Du am besten die Logos:

```
.item-transparent {
    flex: 1;
    margin-top: 0em;
    margin-bottom: 2em;
    margin-left: 20%;
    margin-right: 20%;
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}
```



> kann man das ändern der hintergrund farbe so ändern das es sich beim scrollen an der höhe "orrientiert" wie weit der change fortgeschritten ist so das es *immer an der gleichen stelle* egal ob beim rauf oder runterscrollen wider beginnt zu ändern?


Das ist schon jetzt der Fall, denn der Schwellenwert ist für Hoch- und Runterscrollen gleich:`deltaScrollPos = 10;`
Dass man den Eindruck hat, dass die Farbänderung beim Hochscrollen später beginnt liegt am Fading, dadurch verzögert sich der Farbwechsel.


----------



## Andrin.Spitzer (23. März 2020)

Perfekt danke.


----------



## Andrin.Spitzer (25. März 2020)

Hay.

Ich habe Probleme mit der Platzierung von 3 Buttons.

Alle drei sind beim Kontakt Formular,  die ersten beiden sind in der weißen boxen. Ich möchte das beide gleich breit sind und sich der breite der box anpassen sowie stets zentriert sind.

der letzte Button sollte unter der gerade erwähnten box sein und die selbe Breite haben.




Ungefair so 

Hier Könnt ihr die Aktuelle situaion sehen so wie auf den code zugreifen.
Website

PS: Was kann ich machen das meine Website als Sicher Gilted?


----------



## Sempervivum (25. März 2020)

Auch in diesem Fall ist Flex dein Freund:


----------



## Andrin.Spitzer (25. März 2020)

Hay das sieht sehr gut aus.


----------



## Andrin.Spitzer (25. März 2020)

Wie bekomme ich nun noch den Submit button schön unter die anderen.


----------



## MrMurphy (26. März 2020)

Ich schlage mal den Gong, weil du dir dein Webseiten-Leben unnötig schwer machst.

Du doktorst immer im Kleinen rum. Dadurch ist dein Quelltext insgesamt Schrott (geworden). So wie der Quelltext aktuell ist kannst du den Button nicht "schön" (was immer du darunter auch genau verstehst) unter den anderen anordnen.

Zunächst solltest du deinen Quelltext also nach den aktuellen HTML-Regeln erstellen und das CSS danach gewaltig aufräumen.

Du solltest auch deine Klassennamen (class=...) passend ändern. Klassennamen wie "flex-item" schaffen nur Verwirrung, da flex üblicherweise mehrfach auf einer Webseite vorkommt.

Zudem verwendest du keine h1-Überschrift und nur h2-Überschriften. Das deutet darauf hin, dass du Überschriften nicht nach den HTML-Regeln verwendest, sondern nach der Darstellung (Größe) im Browser. Dadurch ist dein Quelltext sachlich falsch.

Das die Schrift bei schmaleren Fenstern teilweise kleiner wird ist benutzerunfreundlich und für seriöse Webseiten ein absolutes "No-Go".

Auch das br-Element ist veraltet und sollte nicht mehr verwendet werden. Abstände werden mit CSS-erzeugt. Siehe zum Beispiel bei

Mozilla

Und so weiter.


----------



## Andrin.Spitzer (26. März 2020)

MrMurphy hat gesagt.:


> Ich schlage mal den Gong, weil du dir dein Webseiten-Leben unnötig schwer machst.
> 
> Du doktorst immer im Kleinen rum. Dadurch ist dein Quelltext insgesamt Schrott (geworden). So wie der Quelltext aktuell ist kannst du den Button nicht "schön" (was immer du darunter auch genau verstehst) unter den anderen anordnen.
> 
> ...



Hay. 

Ich wollte mich für die kritik an meinem code bedanken.
Ich werde diesen überarbeiten. 

Wen ich es richtig verstehe sind folgende Punkte extrem schlecht:

H1 falsch verwendet
Class bezeichnung unübersichtlich
A elemente statt p 
A für buttons missbraucht
Schrift sollte grösse behalten 
Br entfernen
Js und php in externe datei 

Und dan sollte das besser aussehen?.


----------



## MrMurphy (26. März 2020)

> Und dan sollte das besser aussehen?.



Ja, nach allen Verbesserungen.



> H1 falsch verwendet



Ich sehe überhaupt keine h1-Überschrift.



> A elemente statt p



Wo habe ich das geschrieben? Eher umgekehrt. a-Elemente nur wenn sie auch eine Verlinkungen enthalten.



> A für buttons missbraucht



Habe ich auch nicht geschrieben. Optisch kann ein a-Element natürlich als Button dargestellt werden.



> Schrift sollte grösse behalten



Ja. Und die Größe soll gut lesbar sein.



> Br entfernen



Ja, auf deiner Seite sind alle überflüssig.



> Js und php in externe datei



Davon habe ich auch nichts geschrieben. Das ist eher Ansichtssache.

Zudem hast du überlesen



> Und so weiter.



Das was ich aufgeschrieben habe sind nur einige Beispiele. Es gibt noch viel mehr Verbesserungsbedarf, auch um die Seite benutzerfreundlicher zu machen.


----------



## Andrin.Spitzer (26. März 2020)

MrMurphy hat gesagt.:


> Ja, nach allen Verbesserungen.
> 
> 
> 
> ...


Hay. Ich weiss einige sachen haste ned gesagt aber hab mich darüber informiert und das gefunden. Das mit weniger p mehr a hab ich falsch geschriben meine natürlich mehr p als a


----------



## Andrin.Spitzer (26. März 2020)

MrMurphy hat gesagt.:


> Ja, nach allen Verbesserungen.
> 
> 
> 
> ...


Was für punkte sollte ich noch anschauen?


----------



## Andrin.Spitzer (26. März 2020)

Hay Ich habe mal etwas daran gearbeited.

Alle punkte die ich überarbeiten muss bitte schreiben.


----------

