Cube Header

[Volker]

Huhu

lange kein Header Block von mir

https://www.niederastroth.de/cube/

[Tommy Herrmann]

Moin,

kommen doch alte Erinnerungen auf - noch aus uralten NOF-Zeiten:

http://www.nof-tutorials.com/CSS-Transi ... index.html

[Bushisan]

Ich hatte den auch mal auf unserer Vereinsseite

[Rancher]

Werner hatte tolle Beispiele auf seiner Website. Vielleicht hat die KI bei ihm Nachhilfe bekommen

[Tommy Herrmann]

... ich meckere nicht - aber Du müsstest noch das Overflow am Handy am "Samsung Internet Browser" ausschalten, denn der Würfel ist am Handy viel zu groß und zerschießt das Layout vollständig.

[Volker]

Hab ja auf meiner Seite für Handy den Würfel verkleinert

https://www.niederastroth.de/cube.html

[Tommy Herrmann]

Jetzt ist am "Samsung Internet" Browser der Würfel zwar kleiner aber das Overflow unverändert:

Am "Edge/Chrome" Browser sitzt der Würfel nicht mittig, es gibt dort jedoch kein Overflow:

[Volker]

Hab ihn nochmal verkleinert und etwas mehr in die Mitte gesetzt. Ich denke 80% meiner Blöcke sehen am Handy nicht gut aus

Das ist nicht der Würfel, das sind die kack Wellen Hab ich jetzt mal geändert

[Tommy Herrmann]

Jetzt ist das Overflow zwar auch im "Samsung Internet" Browser weg, aber der Cube (Würfel) sitzt in allen Browsern zu weit links:

Kannst Du nicht einfach alles so lassen wie zuvor und das Overflow abwürgen mit:

Code: Alles auswählen

overflow-x: hidden;

[Volker]

Tommy,

wie Du weißt bin ich beim Thema CSS zu 90 % auf die KI angewiesen Die macht da immer Sachen die ich auch nicht immer verstehe

Aber ich bin gerade an einem anderen Problem : mein neuer Block auf meiner Startseite sieht am Handy noch kackiger aus ( im Moment ) https://www.niederastroth.de/index.php

Da bastel ich gerade rum

[Volker]

Hab beim Würfel mal alle Animationen abgeschaltet und nur den Würfel da.
Die Animationen gehen halt über das Handy Display raus

Jetzt gehts Auch mit Animation

[Tommy Herrmann]

... also der Cube (Würfel) gefällt mir so (glaube ich) besser und dieser ist jetzt mittig und ohne Überlauf an allen Handy-Browsern zu sehen, auch wenn man den Würfel jetzt nicht mahr ganz richtig in der Vertikalen drehen kann.

Die Index-Seite ist an allen Handy-Browsern völlig verzerrt (in die Länge gezogen). Kannst Du das denn an Deinem Handy nicht sehen? Dann musst Du vielleicht mal den Cache am Handy-Browser löschen:

[Volker]

Ja Tommy das sehe ich auch
Das ist ja mein Problem an dem ich arbeite aber durch das Display Format am Handy sieht das eben Kacke aus, das weiß ich doch

Arbeite aber gerade auch an 3 weiteren Blöcken

Ein Geiler mit bis zu 8 cards die einfliegen aus wählbaren Richtungen usw. hier mein Test - am handy kommen die eben anders und liegen alle untereinander - ist halt am handy so

https://www.niederastroth.de/volkertest/

3 neue Blöcke

Ich muss mich damit abfinden, dass nicht alle meine Ideen am Handy laufen. Das Puzzle mit Bildern ist ein grundsätzliches Problem - das werde ich wohl auch nicht lösen können. Ich kann das einfach per css abstellen, dann ist auf Handy eben keine Animation. Anders wüsste ich keine Lösung.

[Tommy Herrmann]

Das muss doch aber nicht so aussehen. Damit die Hintergrundbilder nicht verzerren, musst Du die CSS-Anweisung

Code: Alles auswählen

object-fit: cover;

verwenden. Mehr ist es doch nicht

https://www.w3schools.com/css/css3_object-fit.asp

Ich kann immer nicht verstehen, dass Du Fehler stehen lässt als wären die vollkommen normal und Dich dann bereits mit ganz anderen Sachen beschäftigst.

[Volker]

Auch mit object-fit: cover; keine Lösung. Wenn jemand eine findet kann er die mir gerne sagen.
Ich werde den Block eben nicht verwenden und wenn dann schalte ich das für Handy aus, so wie bei meinem Puzzle Block. Da ist auch aus für Handy : https://www.niederastroth.de/puzzle_block.html

So einfach

Hab jetzt meinen 8 Cards Block genommen, der sieht auch am Handy noch gut aus

[Tommy Herrmann]

Na wenn diese CSS es nicht ist:

Code: Alles auswählen

object-fit: cover;

… dann hast Du einen anderen Fehler oder die CSS am falschen Element angewendet.

So leicht sollte man das nicht abtun, denn der Fehler wird sich ja dann weiter und immer wieder einschleichen. Bei den Autos am Puzzle war das ja schon das gleiche Problem.

[Volker]

Ja Tommy das Problem wird auch bei jedem Block kommen, wo Bilder aufgeteilt werden und wieder zusammen gesetzt werden. Handy hat nun mal nur Hochformat und eine beschränkte Größe. Ich hab das schon zig mal getestet und die KI gelöchert usw. DA finde ich keine Lösung um einen Puzzle Effekt ordentlich am Handy darzustellen.

Wenn Dir was einfällt gerne her damit

[Tommy Herrmann]

Die Lösung sollte das sein - am Hintergrundbild.

Code: Alles auswählen

object-fit: cover;

Das sollte doch Deine KI auch richten können. An der neuen Testseite "blocktest" ist das gleiche Hintergrundbild ja nun auch richtig und nicht verzerrt. Da wird dann natürlich eine Menge abgeschnitten, damit das Format stimmig bleibt. Das ist auch richtig und geht nicht anders. Nur verzerrt darf es eben nicht sein.

[Volker]

Warum object-fit hier nicht die Lösung ist
object-fit ist großartig für Galerien oder Porträtfotos in festen Rastern. Da dein Block aber ein "Header" ist, der als Bühne für Text dient, ist background-size: cover flexibler, weil es das Bild immer so beschneidet, dass der Container voll ausgefüllt ist, ohne das Seitenverhältnis zu verändern.

Die "Geheimwaffe": Background-Position
Oft wirkt ein Bild am Handy "verzerrt" oder "falsch", weil das Hauptmotiv (z.B. ein Gesicht oder ein Haus) durch den schmalen Handy-Bildschirm abgeschnitten wird.

Gehe in die mbr-parameters.

Du könntest dort einen Selektor einbauen: Top Center, Center Center, Bottom Center.

Im CSS nutzt du dann: background-position: center center !important;.

Hab ich auch probiert - klappt auch nicht. Also wenn Du eine Lösung hast Tommy dann raus damit