Beiträge von ego

ego

Zitat von Gastl

Groß-/Kleinschreibung ist der häufigste Fehler. Zweithäufigst wohl, Datei nicht hochgeladen.

habe alles richtig geschrieben im offline browser zeigt es an aber sobald ich es hochlade geht nix..

ego

http://haarkunst.bplaced.net/

die png Datei kann man komischerweise auch nicht sehen. Weiss einer wieso?

ego

So sieht die Website mitlerweile aus:

HTML-Code:

HTML

<!DOCTYPE html>
<html>


<head>
    <title>H.b.F.</title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.icon').click(function(){
                $('.icon').toggleClass('active');
                $('#menu').slideToggle();
            })
        })
    </script>
</head>


<body>
    <div class="icon">
        <div class="hamburger">
        </div>
    <div id="navigation">

        <div class="wrapper">

            <div id="logo">
                <p>H.b.F.</p>
            </div>

            <p id="menu">
                <a href="index.html">HOME</a>
                <a href="dienstleistungen.html">DIENSTLEISTUNGEN</a>
                <a href="gallery.html">GALLERY</a>
                <a href="https://connect.shore.com/widget/david-schramm-hair-make-up-art">ONLINE TERMIN/PREISE</a></li>
                <a href="uber.html">ÜBER MICH</a>
            </p>
        </div>
    </div>    


    <div id="banner">
        <h1><img src="bilder/Logo2.png" width=800 height=350></h1>
    </div>

    <div id="content">

        <div class="wrapper">

        <p> 
            Perfekt geschnitten bis zu den Haarspitzen.
            Hier bekommen Sie die beste Behandlung für Ihr Haar.
            Egal ob eine neue Frisur oder eine neue
            Haarfarbe, bei mir werden Sie sehr gut beraten.
            Schauen Sie sich gerne meine Arbeit unter "Gallery" an. 

            Gerne überzeugen Sie sich persönlich und 
            machen gleich einen Termin.
        </p>

        <div>

    </div>
</body>


</html>

Alles anzeigen

HTML

<!DOCTYPE html>
<html>


<head>
    <title>H.b.F.</title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.icon').click(function(){
                $('.icon').toggleClass('active');
                $('#menu').slideToggle();
            })
        })
    </script>
</head>


<body>
    <div class="icon">
        <div class="hamburger">
        </div>
    <div id="navigation">

        <div class="wrapper">

            <div id="logo">
                <p>H.b.F.</p>
            </div>

            <p id="menu">
                <a href="index.html">HOME</a>
                <a href="dienstleistungen.html">DIENSTLEISTUNGEN</a>
                <a href="gallery.html">GALLERY</a>
                <a href="https://connect.shore.com/widget/david-schramm-hair-make-up-art">ONLINE TERMIN/PREISE</a></li>
                <a href="uber.html">ÜBER MICH</a>
            </p>
        </div>
    </div>    


    <div id="banner">
        <h1><img src="bilder/Logo2.png" width=800 height=350></h1>
    </div>

    <div id="content">

        <div class="wrapper">

        <p> 
            Perfekt geschnitten bis zu den Haarspitzen.
            Hier bekommen Sie die beste Behandlung für Ihr Haar.
            Egal ob eine neue Frisur oder eine neue
            Haarfarbe, bei mir werden Sie sehr gut beraten.
            Schauen Sie sich gerne meine Arbeit unter "Gallery" an. 

            Gerne überzeugen Sie sich persönlich und 
            machen gleich einen Termin.
        </p>

        <div>

    </div>
</body>


</html>

Alles anzeigen

Jetzt möchte ich das Burger Menu rechts haben und auf dem oberen Rahmen wie die verlinkungen.
Wie müsste dies jetzt bei CSS aussehen bzw. müsste ich noch was bei html ändern?

ego

Zitat von ego

Danke dir.. muss ich den Code irgendwo einsetzen oder ersetzen?
Heißt das jetzt das ich jQuery umschreiben muss?

ok habs jetzt hinbekommen, danke nochmals.
Das 2. Problem ist auf der Seite ist alle in der Mitte eingeordnet seit dem ich das Burger Menu eingebaut habe. Sieht hier jemand den Fehler bei CSS irgendwo?

ego

Zitat von Cipha
Setze #menu auf display:none;
und blende es mittels jQuery wieder ein
Code
$('.deinHamburgerIcon').click(function(){
                $('#menu').slideToggle();
            })

Danke dir.. muss ich den Code irgendwo einsetzen oder ersetzen?
Heißt das jetzt das ich jQuery umschreiben muss?

ego

Zitat von basti1012

erstens reicht es wenn man jquery einmal einbindet. Dann has du ein <div> was eigentlich geschlossen sein müßte.
Dann aber glaube ich das du was verwechselst. Dein Code macht ja nur den Icon von hamburger zum X . Deine Navigation bleibt so wie sie ist. Du wolltest bestimmt das sie beim klick auf den Hamburger veschwindet und wieder kommt oder ?

Hallo, danke erstmal für die Antwort, ja ich wollte das die Nav. beim klick aus und wieder einfährt..
wie mach ich das am besten? Wo müsste ich was ändern?

ego

Hallo Leute kann mir einer bitte helfen?
Habe probiert ein Burger Menü zu erstellen doch irgendwas passt da nicht oder fehlt mir noch.

HTML

<!DOCTYPE html>
<html>


<head>
    <title>H.b.F.</title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.icon').click(function(){
                $('.icon').toggleClass('active');
            })
        })
    </script>
</head>


<body>
    <div class="icon">
        <div class="hamburger"></div>
    <div id="navigation">

        <div class="wrapper">

            <div id="logo">
                <p>H.b.F.</p>
            </div>

        <ul id="menu">
            <li><a href="index.html">HOME</a></li>
            <li><a href="dienstleistungen.html">DIENSTLEISTUNGEN</a></li>
            <li><a href="gallery.html">GALLERY</a></li>
            <li><a href="https://connect.shore.com/widget/david-schramm-hair-make-up-art">ONLINE TERMIN/PREISE</a></li>
            <li><a href="uber.html">ÜBER MICH</a></li>
        </ul>
        </div>
    </div>    


    <div id="banner">
        <h1><img src="bilder/Logo2.png" width=800 height=350></h1>
    </div>

    <div id="content">

        <div class="wrapper">

        <p> 
            Perfekt geschnitten bis zu den Haarspitzen.
            Hier bekommen Sie die beste Behandlung für Ihr Haar.
            Egal ob eine neue Frisur oder eine neue
            Haarfarbe, bei mir werden Sie sehr gut beraten.
            Schauen Sie sich gerne meine Arbeit unter "Gallery" an. 

            Gerne überzeugen Sie sich persönlich und 
            machen gleich einen Termin.
        </p>

        <div>

    </div>
</body>


</html>

Alles anzeigen

Code

* {
    margin: 0;
    padding: 0;

    font-family: Levenim MT;
}


.wrapper {
    width: 960px;
    max-width: 90%;

    margin: 0 auto;
}


#navigation {
    position: fixed;
    top: 0;
    z-index: 10;

    width: 100%;
    height: 100px;

    background-color: rgba(250, 250, 250, 0.8)
}


#logo {
    width: 60px;
    height: 60px;

    float: left;

    margin: 20px;
}


#logo p {
    font-family: Curlz MT;
    font-size: 3em;
    line-height: 1,5;

    color: #274e71;
}


#menu {
    float: right;
    margin-top: 44px;
    margin-right: 30px;
}


#menu a {
    padding-right: 30px;
    padding-top: 35px;

    text-decoration: none;
    color: #274e71;
    font-weight: 700;
}


#menu a:hover {
    border-top: solid white 5px;
}


#banner {
    width: 100%;
    height: 700px;
    z-index: 0;

    background: url(bilder/Hintergrund2.jpg);
    background-size: cover;
}


#banner h1 {
    padding-top: 250px;
    text-align: center;
    color: #274e71;
    font-size: 6em;
    font-family: Curlz MT;
}


#content {
    margin-top: 50px;
}


.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: #000;
}
.hamburger {
    width: 50px;
    height: 6px;
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    transition: .5s;
}
.hamburger:before,
.hamburger:after
{
    content: '';
    position: absolute;
    width: 50px;
    height: 6px;
    background: #000000;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    transition: .5s;
}
.hamburger:before {
    top: -16px;    
}
.hamburger:after {
    top: 16px;    
}
.icon.active .hamburger {
    background: rgba(0,0,0,0);
    box-shadow: 0 2px 5px rgba(0,0,0,0);
}
.icon.active .hamburger:before {
    top: 0;
    transform: rotate(45deg);
}

.icon.active .hamburger:after {
    top: 0;
    transform: rotate(135deg);
}

Alles anzeigen

Beiträge von ego

Hilfe bei Burger-Menu

Hilfe bei Burger-Menu

Hilfe bei Burger-Menu

Hilfe bei Burger-Menu

Hilfe bei Burger-Menu

Hilfe bei Burger-Menu

Hilfe bei Burger-Menu