Dann werde ich meine Seiten auch mal in Hinblick auf "center" überarbeiten.....
Wieder was gelernt
Dann werde ich meine Seiten auch mal in Hinblick auf "center" überarbeiten.....
Wieder was gelernt
Ä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
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
> Android Smartphone mit Chrome
Die Version von gestern hatte auf Android mit Chrome eine vernuenftige Darstellung.
Und wie sieht es jetzt aus: https://www.heimetli.ch/913594/images.html
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
Mal sehen ob es was wird, wenn ich die 'Iframe' gegen 'object' ersetze.
Grüße
Dennis
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kroeten</title>
<style>
img { display: block; width: 12em; height: 12em; margin: auto; }
div#turtles { width: 18em; margin: 0 auto; }
@media screen and (min-width: 600px) {
div#turtles { width: auto; margin: 0; display: grid; grid-template-columns: repeat(auto-fit,15em); justify-content: center; }
}
</style>
</head>
<body>
<iframe src="http://192.168.0.67:3000/d-solo/2qYQh4zRz/diagramm?orgId=1&from=1604348708469&to=1604435048469&refresh=10s&panelId=4" width="300" height="200" frameborder="0"></iframe>
<iframe src="http://192.168.0.67:3000/d-solo/2qYQh4zRz/diagramm?orgId=1&from=1604348439288&to=1604434779289&refresh=10s&panelId=8" width="1500" height="200" frameborder="0"></iframe>
<div id="turtles">
<img src="Hugo_klein1.png">
<img src="Hugo_klein1.png">
<img src="Hugo_klein1.png">
<img src="Hugo_klein1.png">
</div>
</body>
</html>
Alles anzeigen
Ich bleibe weiter dran, bin aber für jeden Hinweis dankbar.
Grüße
Dennis
> 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.
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.
In welchem Jahr lebst du?! Nein, mit (korrekten) Media-Queries ist das nicht der Fall.
Guten Abend,
Versuch es mal mit einer zusaetzlichen Media-Query die explizit zwei Spalten vorgibt.
Ich habe jetzt folgendes eingefügt:
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.
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
Edit:
@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
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
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
Guten Abend,
habe jetzt erfolgreich eine Webseite erstellt, die sich an alle gewünschten Ausgabebildschirmen anpasst.
Vielen Dank für die HIlfe
Grüße
Dennis
Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!