Margin Padding Boxen (Nav + Content)

Andrin.Spitzer

Erfahrenes Mitglied
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.
HTML:
            <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
CSS:
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"




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

CSS:
.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

Erfahrenes Mitglied
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/
CSS:
        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

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

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

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

Erfahrenes Mitglied
Unbenannt.png
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

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

Erfahrenes Mitglied
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.
HTML:
    <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

Erfahrenes Mitglied
Am CSS habe ich auch nur wenig geändert und dann sieht es aus wie auf deiner Skizze.
CSS:
        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;
        }