Beiträge von Andrea

  • Toggle Hamburger Menü - Menüauswahl "springt"

    das soll nicht soweit links stehen, aber das hab ich auch noch nicht angepaßt - soll mittig sein bei der Handyansicht.


    ich hatte diese Seite mit Adobe Muse gebaut und dabei festgestellt, dass man da sehr schnell an die Grenzen kommt. Habs dann hinbekommen aber nun lese ich mich so durch das Internet durch und probiere eben diese Seite nochmal "sauber" nachzubauen und mir diese Dinge anzueignen- daher besteht erstmal keine Eile außer mein Wissensdurst ;)


    Ja hey, vielen Dank für Deine Zeit und Mühe!!! Das wäre super!! :)

  • Toggle Hamburger Menü - Menüauswahl "springt"

    na so ganz verkehrt siehst du das nicht ;) ich bin noch am (mich) ausprobieren und daher ist da sicher noch einiges im argen - gerade weil du die festen Größen ansprichst - und auch bei Schrift tüftel ich noch herum, dass diese sich mit dem Browserfenster mitskaliert (wenn das überhaupt sinnvoll ist)


    Die Desktopversion (1920) soll eine "offene" Navi-Leiste haben mit allen Menüpunkten sichtbar und dann ab ca 1280 oder kleiner px in ein HamburgerMenü umspringen.


    im Anhang die Bilder.

    und screenshots wie es in der Desktopversion und <1280px aussehen soll - also mit Hamburger. Die Leiste soll einreihig sein und kleiner werden - aber das ist noch nicht umgesetzt...


    mit dem scrollbalken meinte ich das beim Öffnen des HamburgerIcons (nav-menue) die Ansicht so springt, dass das Untermenü (Steuerung ) am oberen Bildrand ist und ich erst wieder scrollen muß um das Hauptbild und die Logos sehen kann.

    Ich denke das hat was mit diesem "Befehl" zu tun, weiß aber nicht wie ich das elegant hinkrieg:


    #nav-menue:target #Steuerung {

    display: block;

    }

    #nav-menue:target .menue-button-beschr-open {

    display: none;

    }

  • Toggle Hamburger Menü - Menüauswahl "springt"

    Hallo Bast1012, danke für den Hinweis mit äöü.

    Ich habe es letztendlich auch mit dem Tutorial von der oben genannten Website probiert und einfach den Code kopiert und über dem Menü ein Bild eingefügt. Und es passiert das gleiche.


    Aber kannst du anhand der Screenshots sehen was ich meine?

  • Toggle Hamburger Menü - Menüauswahl "springt"

    Hallo,

    sorry, im Eifer des Gefechts das wichtigste vergessen...


    Also unten HTML und CSS und Screenshots wie es aussieht und wie es aussehen soll (Nr3)...

    Heißt bei Click auf Hamburger Icon @media only screen and max-width:1280px springt das Menü nach oben (Nr 2) und meine Logos und das "Hauptbild" verschwinden hinter dem Scrollbalken....


    Danke


    HTML:


    <!DOCTYPE html>

    <html lang="en">


    <head>

    <title>Headline</title>

    <link rel="stylesheet" href="css/breitentest_erweitert.css">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet">

    </head>


    <body>


    <header>

    <div class="Logos">

    <img id="AKA" src="images/Logo1.png">

    <img id="AI" src="images/Logo2.png">

    </div>



    <div class="Hauptbild">

    <img id="Bild" src="images/001.png" class="responsive">

    <h1>Headline</h1>

    </div>


    <div id="nav-menue">

    <nav id="Steuerung">

    <ul>

    <li class="grün"><a href="01.html">01</a>

    <li class="hellblau"><a href="02.html">02</a></li>

    <li class="türkis"><a href="03.html">03</a></li>

    <li class="blau"><a href="04.html">04</a></li>

    <li class="lila"><a href="05.html">05</a></li>

    <li class="pink"><a href="06.html">06</a></li>

    <li class="rot"><a href="07.html">07</a></li>

    <li class="orange"><a href="08.html">08</a></li>

    <li class="gelb"><a href="09.html">09</a></li>

    </ul>

    </nav>


    <!-- Hamburger MenüIcon -->

    <a class="menue-button menue-button-beschr-close"

    href="#nav-menue-zu">

    <img src="images/HamburgerIcon.png"></a>


    <a class="menue-button menue-button-beschr-open"

    href="#nav-menue">

    <img src="images/HamburgerIcon.png"></a>

    </div>


    </header>




    <section>


    <div>

    <h2>Test</h2>

    <p>

    fff<br>

    fff<br>

    zzz<br>

    zzzz<br>

    eeeee<br>

    fffff

    </p>

    </div>



    </section>

    </body>

    </html>


    und CSS:



    /* DesktopVersion - allgemeines */

    html {

    background-color: black;

    margin: 0;

    padding: 0;

    font-family: "Maven Pro" !important;

    }


    body {

    width: 100%;

    min-width: 900px;

    max-width: 1920px;

    margin: 0 auto 0 auto;

    }


    .responsive {

    width: 100%;

    height: auto;

    }


    /* Position der Logos */

    .Logos {

    padding: 15px;

    }


    #AKA {

    width: 23%;

    margin-left: 10px;

    }


    #AI {

    width: 26%;

    margin-right: 10px;

    float: right;

    }



    /* Hauptmotiv mit 'Headline'-Schriftzug */


    #Bild {

    display: block;

    }


    h1 {

    color: #242424;

    position: relative;

    bottom: 80px;

    font-weight: lighter;

    float: right;

    font-size: 2.4em;

    margin-right: 22px;

    }



    /* Navigationsleiste */

    nav ul li {

    margin-left: 60px;

    }


    body nav ul li a {

    text-align: left;

    }


    /* Buttonstatus normal */

    nav ul li {

    opacity: 0.5;

    }


    /* Buttonstatus Maus drüber */

    nav ul li:hover {

    opacity: 1;

    }


    /* Buttonstatus Maus click */

    nav ul li:active {

    opacity: 1;

    }


    li {

    list-style: none;

    float: left;

    }


    /* Button Schrift Style */

    a {

    display: block;

    width: 65px;

    padding-left: 0.5em;

    padding-top: 1em;

    text-decoration: none;

    color: white;

    font-size: 1em;

    height: 3em;

    }


    /* farbige Kästchen der einzelnen Buttons (DESKTOP) */

    .grün {

    border-left: #C1DE1D 45px solid;

    }

    .hellblau {

    border-left: #00FFC6 45px solid;

    }

    .türkis {

    border-left: #00C3FF 45px solid;

    }

    .blau {

    border-left: #0000FF 45px solid;

    }

    .lila {

    border-left: #8903FF 45px solid;

    }

    .pink {

    border-left: #FF007E 45px solid;

    }

    .rot {

    border-left: #FF0000 45px solid;

    }

    .orange {

    border-left: #F79300 45px solid;

    }

    .gelb {

    border-left: #FFFF00 45px solid;

    }




    /* HamburgerMenüIcon deaktiviert in der Desktopversion */

    .menue-button {

    display: none;

    }



    /* Text und grafisches Element */

    div {

    padding-bottom: 5em;

    }


    section {

    display: block;

    width: 640px;

    float: left;

    margin-top: 100px;

    margin-left: 33%;

    color: white;

    }


    p {

    border-left: #C1DE1D 4px solid;

    border-right: white 1px solid;

    padding-left: 2em;

    }







    /* CSS erweitern um MENÜ-Button und entsprechende Steuerung */

    /* Menü-Button oben rechts einblenden bei kleiner als 1280px */

    @media only screen and (max-width:1280px) {



    /* Größe und Position des Hamburger Icons */

    .menue-button img {

    width: 100%;

    }


    .menue-button {

    display: block;

    position: absolute;

    left: 10px;

    top: 300px;

    padding: 0.5em;

    color: white;

    cursor: pointer;

    text-decoration: none;

    }





    /* einzelne Menü-Buttons */

    #Steuerung {

    float: left;

    width: 350px;

    display: none;

    margin-left: 200px;

    height: 650px;

    }

    #Steuerung li {

    margin: 0.5em;

    }


    #Steuerung a {

    text-align: center;

    font-size: 1.2em;

    width: 250px;

    height: 35px;

    padding-top: 0.5em;

    }



    /* Buttons mit farbigem Rand */

    .grün {

    border: #C1DE1D 3px solid;

    }

    .hellblau {

    border: #00FFC6 3px solid;

    }

    .türkis {

    border: #00C3FF 3px solid;

    }

    .blau {

    border: #0000FF 3px solid;

    }

    .lila {

    border: #8903FF 3px solid;

    }

    .pink {

    border: #FF007E 3px solid;

    }

    .rot {

    border: #FF0000 3px solid;

    }

    .orange {

    border: #F79300 3px solid;

    }

    .gelb {

    border: #FFFF00 3px solid;

    }



    /* Button Status */

    .menue-button {

    opacity: 0.5;

    }

    .menue-button:hover {

    opacity: 1;

    }



    /* die Steuerung einblenden nur auf mobile Devices */

    #nav-menue:target #Steuerung {

    display: block;

    }

    /* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */

    #nav-menue:target .menue-button-beschr-open {

    display: none;

    }


    }

  • Toggle Hamburger Menü - Menüauswahl "springt"

    Hallo,


    ich habe diese Anleitung befolgt um eine Navigationssleiste zu erstellen die bei kleineren Displays zum HamburgerIcon wird:


    https://www.html-seminar.de/to…omatische-umschaltung.htm


    mit dem Unterschied dass meine Navigationsleiste nicht am oberen Rand sitzt, sondern erst ein Bild und Logos kommen.


    Soweit klappt alles. Sobald ich das "HamburgerIcon" anklicke öffnet sich - wie gewollt die Menüauswahl, aber was mich stört ist, dass springt auch so um dass diese Menüauswahl als erstes ins Browserfenster rückt.

    Wie kann ich diesen "Hüpfer" umgehen? So dass sich die Menüleiste "nur" öffnet und nicht an den obersten Bildrand hüpft.


    Danke

    LG

    Andrea



    hmtl:

    #nav-menue:target #Steuerung {

    display: block;

    }

    #nav-menue:target .menue-button-beschr-open {

    display: none;

    }

  • Sinnvolle Vorgehensweise für eine Navigationsleiste im Responsive Design

    Hallo,

    ich überlege gerade ob ich mit meiner Umsetzung der Navigationsleiste auf dem richtigen Weg bin - nicht nur technisch sondern auch logisch/Design oder ob eine andere Herangehensweise sinnvoller ist:


    Bei hoher Auflösung soll die Navigationsleiste aus 9 horizontalen Buttons - die alle gleich breit sein sollen und mit dem Kleinerziehen des Browser mitschrumpfen.

    Bis zu einer minimalen Auflösung (für Handy/Tablet) und dann soll die Navi-Leiste zu einem Menü-Icon werden mit vertikaler Anordnung - siehe Screenshots.


    Die Buttons sollen alle gleich groß sein - trotz unterschiedlicher Wortlängen, das habe ich über die Breite angegeben - aber wie krieg ich es hin, dass sie mitschrumpfen und dabei zueinander gleichgroß bleiben?


    Aber vielleicht bin ich ja auch mit der Herangehensweise auf dem Holzweg... Hat jemand die Erleuchtung für mich bitte ;)

    Danke

    LG

    Andrea



    HTML:


    CSS:

  • Gleichgroße Buttons mit unterschiedlicher Wortlänge erstellen

    Hallo zusammen,


    ich möchte gerne mehrere gleichgroße Buttons erzeugen aber mit unterschiedlicher Wortlänge.

    Bisher richtet sich aber die Buttongröße immer nach der Textlänge. Ich habe schon versucht den Abstand des Wortes zur Box zu vergrößern (also padding zu a), aber dass ist so pi x Daumen. Kann ich dem inline-block eine feste Größe geben? Oder wie würde ich das lösen?

    Danke für Tipps :)

    LG

    Andrea




    Rahmenbedingungen

    zusätzliche Techniken: HTML und CSS

    Browser & Betriebssystem: Windows 10, Chrome

    Editor: Notepad++



    Code:


    HTML


    <div class="quer">

    <a href class =border1>Link 8</a>

    <a href class =border2>Link 9</a>

    <a href class =border3>Link 1000000</a>

    </div>


    Css

    .quer {

    background-color: black;

    display: inline-block;


    }

    .border1 {

    border: 5px solid red;

    }

    .border2 {

    border: 5px solid orange;

    }

    .border3 {

    border: 5px solid blue;

    }