Ä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. ;)
  • Hallo zusammen,

    ich brauche mal etwas Erklärung. In meiner Seite, die ich in #17 gepostet habe, sind alle Elemente untereinander, so wie ich es gerne auf einem kleinen Display (Smartphone) hätte. Auf dem PC hätte ich aber gerne, dass die Seite so aussieht:

    Oben die zwei Anzeigen und darunter kommen mal vier Schildkrötenbilder und das Ganze immer in der Mitte der Seite. Ist mein Browser maximiert, dann habe ich das mit dieser *.php- Datei geschaft:

    Was mit fehlt ist der Spagat dazwischen. Beide Seiten reagieren nicht auf Änderungen der Seitengrößen.

    Hier ist viel erklärt. Daher weis ich, dass mir noch dass ' media screen’ fehlt. Jedoch verstehe ich an diesen Beispielen die Positionierung der einzelnen Elemente nicht. In jeder Anleitung wird gefühlt ein anderer Ansatz gewählt, das macht es mir gerade nicht leichter.

    Falls die Programmierrichtung "Mobile-first" tatsächlich die Richtung ist die man einschlägt würde ich die Webseite gerne so aufbauen. Ich denke dass man später zu 80% die Seite mit einem Tablet oder Handy anschaut.

    Kann mir da bitte jemand auf die Sprünge helfen oder mich vom Schlauch schubsen, auf dem ich gerade stehe?

    Achja, jetzt wisst ihr auch das mein Profilbild Hugo heißt :lol:

    Grüße

    Dennis

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

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

  • Wenn ich das richtig sehe, gibst du für den Temperaturverlauf eine Weite von 1100 Pixeln vor.

    Dazu scheinst du für Rosi, Willy, Spike und Whiskey feste Startpunkte vorzugeben.

    Das Beispiel des "Kulturbanausen" passt bei dir nicht, da er nur Text anpasst, aber keine Bilder. Zudem ist das Beispiel vier Jahre alt. Das sind Generationen......

    Schau mal hier rein: Das ist aktuell.

    klick

    Ich habe das relativ einfach gelöst.

    Auf dieser Seite "fließt" der Text und das darunter stehende Menü. Wenn du die Seite zusammenschiebst, schieben sich die Menübestandteile untereinander. Das Menü besteht einfach aus "li"stenelementen. Ob du da einen Link einsetzt oder eine Grafik, ist eigentlich egal.

    Nebenbei: in Firefox gibt es den Menüpunkt "Webentwickler", da kannst du u.a. auch verschiedene Displaygrößen testen.

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

  • Hallo Urs-1956 Danke für deine Antwort.

    Ich habe deinen Link gelesen. Ich habe verstanden, dass Pixelangaben raus müssen, das die Webseite als erstes so dargestellt werden soll, als würde sie auf einem kleinen Display angezeigt werden. Und es ist wichtig, die Elemente an die gegebene Seitenverhältnisse anzupassen und nicht die Elemente an eine vorgegebene Seite.

    Also ich habe mal den ganzen CSS-Teil aus meiner *.php entfernt und in eine extra Datei nur das eingefügt:

    CSS
    .grid-container {
       display: grid;
       grid-auto-rows: 1em
       grid-auto-columns: 1em;
       grid-gap: 0,1em;
       justify-items: center;
       align-items: center;
    }

    Wenn ich die Webseite dann aufrufe stehen alle Elemente mittig und untereinander, also es für ein kleinen Bildschirm sein soll.

    Ich habe mir auch den Quellcode deiner Webseite angeschaut, aber der CSS-Teil ist darin leider nicht enthalten.

    Ich kann leider immer noch nicht herausfinden, wie ich dem Browser jetzt mitteile, das umso größer der Bildschirm umso weniger Elemente untereinander sein sollen, bis meine gewünschte Anordnung erreicht ist.

    Mein Verständnis sagt mir, das ich doch die Elemente den Reihen und Spalten zuweisen muss und das sich diese dann mit den Seitengrößen untereinander schieben?

    Weiche ich jetzt gerade vom richtigen Weg wieder ab oder war das :

    Dazu scheinst du für Rosi, Willy, Spike und Whiskey feste Startpunkte vorzugeben.

    keine Aufforderung um die Startpunkte zu löschen?


    Edit: Ich denke das ich @ media only screen and (max-width: ...) in die CSS-Datei schreiben muss und darunter die Anordnung wie sie bei maximalem Bildschirm sein soll? Aber ich soll ja keine Pixel-Größen vorgeben:conf:

    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 (28. Oktober 2020 um 22:25)

  • > Mein Verständnis sagt mir, das ich doch die Elemente den Reihen und Spalten zuweisen muss und das sich diese dann

    > mit den Seitengrößen untereinander schieben?

    Sieh nochmals meinen Link an. Das Grid kann sich selbst organisieren, zumindest wenn die Elemente drin gleich gross sind.

    Ob das bei Dreifachbreite noch funktioniert muss ich mal testen.

  • Ich lasse dir morgen die CSS-Datei zukommen.....

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

  • Tell am Anfang habe ich deine Seite nicht verstanden, danke für den Hinweis das ich sie mir nochmal anschauen sollte. Wenn ich sie mal auf meine Seite angepasst habe, dann funktioniert die Verschiebung der Elemente schon mal. :thumbup:

    Allerdings überlappen sich die Elemente:

    Muss/kann ich ein weiteres 'style' definieren, das dafür sorgt dass die Bilder nicht in die Reihe verschoben werden, in der sich das Diagramm befindet?

    Ich habe die zwei Diagramme mal aus dem 'p' ausgeschlossen, dann bleiben die Bilder schonmal unten. Dann habe ich den Diagrammen gesagt sie sollen in der Mitte bleiben. Das funktioniert soweit auf dem Laptop ganz gut. Aber auf dem Handy ist alles untereinander und am linken Rand angeordnet. In Textform sieht das jetzt so aus:


    Urs-1956 Danke für das nette Angebot, ist natürlich verlockend um nachzuschauen:)

    Vielen Dank für eure Mühe und Gedult mit mir :)

    Gute Nacht und Grüße

    Dennis

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

  • Hallo,

    ungetestet:

    Die .col-Klassen kannst du bei Bedarf noch erweitern, je nach Displaygröße des Zielgeräts, siehe Doku: https://getbootstrap.com/docs/3.4/css/#grid-options

    Gruß, noisefloor

  • Kurze Rückmeldung. Die Seite sieht so aus, dass alle Elemente am linken Bildschirmrand sind und alle sind untereinander. Es verändert sich nicht wenn ich die Bildschirmgröße ändere. Die Seite sieht auf dem Handy und auf dem Laptop genau gleich aus.

    Wenn ich den 'col' s andere Werte gebe, dann ändert sich auch gar nichts. Also irgendwo ist da der Wurm drin.

    Die Doku enthält ja schöne Beispiele, leider lassen die sich auf meine Seite nicht reproduzieren.

    Auch wenn ich das Beispiel aus der Doku ihn meine Seite kopiere, ist alles am Rand angeordnet:

    Das Ergebnis auf dem Laptop:

    Viele Grüße

    Dennis

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

  • Da du nichts anderes vorgibst, ist die Ausrichtung linksbündig. Versuch es mit Zentrieren

    Code
    <div align center> 
    <title>Demo</title>
    ...
    
    ...
    
    ...
    
    </div>
    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! :)

  • Das ist... falscher als falsch.

    OK, dann hatte ich was Falsches im Kopf.

    Was würdest du zum Zentrieren vorschlagen?

    Wie wäre es mit

    <center>

    ....

    </center>

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

  • 1. title gehört in den head, div in den body - und title in einem div schon gar nicht.

    2. falls das ein "align" Attribut mit "center" Wert sein soll fehlt ein =

    3. das center Element ist obsolet und nicht mehr zu verwenden, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

    4. CSS, Methoden gibt es viele.

    Ist sicher gut gemeint aber absolut nicht hilfreich, da falsch. Dem TE, der von Webentwicklung offensichtlich nicht viel Ahnung hat, das vorzuschlagen muss nicht sein, IMO.

  • Guten Abend zusammen und Danke für eure Antworten.

    Langsam habe ich etwas den Überblick verloren, mit all den Lösungsansätzen.Trotzdem bin ich euch allen sehr dankbar, für die Mühe und Zeit die ihr für mich aufbringt. :) Ich habe jetzt eine Webseite, die bei Änderung des Browserfensters am Laptop die Bilder unter einander schiebt. Das funktioniert jetzt so wie es sein soll.

    Ich habe die '<center>' entfernt sowie alle Pixel-Angaben.

    Das Problem besteht jetzt nur noch darin, dass wenn ich die Seite auf dem Smartphone aufrufe, zwar alles schön untereinander ist, aber eben auch alles linksbündig. Ich hätte das gerne noch mittig.

    Das ist jetzt die aktuelle Webseite:

    Dem TE, der von Webentwicklung offensichtlich nicht viel Ahnung hat

    Das ist nett ausgedrückt. ^^ Das hier ist meine aller erste Berührung mit Webentwicklung und von daher ist mein Wissen nahe 0.

    Grüße

    Dennis

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

  • Guten Morgen Tell

    Danke für deine Antwort. Die Webseite ist mit Firefox (Linux) auch zentriert, nur mit Safari (Iphone 5s) nicht. Teste es heute Mittag mal mit anderen Browser.

    Sieht der Code sonst gut aus oder gibt es noch Sachen die man so nicht macht?


    Grüße

    Dennis

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

  • gibt es noch Sachen die man so nicht macht?

    Ja.

    Statt iframe object verwenden.

    Code
    <iframe 
        src="http://192.168.0.67:3000/d-solo/2qYQh4zRz/diagramm?orgId=1&refresh=10s&from=1603601862716&to=1603623462716&panelId=4" 
        style="width: 77em; height: 18em"
        frameborder="0">
    </iframe>


    Code
    <object 
        data="http://192.168.0.67:3000/d-solo/2qYQh4zRz/diagramm?orgId=1&refresh=10s&from=1603601862716&to=1603623462716&panelId=4">
        style="width: 77em; height: 18em"
    </object>

    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.

Jetzt mitmachen!

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