Float box design + script fehler suche.

wieso sind beide container nicht gleich breit wie alle anderen (h1, div content etc)
Zum Vergrößern anklicken....
Hier unterscheiden sich jetzt die Eigenschaften beider Container was margin, padding und width betrifft:
CSS: 
h1 {
    text-align: center;
    padding: 2em;
    width: 60em;
    font-family: Bahnschrift SemiBold;
    font-size: 1em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    mix-blend-mode: screen;
    margin: 0em auto;
    background-color: rgba(255,255,255,1.00);
}

.wrapper-horizontal {
    display: flex;
    width: 60em;
    margin: 4em auto;
}
 
Cool danke. Werde es heute abend anwenden.

Bin so dankbar für deine hilfe :D

Wen das alles klappt hab ichs bald fertig denke ich :)

Du hast bestimmt schon mein php für die kontakt form angeschaut. Das habe ich übernommen und ich habe mir die frage gestellt ob es möglich wäre eine sende bestätigung zu machen ohne das iwas neu geladen werden muss? Hab mal gesehen das der button zu einem häckchen wird geht das mit meinem php?
 
PHP und Kontaktformulare sind nicht so mein Schwerpunkt, was mich aber nicht daran gehindert, schon einmal mit jemand eines zu entwickeln :)
ob es möglich wäre eine sende bestätigung zu machen ohne das iwas neu geladen werden muss?
Zum Vergrößern anklicken....
Die Antwort lautet in solchen Fällen, dass Du das PHP-Skript über Ajax aufrufen musst, dann wird die Seite nicht neu geladen.
 
Sempervivum hat gesagt.:
Hier unterscheiden sich jetzt die Eigenschaften beider Container was margin, padding und width betrifft:
CSS: 
h1 {
    text-align: center;
    padding: 2em;
    width: 60em;
    font-family: Bahnschrift SemiBold;
    font-size: 1em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    mix-blend-mode: screen;
    margin: 0em auto;
    background-color: rgba(255,255,255,1.00);
}

.wrapper-horizontal {
    display: flex;
    width: 60em;
    margin: 4em auto;
}
Zum Vergrößern anklicken....

Verstehe ich nicht. beide haben die selbe breite und werden gleich zentriert?
 
Sempervivum hat gesagt.:
Ich habe da mal eine Demo gemacht mit Umschaltung zwischen horizontaler Darstellung und der mit Burger und ein paar Erklärungen hinzu gefügt. Versuche, das auf deine Seite zu übernehmen.
Code: 
<!DOCTYPE html>
<html>
<head>
    <title>Demo Hamburger</title>
    <meta charset="utf-8">
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        /* Gestaltung des Menues selber */
        nav {
            transition: background-color 0.6s;
            z-index: 99999;
            border-bottom: 1px;
            background-color: grey;
        }
        nav.scrolled {
            background-color: black;
        }
        ul {
            margin: 0px auto;
            padding: 0;
            list-style: none;
            display: flex;
            justify-content: center;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            font-size: 1.5em;
        }
        li {
            position: relative;
            padding: 15px 0;
            display: flex;
            align-items: center;
        }
        a {
            color: white;
            text-decoration: none;
            letter-spacing: 0.40em;
            display: inline-block;
            padding: 20px 20px;
        }
        a:after {
            bottom: 0;
            content: "";
            display: block;
            height: 2px;
            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;
        }
        /* Gestaltung des Hamburger-Symbols */
        label.hamburger {
            display: block;
            position: relative;
            background: #555;
            width: 75px;
            height: 50px;
            margin-left: 0;
            border-radius: 4px;
            transition: border-radius .5s;
            z-index: 500;
            /* Hamburger-Symbol unsichtbar machen */
            display: none;
        }
        input.hamburger {
            display: none;
        }
        .line {
            position: absolute;
            left: 10px;
            height: 4px;
            width: 55px;
            background: #fff;
            border-radius: 2px;
            display: block;
            transition: 0.5s;
            transform-origin: center;
        }
        .line:nth-child(1) {
            top: 12px;
        }
        .line:nth-child(2) {
            top: 24px;
        }
        .line:nth-child(3) {
            top: 36px;
        }
        input.hamburger:checked~label.hamburger .line:nth-child(1) {
            transform: translateY(12px) rotate(-45deg);
        }
        input.hamburger:checked+label.hamburger .line:nth-child(2) {
            opacity: 0;
        }
        input.hamburger:checked+label.hamburger .line:nth-child(3) {
            transform: translateY(-12px) rotate(45deg);
        }
        /* Umschalten bei schmalem Viewport */
        @media screen and (max-width: 800px) {
            /* Hamburger sichtbar machen */
            label.hamburger {
                display: inline-block;
            }
            /* Navigation unsichtbar machen */
            nav ul {
                display: none;
                flex-direction: column;
                align-items: center;
            }
            /* Navigation sichtbar machen, wenn das Hamburger-Symbol gecheckt ist */
            input.hamburger:checked~ul {
                display: flex;
            }
        }
    </style>
</head>
<body>
    <nav>
        <!-- HTML fuer das Hamburger-Symbol -->
        <input type="checkbox" class="hamburger">
        <label for="hamburger" class="hamburger">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </label>
        <!-- HTML fuer die Navigation -->
        <ul>
            <li>
                <a href="#home">Home</a>
            </li>
            <li>
                <a href="#team">Teilnehmer</a>
            </li>
            <li>
                <a href="#register">Anmelden</a>
            </li>
            <li>
                <a href="#sponsoren">Partner</a>
            </li>
        </ul>
    </nav>
</body>
</html>
Zum Vergrößern anklicken....

Funktioniert iwie ned
 
Verstehe ich nicht. beide haben die selbe breite und werden gleich zentriert?
Zum Vergrößern anklicken....
Sie haben die selbe Breite aber der eine hat ein padding von 2em und der andere nicht. width gibt die innere Breite ohne padding an. Der Bereich mit padding nimmt aber die Hintergrundfarbe ebenso wie der innere Bereich an. Daher ist das Element vom sichtbaren Eindruck her größer.
 
Sempervivum hat gesagt.:
Sie haben die selbe Breite aber der eine hat ein padding von 2em und der andere nicht. width gibt die innere Breite ohne padding an. Der Bereich mit padding nimmt aber die Hintergrundfarbe ebenso wie der innere Bereich an. Daher ist das Element vom sichtbaren Eindruck her größer.
Zum Vergrößern anklicken....

Hay aber das würde ja heissen wen ich bei dem anderen element ebenfalls psdding mit 2 em hinzufüge müsste es gleich sein abr das ist es nicht
 
Ich habe das mal mit dem Container mit dem Kontaktformular getestet, der ja schmaler ist als die Überschriften. Füge ich das padding hinzu, ist erst Mal nichts zu erkennen. Aber der HTML-Inspektor zeigt das padding an. Mache ich jedoch auch den Hintergrund weiß, sieht man auch, dass die Container gleich breit sind.
Code: 
.wrapper-horizontal {
    display: flex;
    width: 60em;
    margin: 4em auto;
    padding: 2em;
    background-color: white;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück