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

  • Dann werde ich meine Seiten auch mal in Hinblick auf "center" überarbeiten.....

    Wieder was gelernt :):):)

  • 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

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?

  • Verbesserung: putze alles aus dem CSS was nicht gebraucht wird.


    Probier mal justify-content: space-evenly; vielleicht ist diese Angabe bei Safari implementiert. Das Grid sieht dann zwar in den groesseren Varianten anders aus.

  • 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

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?

  • Bei mir sieht es so aus:


    Das Bild ist von Android und Chrome. Mit den Apple Geräten ist die Darstellung gleich.


    Grüße

    Dennis

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?

  • 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

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?

  • 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

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?

  • > Wenn ich aber ins Querformat wechsle, bleiben die Bilder immer noch untereinander, obwohl zwei Bilder nebeneinander Platz hätten.

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

  • 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

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?

    Edited once, last by Dennis89 ().

  • 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

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?

  • Guten Abend,


    habe jetzt erfolgreich eine Webseite erstellt, die sich an alle gewünschten Ausgabebildschirmen anpasst.

    Vielen Dank für die HIlfe :bravo2:


    Grüße

    Dennis

    ... ob's hinterm Horizont wirklich so weit runter geht oder ob die Welt vielleicht doch gar keine Scheibe ist?