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

  • Guten Abend zusammen,

    für eine Temperaturüberwachung unseres Schildkrötengeheges möchte ich eine Webseite erstellen, die den Temperaturverlauf und die aktuelle Temperatur anzeigt.

    Das funktioniert mit Grafana auch soweit.

    Jetzt ist es so, das ich eine Überschrift, zwei 'Iframes' und vier Bilder auf meiner Webseite habe. Der Inhalt der Webseite ist in einer *.php - Datei und die Gestaltung in einer *.css - Datei.

    Ich habe mit der *.css - Datei den Inhalt der Webseite gestern positioniert. Gerade wollte ich die Anordnung der 'Iframes' nochmals anpassen, allerdings ändert sich die Position nicht mehr.

    Ich ändere die *.css - Datei, speichere sie und aktualisiere die Webseite und sie sieht so aus wie davor. Auch ein Neustart des Raspberrys änderte nichts.

    Kann mir mal einer bitte sagen, was an diesen Codes falsch ist?

    Die Bilder werden durch vier unterschiedliche ersetzt, die ich gerade aber noch nicht habe, deswegen sind gerade vier gleiche drin.

    Die Position der 'iframes' sind hier im Beispiel so eingestellt, dass sie sich überlappen sollten, einfach nur weil ich einen Positionsunterschied sehen wollte, der kam aber nicht vor.

    Bin auch über alle Tipps und Verbesserungen dankbar, das hier ist meine erste Webseite.

    Vielen Dank und Grüße

    Dennis

    🎧 Strahlend soll die Zukunft sein, gut wir werden seh'n, ob wir wie ein Strahlemann lächelnd untergeh'n.  🎧

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

    • Offizieller Beitrag

    Ich ändere die *.css - Datei, speichere sie und aktualisiere die Webseite und sie sieht so aus wie davor. Auch ein Neustart des Raspberrys änderte nichts.

    Ohne jetzt die Codeblöcke angesehen zu haben... Hast Du mal den Browsercache (im FF Chronik) gelöscht?

  • for( var i = 0; i < 100; i++ ) {

    alert( "Man soll NICHT position absolute verwenden weil das meist Aerger gibt!" ) ;

    }

    Wenn das eine Art Grid geben soll: alle vernuenftigen Browser haben heute display: grid Implementiert. Und das kann die Seite erst noch responsiv machen.

    Wenn 100x wiederholen und ein guter Tipp immer noch nicht hilft: position: absolute braucht ein Parent-Element mit position: relative...

  • Danke für die schnellen Antworten :)


    Hast Du mal den Browsercache (im FF Chronik) gelöscht?

    Ja, hat nichts geändert.

    display: grid Implementiert. Und das kann die Seite erst noch responsiv machen.

    Das bedeutet, dass die Seite auf jedem Gerät und mit jedem Browser gleich angezeigt wird? Das wäre das Endziel.

    Ich schaue mir mal Anleitungen zu 'display grid' an :thumbup:

    Ich hab mir das HTML nochmal angesehen: es gibt kein div1, div2 und div3-Element!

    Ich habe gelesen, das ich die 'iframes' mit 'div' positionieren kann. Da ich aber zwei habe und auch noch Bilder, die ich positionieren wollte, dachte ich mir ich kann die durchnummerieren. Nur damit ihr meine Gedanken nachvollziehen könnt.

    Grüße

    Dennis

    🎧 Strahlend soll die Zukunft sein, gut wir werden seh'n, ob wir wie ein Strahlemann lächelnd untergeh'n.  🎧

    • Offizieller Beitrag

    Ups! Hab den Link vergessen einzufügen! :blush: Hier isser: https://developer.mozilla.org/de/docs/Web/HTML/Element/div

    //Edit Dennis89 Und denke ggf. auch an den Punkt (.) in der CSS-Datei vor der Klasse (.div1)!

  • Dennis89 Was genau meinst Du mit ”gleich” aussehen auf jedem Gerät mit jedem Browser? Pixelgenau? Das wäre das falsche Endziel beziehungsweise ist HTML dafür nicht gemacht, selbst mit CSS nicht. Das macht auch gar keinen Sinn bei den drastisch verschiedenen Displaygrössen und -auflösungen, die es so gibt.

    “Dawn, n.: The time when men of reason go to bed.” — Ambrose Bierce, “The Devil's Dictionary”

  • Guten Morgen __blackjack__

    danke für deine Antwort.

    Da habe ich mir falsch ausgedrückt. Es wäre schön wenn sich die Webseite an die unterschiedlichen Anzeigegeräte anpasst. So das man auf dem Handy, Tablet und Pc überall eine passende Seite hat.

    Heute wird ja jede "richtige" Webseite wenn man sie zum Beispiel mit dem Handy öffnet, in einer "Handyversion" angezeigt.

    So wie ich das gestern Abend auf die schnelle verstanden habe, erledigt das 'display grid'. Hatte noch keine Zeit mich einzuarbeiten.

    Falls ich aber auf dem Holzweg wäre, wäre ein kurzes "Ja" oder "Nein" nett. :thumbup:

    Grüße

    Dennis

    🎧 Strahlend soll die Zukunft sein, gut wir werden seh'n, ob wir wie ein Strahlemann lächelnd untergeh'n.  🎧

  • Hallo,

    das ganze nennt sich responsive webdesign und das ist heute eigentlich der Standard, also wie man das so macht. Das selber zu erstellen ist aber viel Arbeit und braucht Erfahrung, also nimmt man als Hobbyprogrammierer (so wie wir :) ) ein ferrtiges CSS Framework, was das alles kann und macht "nur noch" individuelle Anpassungen. Das mit bekannteste und auch recht ausführlich dokumentiere CSS Framework ist Bootstrap CSS, welches von Twitter entwickelt wird.

    Gruß, noisefloor

  • Sehr hilfreich ist auch

    Selfhtml

    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! :)

  • Guten Abend,

    Tell zur Zeit ist zumindest keine weitere Seite geplant.

    Ich habe mich heute mal mit 'Bootstrap' und 'CSS-Grid' beschäftigt. Und ich wusste bei 'Bootstrap' trotz Beispieldateien (so viele) gar nicht richtig wo ich anfangen soll, was ich davon alles brauche. Ich habe mich zwar mit einem Übersetzer durch die Doku gearbeitet, aber dafür brauche ich viel mehr Zeit.

    Die letzte Stunde habe ich mir noch 'CSS-Grid' angeschaut und hatte damit relativ schnell Erfolg. Jetzt habe ich zumindest eine Webseite, die sich an mein Laptopbildschirm und automatisch an mein Handy anpasst.

    Bis jetzt sind zwar alle Elemente noch unter einander, aber für eine Stunde einarbeiten finde ich das Ergebnis nicht schlecht. Wenn ich das 'center' weggelassen habe und die Elemente Start- und Endspalten bzw. Reihen zugewiesen habe, hat die Anpassung an andere Bildschirme nicht mehr gepasst.

    Morgen Abend geht es dann mit 'CSS-Grid' weiter, ich denke damit erreiche ich mein Ziel.:thumbup:

    Aktuell sieht die *.php Datei so aus:

    Falls zufällig sonst jemand Interesse an diesem Thema hat, kann man so den Fortschritt verfolgen. Und natürlich bin ich an dieser Stelle für Verbesserungen und Kritik offen. :)

    Danke für eure Hilfe und Grüße

    Dennis

    🎧 Strahlend soll die Zukunft sein, gut wir werden seh'n, ob wir wie ein Strahlemann lächelnd untergeh'n.  🎧

  • Die Zeit um sich in Bootstrap ainzuarbeiten ist aber betraechtlich.

    Aber immer noch ein vielfaches weniger als ein responive design / responsive grid layout mit gleicher Funktionalität wie das von Bootstrap zu schreiben und zu debuggen.

    Wenn Dennis89 nach ~1h ein erstes passables Ergebnis hat, dann ist das schon sehr gut und effetiver Einsatz von knapp bemessener Freizeit.

    Gruß, noisefloor

Jetzt mitmachen!

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