Float box design + script fehler suche.

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

Hay. das sieht mal ned schlecht aus. wen ich das richtig sehe ist das aber noch ohne funktion zum anzeigen der links?
 
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.
 
-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)
 
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>
 
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.
Zum Vergrößern anklicken....
So gefällt es mir auch wesentlich besser.
wieso der senden Button nicht gleich breit wie der Rest ist trotz selben Einstellungen
Zum Vergrößern anklicken....
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück