nicht angemeldet
Rolf B
Gunnar Bittersmann
marctrix
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Rolf B
Hallo, zu diesem Beispiel habe ich mehrere Fragen.
Wie erreiche ich, dass die gepunkteten box in der roten Box zentriert ist?
Wie erreiche ich, dass sich bei Verkleinerung des Fensters der Text innerhalb der gepunkteten Box bleibt (durch Verkleinerung der Schrift)?
Wenn mann den Viewport weiter verkleinert, erfolgt durch die @media-Angabe die Vertikale Darstellung.
a. Wie erreiche ich, dass der Text in der gepunkteten Box bleibt?
b. Wie erreiche ich, dass die (vertikalen) Abstände zwischen den Texten kleiner werden?
Viel Holz, ich weiß, aber vielleicht kann man mir wenigstens in Teilen weiterhelfen?
Hallo Wolfi,
0a. Webkit-Präfixe für Flexbox braucht man für Safari vor Version 9; ist das noch relevant?
0b. ist das falsche Werkzeug für Abstände. Du willst margin-left und margin-right. Wenn Dich der linke Rand am 1. Element und der rechte Rand am letzten Element stören - das kann man durch geschickten Einsatz der Pseudoklassen steuern (:not(:first-of-type), :not(:last-of-type))
0c. Pixel ist das falsche Maß für responsive Webseiten. Nimm em, insbesondere für den Breakpoint der @media Abfrage
Gib div.hori2verti ein margin:0 auto,
oder setze dafür width:100% und justify-content:center; dann muss aber auch das width:300px von den Kindern weg (diese Breite stört bei der vertikalen Ausrichtung sowieso)
geht irgendwie, weiß aber grad nicht wie. Dazu kommt bestimmt von anderen was.
3a. Das Problem ist .hori2verti>* {width:300px}, der macht die p zu breit. Mach mal einen rahmen um die p, dann siehst Du das. WIE Du das löst, hängt von deinem Gesamt-Anwendungsfall ab. Deswegen habe ich keine Lösung in der Schublade
3b. Die Texte sind <p> Elemente, die haben oben und unten margin. Den kannst Du entfernen.
So. Und nun: BRAUCHST Du diese DIV-Schachtelung so? Das sieht umständlich aus. Was genau sind deine Anforderungen, insbesondere für die Bilder?
Rolf
Hallo Rolf,
erst einmal danke. Die Tipps werde ich im Anschluss testen.
Zu Deiner Frage: Die Überschrift meiner Seiten (eigentlich <h1>) soll enthalten im Extremfall
img test img text img
Manchmal "txt img text" und manchmal "img text img"
Bei einem kleineren Viewport sollen diese in der gleichen Reihenfolge vertikal angezeigt werden (gesteuert durch eine @media-Angabe) .
@@Wolfi
Die Überschrift meiner Seiten (eigentlich <h1>) soll enthalten im Extremfall
img test img text img
Manchmal "txt img text" und manchmal "img text img"
Was sind das für Texte und Bilder?
Das scheint mit nicht so ganz schlüssig zu sein. Was davon ist die eigentliche Überschrift?
LLAP 🖖
Hallo Gunnar
Die Überschrift besteht aus diesen aneinandergereihten Texten und Bildern. Ich würde gerne im Beispiel die Bilder einfügen, aber ich weiß nicht, wo ich diese speichern kann, damit ich sie in codepen einbinden kann.
Hej Wolfi,
Die Überschrift besteht aus diesen aneinandergereihten Texten und Bildern. Ich würde gerne im Beispiel die Bilder einfügen, aber ich weiß nicht, wo ich diese speichern kann, damit ich sie in codepen einbinden kann.
Die hier tun es al Beispiel-Platzhalter https://placeholder.com
Aber das wird die Frage von @Gunnar Bittersmann nicht beantworten, ob es Sinn macht, die Überschrift so aufzubauen.
Womöglich macht hier ein headermit einer h1ein paar Bildern und einem p Sinn, vielleicht auch etwas anderes. Sieht jedenfalls erst mal exotisch aus…
Marc
@@Wolfi
- Wie erreiche ich, dass die gepunkteten box in der roten Box zentriert ist?
Genauso, wie du auch die rote Box zentriert hast.
- Wie erreiche ich, dass sich bei Verkleinerung des Fensters der Text innerhalb der gepunkteten Box bleibt
Mit flex-wrap: wrap.
(durch Verkleinerung der Schrift)?
??
- Wenn mann den Viewport weiter verkleinert, erfolgt durch die @media-Angabe die Vertikale Darstellung.
a. Wie erreiche ich, dass der Text in der gepunkteten Box bleibt?
Hat sich mit flex-wrap: wrap erledigt, oder?
b. Wie erreiche ich, dass die (vertikalen) Abstände zwischen den Texten kleiner werden?
Mit einem geringen Wert für margin.
LLAP 🖖
Hallo,
jetzt sieht es schon besser aus, aber:
Wenn ich "flex-wrap: wrap;" angebe, ist die Anordnung auch bei großem Viewport vertikal.
Wenn ich den Viewport verkleinere, rückt der Text von der Mitte nach links und auch raus aus dem grünen Rahmen. Der Rahmen selbst bleibt mittig!
@@Wolfi
Wenn ich "flex-wrap: wrap;" angebe, ist die Anordnung auch bei großem Viewport vertikal.
Nein. Die Texte werden horizontal angeordnet. Dass sie untereinander stehen, liegt daran, dass du die Box so schmal gemacht hast. Was erwartest du denn, wenn der Text nicht nebeneinander passt?
LLAP 🖖
@@Gunnar, an der Box-Breite ändere ich doch nichts, wenn ich das /* flex-wrap: wrap; */ aktiviere. Wenn es nicht angegeben ist, ist der Text doch horizontal ausgerichtet.
@@Wolfi
an der Box-Breite ändere ich doch nichts, wenn ich das /* flex-wrap: wrap; */ aktiviere. Wenn es nicht angegeben ist, ist der Text doch horizontal ausgerichtet.
Das habe ich auch nicht bestritten. Ich sagte, dass der Text immer noch horizontal ausgerichtet ist, wenn flex-wrap: wrap gesetzt wird. Nur werden die p dann untereinander plaziert; du hast ja width: 300px für die p angegeben, was bei Viewportbreiten unter 1518px breiter ist als die max-width: 20% des div.hori2verti.
Ohne flex-wrap: wrap stehen die p in einer Zeile, und da der Ausgangswert flex-shrink: 1 gilt, werden sie schmaler als 300px dargestellt.
LLAP 🖖
Hallo Gunnar,
danke für den Hinweis. Irgendwie hatte ich einen Blackout. die "width:300px;"-Angabe hatte ich in einem anderen Beispiel gelöscht, nicht aber in dem hier gezeigten.
Jetzt noch eine hoffentlich letzte Frage.
Wenn der viewport groß ist, ist der Abstand zwischen den Texten sehr groß. Kann man erreichen, dass dieser Abstand immer gleich bleibt, z.B. 1em?
Hallo Wolfi,
der Abstand ist groß, weil space-around dafür sorgt, dass der verfügbare Leerraum gleichmäßig links und rechts je Flex-Kind verteilt wird. Bei 3 Kindern wird er also durch 6 geteilt und je 1/6 kommt vor und hinter die <p>.
Du kannst statt dessen justify-content:center nehmen, dann wird der Platz nur außerhalb verteilt und die <p> landen alle in der Mitte. Und denen gibst Du dann einen passenden Margin, damit 1em herauskommt (dazu hatte ich schon was geschrieben). Das musst Du nur so machen, dass der Margin in der senkrechten Darstellung nicht greift oder wieder überschrieben wird (ggf. brauchst Du ein !important), sonst funktioniert dort die zentrierte Ausrichtung nicht.
Allerdings möchte ich auch fragen, ob die 20% Breite des .horiz2verti Containers nötig sind. Die machen es nämlich unnötig kompliziert. Hast Du es schon mal mit inline-flex oder inline-block versucht? Dann wird der Container nämlich genau so groß wie gemäß Inhalt erforderlich. Die Zentrierung in .mittig machst Du dann über ein text-align:center auf dem .mittig Container. Fiddle
Rolf
