Beiträge von Sempervivum

  • mit href auf eine ID springen

    Zitat

    <main> soll über dem Image ngezeigt werden.

    Das verstehe ich so, dass das <main> das Image verdecken soll, wenn man herunter scrollt?

    Ich verstehe das Ganze nur ungefähr, aber nicht vollständig. Hast Du es vielleicht online, dass man es sich ansehen kann?

  • Menüführung bei unterschiedlichen Bildschirmbreiten

    Kann man schon machen, ist aber offenbar nicht das, was einsiedler möchte.

    Den Schiebeeffekt kannst Du erreichen, indem Du das ul mit der Nav nicht einfach ein- und ausschaltest mit display:none/block sondern seine Position in horizontaler Richtung, z. B. mit margin-left veränderst. (Ich empfehle dieses und nicht position-left weil ich erwarte, dass sich bei margin der umgebende Container, das nav, mit ausdehnt.)

    Damit das Ganze dann auch animiert abläuft und nicht ruckartig, musst Du transition verwenden:

    https://wiki.selfhtml.org/wiki/CSS/Eigen…tion/transition

  • Menüführung bei unterschiedlichen Bildschirmbreiten

    Wenn ich zusätzlich bei dem ul die Breite auf 17em setze, stimmt schon mal die Breite. Dann hat man noch einen unerwünschten Umbruch drin. Man müsste die Berechnung der Breite für den Hauptcontainer anpassen, aber ich empfehle stattdessen, den Header dort heraus zu nehmen und mit flex-direction zwischen horizontaler und vertikaler Anordnung umzuschalten. Ich liebe diese Fummelei mit calc nicht und vermeide sie, wenn es irgend geht. Meistens kann man das Layout so gestalten, dass die richtigen Breiten automatisch durch Flex eingestellt werden.

  • Menüführung bei unterschiedlichen Bildschirmbreiten

    Verstehe. Ich wollte zunächst vorschlagen, mit CSS abhängig von der Eigenschaft aria-expanded das flex-basis zu ändern, aber leider ist ja das nav-Element ein Elternelement und mit CSS nicht zugänglich.

    Mögliche Lösungen:

    • Dem ul eine Breite von 17em geben und dem nav ein flex-basis:auto, dann sollte das nav die Breite des ul übernehmen.
    • oder mit dem Javascript (dort bin ich nicht eingestiegen) auch dem nav im aufgeklappten Zustand eine geeignete Klasse geben, so dass Du abhängig davon das flex-basis umschalten kannst.

    Ersteres habe ich in den Entwicklerwerkzeugen versucht und funktioniert.

  • Menüführung bei unterschiedlichen Bildschirmbreiten

    Da sehe ich in den Entwicklerwerkzeugen keine flex-basis von 17em sondern von 1em:

    Code
    @media only screen and (max-width: 1499px) and (min-width: 851px)
#main-nav {
    /* margin-top: 2rem; */
    margin-bottom: auto;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 1em;
}

    (sturm-main-style.css Zeile 360)

    Ändere ich es auf 17em, wird es wie von dir gewünscht dargestellt. Schreibfehler?

  • Footer mit dem Inhalt der Seite nach unten schieben

    Versuche dieses CSS:

    Code
            body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

    und dieses HTML:

    und prüfe, ob es dann das ist, was Du dir vorstellst.

    (contenteditable nur, um das Verhalten leicht testen zu können.)

  • Zeilenumbruch via media queries?

    Elemente je nach Fenstergröße untereinander oder nebeneinander anzuordnen, ist eine gängige Aufgabe bei einem responsiven Layout, wie z. B. hier:
    Flexbox in der Flexbox

    Unkonventionell ist lediglich der Ansatz des TO, dies über Zeilenumbrüche zu realisieren. Ebenfalls gebräuchlich ist dem gegenüber die Lösung, die ich in #5 beschrieben haben.

    BTW: Wenn man es denn mit Zeilenumbrüchen regeln will, kann man auch direkt das br-Element ein- und ausschalten:

  • mehrere Kästen und submit-Buttons

    Ist mir auch schon aufgefallen, dass die Forenrichtlinien in der Versenkung verschwunden sind:

    Zitat
    1. Hilfe zur Selbsthilfe!
      • Der Hilfesuchende erhält zu dem Thema, bei dem er Hilfe braucht, Anregungen, nützliche Links und Erklärungen von den Helfern
    2. Es wird ungern gesehen und ist nicht zielführend wenn zu vielen Themen fertige Lösungen gepostet werden. Daher bitte unterlassen. Sonst behalten wir uns vor den User zu verwarnen.

    Aber: Ohne fertige Lösungen kein Applaus und kein Aufmerksamkeit.

  • Flexbox in der Flexbox

    Zitat

    Diese Textbox soll bei "@media only screen and (max-width: 48em) " row ausgerichtet sein, also die Container sollen sich unter einander anordnen.

    Anscheinend gibt es da ein Missverständnis mit den Begriffen:

    row = nebeneinander

    column = untereinander

    Außerdem finde ich in der Mediaquery keine Anweisung für diese Textbox?

  • JSON Ajax stringify

    Wenn Du mit JSON arbeitest, kannst Du nichts zusätzlich ausgeben, weil das die Syntax zerstören würde. Du musst die Antwort auswerten und ausgeben, z. B. so:

    Code
                success: function(data) {
                // Die Antwort vom Server wurde bereits geparsed und steht
                // jetzt nicht als String sondern als JS-Struktur zur Verfügung
                console.log(data);
                var ort = data.place;
                var bundesland = data.state;
                // jetzt stehen Ort und Bundesland in den Variablen zur Verfügung
                // und können weiter verarbeitet und z. B. ausgegeben werden:
                $('#output-data').html("Ort: " + ort + " Bundesland: " + bundesland);

    Alternativ könntest Du das Ganze auch serverseitig machen: Im PHP-Skript das JSON parsen und das gewünschte HTML generieren. Dann müsstest Du aber dataType:'json' im Ajax-Aufruf weg lassen bzw. durch 'text' ersetzen.