Änderungen in *.css Datei wirkt sich nicht auf die Webseitendarstellung aus

Heute ist Stammtischzeit:
Jeden Donnerstag 20:30 Uhr hier im Chat.
Wer Lust hat, kann sich gerne beteiligen. ;)
  • Dann werde ich meine Seiten auch mal in Hinblick auf "center" überarbeiten.....

    Wieder was gelernt :):):)

    Spoiler anzeigen

    Pi4 V1.1, 4 GB, USB3-Hub, 250 GB SSD, Bullseye 64, Mate-Desktop, SD-Card Extender (ruht)
    Pi3b Pihole (Buster)
    Pi3b, 128-GB-SSD, Buster, mit 10,1" Monitor als MM (ohne Spiegel ;) )
    orangepi zero, ohne Beschäftigung
    Pi 5 4 GB im GeekPi-Gehäuse mit externer SSD (Bookworm)


    Warnung: Raspi und Co. machen süchtig! :)

  • Änderungen in *.css Datei wirkt sich nicht auf die Webseitendarstellung aus? Schau mal ob du hier fündig wirst!

  • Mit Firefox (Linux) und Chrome (Windows10) sind alle Elemente mittig und sie verschieben sie wie sie sollen, wenn ich die Fensterbreite ändere.

    Mit Safari (Iphone 5s), Safar(Ipad Air (auch ein altes)) , Samsung Internet (Galaxsy S9) und Chrome (Galaxsy S9) sind die Elemente nicht mittig. Im Hochformat sind sie linksbündig und im Querformat sind sie zwischen der Mitte und dem linken Rand. Die Elemente verschieben sich zwar, aber es sieht nicht schön aus, wenn es nicht mittig ist.

    Hat da vielleicht noch jemand eine Idee?

    Der Quellcode ist der aus Beitrag #36.

    Meine Vermutung ist, dass die Abfrage nach einem kleinen Display fehlt. Wie ich das aber in den Quellcode einabue habe ich nicht herausgefunden.

    Danke schon einmal für eure Bemühungen.

    Grüße

    Dennis

    🎧 With the music execution and the talk of revolution, it bleeds in me and it goes 🎧

  • Tell vielen Dank für deine Antwort.

    Brachte leider keine Veränderung auf dem Iphone und Ipad.

    w3school.com schreibt, dass ab Safari 9.0 'justify-content' unterstützt wird. Auf beiden Geräten ist eine höhere Version installiert. Beide haben Safari 12.0 installiert.

    Ich finde es auch seltsam, dass es auf einem Desktop PC mit Windows 10 und Chrome funktioniert, aber auf dem Android Smartphone mit Chrome nicht.


    Viele Grüße

    Dennis

    🎧 With the music execution and the talk of revolution, it bleeds in me and it goes 🎧

  • Hallo Tell

    Danke für deine Hilfe. Also wenn ich die Grafana-Diagramme aus der Seite lösche, und nur noch die vier Bilder drin sind, dann funktioniert es :thumbup:

    Mal sehen ob es was wird, wenn ich die 'Iframe' gegen 'object' ersetze.


    Grüße

    Dennis

    🎧 With the music execution and the talk of revolution, it bleeds in me and it goes 🎧

  • Hallo,

    ich bin immer noch dran das Problem zu lösen.

    Hiermit sieht die Darstellung auf dem Handy und auf dem Laptop so aus, das ich damit leben kann. Wenn ich das Browser-Fenster auf dem Laptop verkleinere, passt sich die Seite auch an, wie sie soll.

    Wenn ich am Handy (Hochformat) die Seite öffne, dann sind alle Elemente untereinander, so soll es sein. Wenn ich aber ins Querformat wechsle, bleiben die Bilder immer noch untereinander, obwohl zwei Bilder nebeneinander Platz hätten. Habe jetzt viel versucht und probiert und letzt endlich ist das beste Ergebnis mit dem Seitenlyout von Tell entstanden (mit kleinen Änderungen).

    Wenn ich die 'iframes' weglassen, dann funktioniert es am Handy. Habe auch versucht eine zweite 'id' für die 'iframes' zu erstellen, das habe ich aber wieder verworfen.

    Auch habe ich die 'iframes' durch 'object' ersetzt, damit konnte ich aber die Größe und die Position nicht mehr steuern. Bin jetzt wieder zurück bei 'iframes' auch weil hier davon abgeraten wird.

    Ich bleibe weiter dran, bin aber für jeden Hinweis dankbar.


    Grüße

    Dennis

    🎧 With the music execution and the talk of revolution, it bleeds in me and it goes 🎧

  • Da du kein Framework wie Bootstrap verwendest musst du selber darauf eingehen dass das Handy gedreht wurde.
    Dreh dein Handy und mach einen Refresh, dann wird es neu positioniert.

    Offizieller Schmier und Schmutzfink des Forum.
    Warum einfach wenn's auch schwer geht ?

    Kein Support per PN !
    Fragen bitte hier im Forum stellen. So hat jeder etwas davon.

  • Guten Abend,

    Versuch es mal mit einer zusaetzlichen Media-Query die explizit zwei Spalten vorgibt.

    Ich habe jetzt folgendes eingefügt:

    Code
      @media screen and (max-width: 599px) {
      div#turtles { grid-template-columns: auto auto;}
    }

    Da das erste Media-Query die Grenze bei 600px hat, setze ich jetzt die max.-Grenze knapp darunter. Mit 'auto auto' werden zwei Spalten erstellt und die Größe wird automatisch angepasst?

    Brachte allerdings kein Unterschied.

    Irgendwie ist das für mich noch etwas undurchsichtig.

    Code
       img         { display: block; width: 12em; height: 12em; margin: auto; }
       div#turtles { width: 18em; margin: 0 auto; }

    In der ersten Zeile bestimme ich die Größe des Bildes und der Abstand zum Rand wird automatisch erstellt.

    Auf was bezieht sich denn das 'width' und 'margin' in der zweiten Zeile?

    Diese Kombination konnte ich im Internet nicht finden.

    mit (korrekten) Media-Queries

    :helpnew:


    Edit:

    Code
    @media screen and (max-width: 599px) {
    div#turtles {width: auto; margin: 0; display: grid; grid-template-columns: auto auto;}

    Das habe ich jetzt noch so abgeändert. Jetzt sieht es im Querformat ganz gut aus :)

    Das Hochformat ist nicht ganz perfekt, aber mein 5s hat auch ein kleines Display.

    Jetzt baue ich noch ein Media-Query für das Tablett ein. Dann sind alle Anwendungen abgedeckt.

    Über eine Antwort auf meine Frage würde ich mich trotzdem freuen, so wie über weitere Hinweise/Verbesserungen/Kritik.

    Die Projektanforderungen haben sich mittlerweile erweitert, deswegen wird die Webseite auch noch mit weiteren Inhalten gefüllt. Da wäre es schön wenn ich ein bisschen mehr verstehen würde, was ich da tue.


    Danke und Grüße

    Dennis

    🎧 With the music execution and the talk of revolution, it bleeds in me and it goes 🎧

    Einmal editiert, zuletzt von Dennis89 (4. November 2020 um 22:33)

  • Noch ein bisschen ueber CSS zu lernen wuerde nicht schaden...

    > Auf was bezieht sich denn das 'width' und 'margin' in der zweiten Zeile?

    Auf das div mit den Bildern drin

    > Das Hochformat ist nicht ganz perfekt, aber mein 5s hat auch ein kleines Display.

    Ja, weil die Definitionen darueber schon von Anfang an ueberschrieben werden...

  • Danke Tell für deine Antwort.

    Noch ein bisschen ueber CSS zu lernen wuerde nicht schaden...

    Ja bin auch keines Wegs abgeneigt. Das wird für den weiteren Projektverlauf so oder so notwendig sein :thumbup:

    Ja, weil die Definitionen darueber schon von Anfang an ueberschrieben werden...

    Dann mache ich noch ein weiteres Media-Query in dem ich diese Displaygröße noch definiere.

    Danke für die Hilfe.

    Grüße

    Dennis

    🎧 With the music execution and the talk of revolution, it bleeds in me and it goes 🎧

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!