nicht angemeldet michaah
Rolf B
michaah
Rolf B
JürgenB
Gunnar Bittersmann
Bitte im FF-inspector in irgend einem emulierten Smartphone anschauen (weil es sonst (A) wegen der Größe nervt, (B) nur der FF, nicht aber der Chomium den Fehler mit einem "#text x * y" unter bestimmten Umständen kennzeichnet.)
Bei meiner Suche nach der Ursache für unterschiedliche Abstände bin ich heute auf zwei unterschiedliche Ursachen gestoßen, die augenscheinlich nichts miteinander zu tun haben.
Mir ist schon klar, dass Text nun mal angezeigt wird, aber diese Auswirkung hat mich doch überrascht:
8 blaue Quadrate:
Die erste Unstimmigkeit betrifft einen horizontalen Zusatzabstand:
Die obersten zwei Quadrate sind 49% breit und passen nebeneinander, 50% klappt nicht nebeneinander(siehe die nächsten 2 blauen Quadrate), sondern sie werden untereinander angeordnet. Rundungsfehler .... dachte ich. (Ist es aber nicht).
Die zwei Quadrate 5 und 6 haben den exakt gleichen Quellcode mit der einzigen Ausnahme des " " (vergl. Zeilen 68 und 75). Dieser Whitespace verhindert das nebeneinander platzieren der Bilder, kein Rundungsfehler.
Im FF inspektor wird dies aber nur im Fall der obersten beiden Quadrate angezeigt wenn es diesen " " gibt (wenn man den whitespace auch hier herauslöscht wird natürlich dieser Zusatzabstand im FF inspector nicht angezeigt, er ist aber da, wie das Beispiel mit 50% Bildbreite zeigt. Nur wird es in diesem Beispiel dann nicht einmal mehr angezeigt!
Die letzten beiden Quadrate geliche Quellcode wie die ersten beiden, ur Leerzeichen durch Zeilenumbruch ersetzt.
Muss man also Quellcode unleserlich zusammenquetschen um diesen Fehler zu vermeiden? Wie kann man denn dann html strukturieren? Vermutlich muß man damit leben ... aber nervig ist das schon.
Die zweite Unstimmigkeit betrifft einen vertikalen Zusatzabstand:
Ganz einfache Frage: Warum ist das aside Element höher als breit, wo doch der Inhalt quadratisch ist (siehe weißen Balken unter blauem img)? Ich hatte schon befürchtet dass das nun auch irgend ein whitespace ist, aber ich konnte das durch Zusammenziehen des codes nicht eliminieren. Läßt sich das verhindern?
Bei Desktopversionen einer Webseite mag das alles vernachlässigbar sein, in Smartphone viewports nervt das aber schon wenn Abstände leicht, aber erkennbar unterschiedlich sind obwohl sei es nicht sein sollten. Das war ja auch der Grund meiner Suche ...
Gruß
Michael
Hallo michaah,
das Problem ist die inline-Formatierung. Deine Quadrate sind inline-block, d.h. nach außen hin inline-Elemente. Beim Formatieren von inline-Elementen wird white-space nicht eliminiert.
Wenn Du ein Layout brauchst, bei dem Whitespace wegfällt, brauchst Du sehr wahrscheinlich etwas wie Flexbox oder Grid.
Um Dir näheres raten zu können, müsste man deine Seite genauer kennen.
Wenn Du 8 Quadrate in 4 Reihen anordnen willst, und jedes Quadrat 50% der Bildschirmbreite haben soll, kannst Du ein Grid mit einem Column-Template von 1fr 1fr verwenden, oder eine Flexbox mit Wrap. Allerdings sieht das dann im Querformat mutmaßlich nicht so aus wie Du willst. Aber da kannst Du ggf. mit @media (orientation: landscape) { ... } etwas erreichen.
Rolf
Hallo michaah,
das Problem ist die inline-Formatierung. Deine Quadrate sind inline-block, d.h. nach außen hin inline-Elemente. Beim Formatieren von inline-Elementen wird white-space nicht eliminiert.
Danke.
Ok, das ist vor Allem eine Erklärung, die a) nachvollziehbar ist und b) schon auch Sinn macht. Zudem steht es nicht grundsätzlich einer Strukturierung des html im Weg. Es heißt allerdings doch, dass so manches Abstandsproblem durch strukturierenden whitespace verursacht wird den man nicht so einfach entdeckt ...
Wenn Du ein Layout brauchst, bei dem Whitespace wegfällt, brauchst Du sehr wahrscheinlich etwas wie Flexbox oder Grid.
Naja, oder ich klebe den Kram ohne whitespace wie gezeigt aneinander. Ich hatte mir Grid angeschaut, aber da schwirrt mir immer noch der Kopf und es ist nach wie vor mehr try and error als dass ich verstünde wie das detail für detail zusammenwirkt.
Um Dir näheres raten zu können, müsste man deine Seite genauer kennen.
Das wäre zwar sicherlich das einfachste, aber ich kann, will und werde nicht meine Unzulänglichkeiten besprechen im Zusammenhang mit dem Inhalt und der URL des Auftraggebers. Das geht einfach nicht. Wenn es gar nicht anders geht baue ich das halt nach ... nur das kostet auch Zeit und Energie. So mache ich das halt wie es mir vermittelbar erscheint.
Ich will 4 Quadrate je nach viewport entweder als 4x1 Quadrat in einer Spalte oder als 2 Reihen mit je 2 Quadraten darstellen. Ganz vielleicht auch als Reihe mit 4 Quadraten nebeneinander.
An sich tut es ja mein code, vor allem klappt das auch mit der Skalierung, das whitespace Problem war nicht was mich vorrangig genervt hatte, sondern das Problem, dass das aside höher als breit ausfällt und daher ein Zusatzabstand nach unten entsteht. Und da hätte ich gerne verstanden wie ich dies verhindern kann. Das war der Ausgangspunkt der Untersucheung ... Das scheint ja kein whitespace Problem zu sein. Hast du dafür eine Erklärung?
Ich will 4 Quadrate je nach viewport entweder als 4x1 Quadrat in einer Spalte oder als 2 Reihen mit je 2 Quadraten darstellen. Ganz vielleicht auch als Reihe mit 4 Quadraten nebeneinander.
Auge.container {
display: grid;
grid-template-columns: repeat(var(--i, 1), 1fr);
}
@media (min-width: 20em) {
.container {
--i: 2;
}
}
@media (min-width: 40em) {
.container {
--i: 4;
}
}
Hallo djr,
sehr schön.
Falls es auch auf dem IE funktionieren soll, braucht man noch die Version mit -ms Prefix. An die offizielle Doku dazu ist allerdings nicht mehr heranzukommen, da Microsoft "alten Kram" systematisch depubliziert, statt ihn für Leute zu behalten, die Legacy pflegen müssen. Das ist absoluter Irrsinn. Sucht man beispielsweise -ms-grid-columns auf MSDN, wird man auf grid-template-columns bei Mozilla weitergeleitet. Dabei war das -ms Prefix noch bis Edge 15 erforderlich. CSS-Tricks to the rescue!
Rolf
Hallo Rolf,
… da Microsoft "alten Kram" systematisch depubliziert, …
Microsoft will wohl auf Biegen und Brechen den alten Kram loswerden. Die wollen nur noch Windows 10 und den aktuellen Edge unterstützen. Da die User aber in der Tradition hängen bleiben, versuchen sie es jetzt wohl über die Entwickler.
Gruß
Jürgen
Falls es auch auf dem IE funktionieren soll, …
… dann auch auf die Custom Properties und die repeat()-Funktion verzichten – ist dann halt mehr Code, geht aber.
@@Rolf B
sehr schön.
Bis auf das --i. Da darf es schon ein sprechender Name sein.
Falls es auch auf dem IE funktionieren soll, braucht man noch die Version mit -ms Prefix.
Nein, braucht man nicht. Alle 4 Boxen untereinander funktioniert bestens im IE. Mehr muss man nicht tun.
😷 LLAP
Hallo Gunnar,
mein Minus. Aus Gründen.
Rolf
@@Rolf B
mein Minus. Aus Gründen.
Progressive enhancement zu verstehen ist halt nicht jedem vergönnt.
😷 LLAP
Hallo Gunnar,
"die gewünschte Darstellung wird nicht erreicht" und "funktioniert bestens" gleichzusetzen ist auch nur ausgewählten Menschen vergönnt.
Rolf
@@Rolf B
"die gewünschte Darstellung wird nicht erreicht" und "funktioniert bestens" gleichzusetzen ist auch nur ausgewählten Menschen vergönnt.
Ich konnte im Thread nirgends den Wunsch „die Anordnung von 2 bzw. 4 Boxen nebeneinander soll unbedingt auch im IE so sein“ herauslesen.
Und wenn, dann wäre es angebracht, seine utopischen Wünsche an die Realität anzupassen.
Lohnt es, den Aufwand zu betreiben, um eine an sich funktionierende Seite für (je nach Zielpublikum etwas mehr oder weniger als) 1…2% der Nutzerschaft etwas aufzuhübschen?
Der Webservice Do websites need to look exactly the same in every browser? sollte bei der Entscheidungsfindung hilfreich sein.
😷 LLAP
zu 1.: Was @Rolf B schon schrieb.
zu 2. img ist ein Inline-Element und steht somit auf der Grundlinie des Textes. Der "weiße Balken" darunter ist der Bereich der Unterlänge. Um das Bild auf den Zeilenboden zu stellen, genügt ein vertical-align: bottom;.
Danke! Das ist ein guter Tagesabschluß 😉
Hallo
zu 1.: Was @Rolf B schon schrieb.
zu 2.
imgist ein Inline-Element und steht somit auf der Grundlinie des Textes. Der "weiße Balken" darunter ist der Bereich der Unterlänge.
Korrrrrekt.
Um das Bild auf den Zeilenboden zu stellen, genügt ein
vertical-align: bottom;.
Das genügt aber nur dort, wo vertical-align überhaupt funktioniert (z.B. Tabellenzellen). Es geht auch mit selektor-für-betroffene-bilder { display: block; }.
Tschö, Auge
Das genügt aber nur dort, wo vertical-align überhaupt funktioniert (z.B. Tabellenzellen).
Die MDN web docs beschrieben es am besten:
The vertical-align property can be used in two contexts:
- To vertically align an inline element's box inside its containing line box. For example, it could be used to vertically position an
<img>in a line of text- To vertically align the content of a cell in a table
Note that
vertical-alignonly applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements.
Ersteres ist bei <img> standardmäßig gegeben. Und wenn das Bild z.B. ein Grid-Child ist, dann braucht es weder ein vertical-align, noch eine extra display-Beschreibung (außer um Browser-Bugs zu fixen).
In Summe ist ein img {vertical-align:bottom;} der bestmögliche CSS-Reboot, wenn man die Unterlänge nicht sehen will.