Beiträge von Sempervivum

Das liegt an dem margin-right, das Du hinzu gefügt hast, um einen Abstand zu bekommen. Du kannst dieses problemlos in der Mediaquery auf Null setzen, dann sollte alles in Ordnung sein.

html-seminar.de/woltlab/attachment/2108/

Zitat

Wenn ich der ersten Box jetzt 15Px padding zuweise, dann zersprengt es das Layout. Ich muss ja diese zusätzlichen 30px miteinberechnen.

Nein, das ist nicht nötig, wenn Du konsequent Flexlayout verwendest. Ich habe es gerade getestet mit dem Layout, das Du früher gepostet hattest. Am besten postest Du nochmal das vollständige HTML und CSS.

Ach so, Padding kannst Du bei Flex genau so auf deine Container .content und .sidebar anwenden, das ist unabhängig von Flex

Zitat

Bei einem normalen Layout habe ich den Content zentriert indem ich der Division eine klasse mit beispielsweise 15PX Padding

Das verstehe ich nicht, Padding fügt nur einen Innenabstand hinzu und zentriert nichts. Text kann man sehr einfach horizontal mit text-align:center; zentrieren und Flexitems mit align-items: center; für den Flexcontainer. Erkläre doch mal genauer, was Du unter Zentrierung verstehst und welche Elemente Du zentrieren willst.

Da hat dir Basti in Posting #6 ein Beispiel gegeben. Aber Du schreibst ja leider, dass Du kein PHP auf deinem Webspace hast. Ich würde mir schnellstens einen anderen Provider suchen oder bei der Telekom upgraden.

Aber dass Davis seine API nicht für Cross-Domain-Access freigibt ist auch ein schwaches Bild.

Edit: Wohl besser nicht bei Telekom upgraden: Paket M kostet 15 €, bei all-inkl z. B. gibts PHP schon für 5 € ohne Mindest-Vertragslaufzeit und ohne Einrichtungsgebühr.

Hier schon mal eine Demo, die die Kreise anordnet:

    <style>
        .circle {
            border-radius: 50%;
            background-color: lightblue;
            position: absolute;
        }

        #table-circles td {
            width: 20px;
            height: 20px;
        }
    </style>
    <table id="table-circles">
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>3</td>
            <td>d</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
        </tr>
    </table>
    <script>
        var radius = 5, // Radius, in dem die Kreise angeordnet werden sollen
            radCircle = 3, // Radius der angezeigten Kreise
            cellX = 2, cellY = 2; // Position der Zelle, in der der Wert steht
        var theTable = document.getElementById('table-circles'),
            theCell = theTable.rows[cellY].cells[cellX],
            wCell = theCell.offsetWidth, hCell = theCell.offsetHeight;
        theCell.style.position = 'relative';
        var nrCircles = parseInt(theCell.textContent);
        var deltaRad = Math.PI * 2 / nrCircles;
        theCell.innerHTML = '';
        for (var i = 0, rad = 0; i < nrCircles; i++ , rad += deltaRad) {
            var circle = document.createElement('div');
            circle.className = 'circle';
            var deltaX = radius * Math.sin(rad),
                deltaY = radius * Math.cos(rad);
            if (nrCircles == 1) deltaX = deltaY = 0;
            var x = wCell / 2 - radCircle + deltaX,
                y = hCell / 2 - radCircle - deltaY;
            circle.style.left = x + 'px';
            circle.style.top = y + 'px';
            circle.style.width = circle.style.height = 2 * radCircle + 'px';
            theCell.appendChild(circle);
        }
    </script>

Hast Du denn den Ordner in einer Variablen vorliegen? Wenn ja, ist es überhaupt kein Problem, diese in der URL-String einzufügen:

'map/mt.google.com/vt/' + deine_variable + '/{z}/lyrs=s&x={x}&y={y}&z={z}.jpg',

Ein funktionierendes Beispiel rein auf das Javascript bezogen ist das geringere Problem, das größere ist, ein Javascript, das das leistet, in deiner Node-Red-Umgebung aufzurufen. Hast Du eine Möglichkeit, ein Javascript auszuführen bzw. eine Javascript-Funktion aufzurufen nachdem die Tabelle fertig aufgebaut und gefüllt ist?

PS: Das war jetzt etwas voreilig, ein Test hat mich eines besseren belehrt: Es funktioniert auch, wenn man das default an den Anfang stellt:

<script>
        var val = 3;
        switch (val) {
            default:
                console.log('default');
                break;
            case 3:
                console.log("case 3");
                break;
        }

    </script>

Das default: gehört an das Ende des switch und braucht dann kein break. Versuche es so:

            switch (option) {
                case "get":
                        var child = list[name];
                    return child;
                    break;
                // hier die anderen Cases
                default: var child = list;
                    return child;
            }

Wenn die Tabelle fertig gefüllt ist, musst Du ein Javascript aufrufen, das die Kreise anzeigt. Hast Du in Node-Red die Möglichkeit dazu, d. h. gibt es Eventlistener, Trigger o. ä.?

Zitat

Komischerweise funktioniert das mit diesem Code problemlos. Ich verstehe aber nicht warum.

Das habe ich auch zunächst nicht verstanden, denn das Display deines Samsung-Handys hat eine Breite von über 1000px und dürfte mit dieser Mediaquery eigentlich nicht auf column-Layout umschalten. Ich habe jedoch weiter recherchiert und mit meinem Samsung S4 getestet und dies gefunden:

https://webplatform.github.io/docs/tutorials…ding-css-units/

Sie schreiben dort:

Zitat

The CSS pixel is a ‘reference’ pixel, not a device pixel. This is misleading and, personally, I prefer the notion of ‘user unit’ that SVG uses because I think it is easier to then explain the mapping to physical units and device pixels. But once one understands that a ‘px’ is actually a reference, not a device pixel, things make more sense. The thing to remember is that a CSS px is an abstract unit and there is a ratio controlling how it a) maps to actual device pixels and b) maps to physical units (in a fixed way, the ratio is always 96 CSS px to an inch).

D. h. die Pixel von CSS haben nichts mit den Pixeln des Displays zu tun. Offenbar ergibt sich die Breite in CSS-Pixeln durch die Breite des Displays in physikalischen Pixeln dividiert durch devicePixelRatio. Und das heißt weiter, dass die Berechnung, die ich in #22 erwähnt habe, automatisch durch den Browser stattfindet, man braucht sich darum nicht zu kümmern.

Bei meinem S4 wird eine devicePixelRatio von 3 angezeigt und eine CSS-Breite des window von 360px (im Hochformat).

Ich habe mich noch ein wenig umgesehen mit dem Ergebnis, dass die Browserunterstützung für die Pixelratio in Javascript sehr gut ist, sogar der IE11 ist dabei:

https://developer.mozilla.org/en-US/docs/Web…evicePixelRatio

Dividiert man die Pixelbreite durch die Pixelratio müsste man eine effektive Breite bekommen, die ein gutes Kriterium für die Umschaltung des Layouts ist.

Nein, leider nicht. Das mit den hochauflösenden Displays ist eine Sache, in die ich mich selber noch nicht so eingearbeitet habe. Eine richtige Wissenschaft für sich, auch wenn es darum geht, Bilder verschiedener Auflösung einzubinden. Man sieht ja, dass die Pixelbreite u. U. kein geeignetes Kriterium mehr ist, um zwischen Desktop und Handy zu unterscheiden. Es gibt da eine Pixeldichte, auf die man auch in CSS Zugriff hat, aber alles noch nicht richtig ausgereift mit teilweise proprietärer Syntax.

PS: Recherche nach der Auflösung des A7 liefert:

Zitat

6 Zoll großes Display mit einer Auflösung von 1.080 x 2.220 Pixeln

Sieht gut aus und funktioniert bei mir ebenfalls, wenn ich es per Copy&Paste in meine Testdatei übertrage.

Versuche, auf dem PC das Browserfenster stark zu verkleinern in der Breite, ob er dann auf die vertikale Anordnung umschaltet. 500px kommen mir relativ gering vor, weil viele Handys ein hohe Auflösung haben.

Poste doch mal die vollständige Mediaquery.

Ja, das habe ich getestet und bei mir funktioniert es. In deinem Posting hast Du es falsch geschrieben

flex-direction: colum;

statt

flex-direction: column;

aber wahrscheinlich ist das nur ein Übertragungsfehler?

Auf den Bildern kann ich leider gar nichts erkennen, da sind bei mir nur Schleier und Schatten.

Zitat

Komischerweise funktioniert es, wenn ich anstatt 1200PX einfach 62% verwende. Ich weiß aber nicht ob das richtig ist

Richtig oder falsch ist hier weniger die Frage, sondern ob Du damit zu einer Darstellung kommst, die auf allen Monitoren gut aussieht. Wenn ich das mit den 62% ausprobiere, habe ich das Problem, dass bei schmalem Browserfenster, auch wenn die Mediaquery greift, links und rechts Platz verschenkt wird. Eine einfache Möglichkeit, beiden, schmalen und ganz breiten Browserfenstern gerecht zu werden, ist, max-width statt width zu verwenden. Dann ufert die Breite auf der einen Seite nicht aus und auf der anderen Seite wird bei schmalerem Browserfenster der verfügbare Platz ausgenutzt.

Gern.

Deaktiviert man die feste Breite für #homepage, so verschwindet die horizontale Scrollbar und man kann die Seite auf einen Blick erfassen.

        #homepage {
            margin: 0 auto;
            margin-top: 35px;
            /* width: 1200px; */
            display: flex;
            flex-direction: column;
            border: 5px solid #000;
            border-radius: 5px;
            box-shadow: 0 0 10px #000;
            background-image: url(images/background.jpg);
            background-repeat: repeat;
        }

Und die vertikale Anordnung erreichst Du mit diesem CSS:

        @media screen and (max-width: 500px) {
            #row {
                flex-direction: column;
            }
        }

Damit die Sidebar auch dann sichtbar ist, musste ich ihr eine min-height verpassen. Wenn erst Mal Inhalte drin sind, kann das entfallen.

        .sidebar {
            flex: 1;
            min-height: 470px;
            background-color: #000;
        }

Was die HG-Grafiken betrifft, so müsste man wissen, wie Du dir die Anzeige vorstellst. Es gibt da ja diverse Varianten, gekachelt oder nicht gekachelt etc. Kannst Du sie vielleicht an dein nächstes Posting anhängen?