Float box design + script fehler suche.


Andrin.Spitzer

Erfahrenes Mitglied
Hay könntest du mir ein beispiel machen wie ich den text durch das icon ersetzt bekomme alles was ich versuche funktioniert nicht.

Habe versucht mit dme zu arbeiten:Media Queris
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
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>
 
Zuletzt bearbeitet:

Andrin.Spitzer

Erfahrenes Mitglied
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>
Hay. das sieht mal ned schlecht aus. wen ich das richtig sehe ist das aber noch ohne funktion zum anzeigen der links?
 

Sempervivum

Erfahrenes Mitglied
Genau, das ist die nackte Navitation und weil es auf dieser Demoseite keine Inhalte gibt, passiert nichts, wenn man auf einen Link klickt. Du musst das Ganze in deine Seite übernehmen.
 

Andrin.Spitzer

Erfahrenes Mitglied
-Hab bereits in meine seite eingebaut. ich sehe bei kleinem Fenster das Menu das ist schon gut jedoch hat es noch keine Funktion.

Ich habe jetzt verstanden warum du nicht viel von meiner Idee des Kontaktformular hälst klappt einfach nicht sauber habe mich daher kreative bemüht und es anders gestaltet. jedoch stellt sich mir nun dort die frage
-wieso der senden Button nicht gleich breit wie der Rest ist trotz selben Einstellungen
und
-wieso sind beide container nicht gleich breit wie alle anderen (h1, div content etc)
 

Sempervivum

Erfahrenes Mitglied
Mein Fehler, da hatte ich nachträglich ein wenig verschönert und einen Fehler eingebaut. Das Label braucht die ID "hamburger":
Code:
        <!-- HTML fuer das Hamburger-Symbol -->
        <input type="checkbox" class="hamburger">
        <label for="hamburger" class="hamburger" id="hamburger">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </label>
 

Sempervivum

Erfahrenes Mitglied
Ich habe jetzt verstanden warum du nicht viel von meiner Idee des Kontaktformular hälst klappt einfach nicht sauber habe mich daher kreative bemüht und es anders gestaltet.
So gefällt es mir auch wesentlich besser.
wieso der senden Button nicht gleich breit wie der Rest ist trotz selben Einstellungen
Deine Einstellungen sind zwar gleich aber in den Einstellungen des Useragent bzw. den Defaultwerten des Browsers gibt es einen Unterschied: Dort hat ein Input vom Typ "submit" die Eigenschaft box-sizing: border-box;. Füge ich das auch bei den anderen Inputs und der Textarea hinzu, sind sie gleich breit.
 

Sempervivum

Erfahrenes Mitglied
wieso sind beide container nicht gleich breit wie alle anderen (h1, div content etc)
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;
}
 

Andrin.Spitzer

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

Sempervivum

Erfahrenes Mitglied
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?
Die Antwort lautet in solchen Fällen, dass Du das PHP-Skript über Ajax aufrufen musst, dann wird die Seite nicht neu geladen.
 

Andrin.Spitzer

Erfahrenes Mitglied
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;
}
Verstehe ich nicht. beide haben die selbe breite und werden gleich zentriert?
 

Andrin.Spitzer

Erfahrenes Mitglied
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>
Funktioniert iwie ned
 

Sempervivum

Erfahrenes Mitglied
Verstehe ich nicht. beide haben die selbe breite und werden gleich zentriert?
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.
 

Andrin.Spitzer

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

Sempervivum

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