Beiträge von Sempervivum

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:

    <style>
        @media (min-width: 600px) {
            .testumbruch2 .dynbr {
                display: none;
            }
        }
    </style>
    <p class="testumbruch2">
        Lorem: ipsum<br class="dynbr">
        dolor sit amet: consetetur sadipscing elitr<br class="dynbr">
        sed diam: nonumyeirmod
    </p>

Versuche, die drei Bestandteile des Absatzes in, z. B. span-Tags zu legen. Dann solltest Du mit Flexlayout und Mediaqueries die Anordnung umschalten können.

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.

Die Lösung findest Du hier:
https://stackoverflow.com/questions/9334…perly-in-chrome

Das SVG-Bild ist eine Textdatei. Du kannst sie editieren und preserveAspectRatio="none" im svg-Tag hinzufügen.

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?

Damit bin ich jetzt nicht vertraut, aber IMO brauchst Du beim Senden nichts zu verändern, wenn Du es serverseitig machen willst. Nur das PHP-Skript ändern, d. h. parsen und HTML generieren.

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:

            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.

Mit dem Code aus deinem ersten Posting warst Du schon auf dem richtigen Weg. Wenn Du dataType:'json' angibst, veranlasst jQuery bereits das Parsen und stellt die Daten in einer Javascript-Struktur zur Verfügung. Du kannst dich davon überzeugen, indem Du die Daten in der Console ausgibst. Aus dieser Struktur kannst Du die Daten einfach auslesen und Variablen zuweisen:

    $('.send').on('click', function(event) {
    
        event.preventDefault();
        
        var plz = $('.plz').val();
                
        $.ajax({
            
            type: 'POST',
            url: 'name.php',
            data: {plz:plz},
            dataType: 'json',
            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
            },
            error: function(data) {
                alert(data);
            }
        
        });
    
    });

Der Kern der Sache ist, dass man auf die sticky-Positionierung verzichtet und Nav und Main mit Flexlayout untereinander anordnet, dann gibt es keine Überlappung.

Die Höhe des Body habe ich auf 100vh (100% der Fensterhöhe) gesetzt, damit man die Nav nicht aus dem Blickfeld scrollen kann. Gescrollt wird jetzt statt der ganzen Seite nur noch im Main-Container (overflow:auto). Dadurch bleibt die Nav immer sichtbar.

Der Dank gebührt MrMurphy, der dieses Muster entwickelt hat.

Evtl. so:

https://jsfiddle.net/Sempervivum/8b5gzd4L/2/

funktioniert bei mir im Opera, aber ich bin mir nicht sicher, ob es zuverlässig ist, wenn der Inhalt nicht im Body sondern einem Div darin liegt.

PS: Man erkennt es, wenn der Hintergrund der Nav halb transparent ist:

https://jsfiddle.net/Sempervivum/0wmstp41/10/

Zitat

wenn die Navigation <nav> in css mit position: sticky und top 0.

Wahrscheinlich ist das tatsächlich der Grund: Der Browser springt in Wirklichkeit zu diesem Anker, so dass das betr. Div oben im Browserfenster anfängt, aber das h-Element ist durch die Navigation verdeckt und es sieht aus, als ob er zu dem Absatz darunter springt:

https://jsfiddle.net/Sempervivum/0wmstp41/9/

In der Doku von $.ajax steht:

Zitat

dataType (default: Intelligent Guess (xml, json, script, or html))

Type: String

The type of data that you're expecting back from the server.

d. h. dieser Parameter definiert, welche Daten vom Server in Empfangsrichtung zurück erwartet werden. Mit dem Senden der Parameter hat das nichts zu tun. D. h. deine "datas" musst Du so wie sie sind an die Funktion übergeben.

Vielleicht so:

    <style>
        .frage:valid + span {
           display: inline;
        }
        .frage + span {
            display: none;
        }
    </style>
    Nenne die einwohnerreichste Stadt in Deutschland
    <input class="frage" required pattern="^Berlin$">
    <span>Die Tabelle für Berlin</span>
    Nenne die zweitgrößte Stadt in Deutschland nach Einwohnerzahl
    <input class="frage" required pattern="^Hamburg$">
    <span>Die Tabelle für Hamburg</span>

Allerdings weiß ich nicht genau, wie das mit der Tabelle gemeint ist.

Ja, gibt es. Einmal hier bei HTML-Seminar:

https://www.html-seminar.de/css-flexbox.htm

und hier bei CSS-Tricks:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Zitat

Ein Bildschirm kann doch nur eine bestimmte Breite haben, oder?

Also müsste ich dann für jede mögliche Bildschirmbreite ein eigenes @media

erstellen. Aber ich kenne nicht alle Bildschirmbreiten oder Höhen.

Genau deshalb fragt man in aller Regel mit einer Mediaquery nicht eine bestimmte Breite ab, sondern legt eine Grenze mit min-width oder max-width fest und hat dann nur noch zwei Möglichkeiten: Fenster kleiner, dann wende diese CSS-Regeln an - Fenster größer oder gleich dann wende jene CSS-Regeln an.

U. u. kann es mehr als einen Umschaltpunkt geben, aber für den Anfang sollte erst Mal einer genügen.

Dafür gibt es mehrere Lösungen:

Auf float verzichten und dem div mit dem Text display: inline-block und eine minimale Breite min-width zuweisen. Dann sollte der Browser beides untereinander darstellen, sobald die Fensterbreite zu klein wird.

oder

Auf Float verzichten und mit Flexlayout beides nebeneinander anordnen und mit einer Mediaquery bei einer geeigneten Fensterbreite auf Darstellung untereinander umschalten.

Zitat

mich würde das auch interessieren.

Dann soll dir geholfen werden, bevor dieser Thread geschlossen wird. Informiere dich über Mediaqueries und Flexlayout:

https://www.html-seminar.de/css-flexbox.htm

https://wiki.selfhtml.org/wiki/CSS/Media_Queries

Mit Flex kannst Du die Anordnung der Container fest legen, nebeneinander oder untereinander. Und mit Mediaqueries kannst Du zwischen beiden je nach Bildschirmbreite umschalten.

_{Die sind wohl von meinen Tests. Ich habe Chrome benutzt, in Opera ging es nicht.}

Bei mir scheint dein letzter Link aber zu funktionieren. Ton wird aufgezeichnet und korrekt abgespielt.