css: figure nimmt zuviel Platz ein

[Pit]

Hallo Forum,

in einem Unibeispiel meiner Holden nehmen die figure-Elemente in der Vertikalen sehr viel Platz ein, was daran liegen sollte, dass der Platz für figcaption vertical hinzuaddiert wird.

Warum ist das so und wie bindet man das figcapion besser ein, sodaß sie innerhalb des Image liegen und dennoch die Images vertical nicht meilenweit auseinander liegen?

Pit

[MrMurphy1]

Hallo

Grundsätzlich sollen Grafiken nur so groß sein wie sie maximal angezeigt werden sollen. Grafiken mittels CSS auf eine Maximalgröße zu verkleinern führt immer mal wieder zu Problemen. Zudem wird die Datengröße für die Besucher unnötig groß.

Die Abstände der figure-Elemente werden mit margin festgelegt.

Die figcaption-Elemente werden mittels position an den unteren Rand des figure-Elements gelegt. Feste Höhen, auch mittels line-height, sollten unterbleiben. Die Höhe des figure-Elements wird wie üblich durch den Inhalt bestimmt. So machen auch Zeilenumbrüche keine Probleme.

Der große Abstand kommt durch das "position: relative" bei figcaption. Dadurch kann zwar das Element verschoben werden, sein Platz bleibt im Gegensatzu zu "position: absolute" aber reserviert und wird deshalb angezeigt.

Heißt: Du willst mittels CSS zuviel bestimmen und hinderst dadurch den Browser seine Arbeit korrekt zu verrichten.

Gruss

MrMurphy

[Pit]

Hi McMurphy,

Grundsätzlich sollen Grafiken nur so groß sein wie sie maximal angezeigt werden sollen. Grafiken mittels CSS auf eine Maximalgröße zu verkleinern führt immer mal wieder zu Problemen. Zudem wird die Datengröße für die Besucher unnötig groß.

Schon klar, aber hier gehts ja um ein Uniprojekt. Bei mir im Produktivbetrieb habe ich hierzu eine php-Klasse geschrieben, die mittels ImageMagick Thumbnails erstellt und diese vorschiebt, dn hast Du dieses Problem nicht. Aber hier solls wohl so sein...

Die Abstände der figure-Elemente werden mit margin festgelegt.

Stehen aktuell auf 0.

Die figcaption-Elemente werden mittels position an den unteren Rand des figure-Elements gelegt.

Wenns denn mal so wäre... Ich bekomm den nur unterhab des Figure-Elements hin und muß ihn dan nach oben ins Bild schieben.

Feste Höhen, auch mittels line-height, sollten unterbleiben. Die Höhe des figure-Elements wird wie üblich durch den Inhalt bestimmt. So machen auch Zeilenumbrüche keine Probleme.

Und was, wenn ich den "figcaption-Layer" etwas höher haben möchte, weils besser ausschaut?

Der große Abstand kommt durch das "position: relative" bei figcaption. Dadurch kann zwar das Element verschoben werden, sein Platz bleibt im Gegensatzu zu "position: absolute" aber reserviert und wird deshalb angezeigt.

Ja, so habe ich mir das vorgestellt, wenn auch nicht gewünscht.

Heißt: Du willst mittels CSS zuviel bestimmen und hinderst dadurch den Browser seine Arbeit korrekt zu verrichten.

Schönes Fazit, aber wie bekomme ich denn hin, was ich möchte?

Pit

[MrMurphy1]

Hallo

Und was, wenn ich den "figcaption-Layer" etwas höher haben möchte, weils besser ausschaut?

Padding-top und padding-bottom verwenden.

Schönes Fazit, aber wie bekomme ich denn hin, was ich möchte?

Ich würde das folgende CSS verwenden (statt flexbox heißt bei mir die umgebende Klassse grafiken):

      * {
         min-width: 1px;
      }
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0;
      }
      .grafiken {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
      .grafiken figure {
         position: relative;
         margin: 0.5rem;
      }
      .grafiken img {
         width: 250px;
         border-radius: 15px;
      }
      .grafiken figcaption {
         background: rgba(0, 0, 0, 0.5);
         color: white;
         text-align: center;
         position: absolute;
         bottom: 0;
         width: 100%;
         padding: 0.3rem 0rem;
         border-bottom-right-radius: 15px;
         border-bottom-left-radius: 15px;
      }

Bei bplaced.net laufen wohl grade größere Umbauarbeiten, deshalb kann es sein dass meine Testseite nicht immer aufrufbar ist:

Testseite

Gruss

MrMurphy

[Pit]

Hallo McMyrphy,

Ich würde das folgende CSS verwenden (statt flexbox heißt bei mir die umgebende Klassse grafiken):

Wow, das ist aber eine feine lösung! Gefällt mir sehr sehr gut. Neben dem "1000Dank" an Dich hätte ich noch eine Bitte: Kannst du mir noch 2-3 Worte zu Deiner Lösung sagen? ich durchblicke die, glaub ich, noch nicht so recht 😟

Und noch eine Frage: Wenn auf eine gerade Anzahl Bilder je Zeile geschaltet wird, ist das letzte (überzählige) Bild zentriert. Ist es möglich, alle Bilder zu zentrieren, aber ein ggf. überzähliges Bild linksbündig zu machen?

Pit

[marctrix]

Hej MMurphy,

ich würde hier eine Lösung mit grid umsetzen, da lassen sich auch mehrere Elemente auf dieselbe Stelle legen.

Habe gerade keine Zeit das zu machen, dürfte aber deutlich weniger Code benötigen:

Grid mit zwei Zeilen: das Bild in die erste und zweite Zeile, die figcaption nur in die zweite Zeile.

Marc

[MrMurphy1]

Hallo

Habe gerade keine Zeit das zu machen, dürfte aber deutlich weniger Code benötigen

Das vermag ich nicht zu erkennen. Für die Anordnung im umgebenden Container (figure) von img und figcaption verwende ich zur Zeit 4 CSS-Anweisungen:

.grafiken figure {
   position: relative;
}
.grafiken figcaption {
   position: absolute;
   bottom: 0;
   width: 100%;
}

Das restliche CSS hat damit nichts zu tun, sondern erfüllt andere Aufgaben.

Mit CSS-Grid wird das CSS viel aufwändiger.

Zunächst muss in figure das Grid erstellt werden.

Dann muss figure dort eingefügt werden.

Dann muss figcaption dort eingefügt werden.

Ist das erledigt tauchen zwei zusätzliche Probleme auf:

1. Die untere Zelle nimmt die Hälfte der Höhe vom Grid ein, muss also noch so weit wie möglich nach unten geschoben werden. Dabei darf der Text auch bei unterschiedlicher Zeilenanzahl (Höhe) nicht nach unten aus dem Grid geschoben werden.

2. In der Realität wird in figcaption kaum Inhalt wie "Test 1", "Test 2" und so weiter stehen.

In meinem Beispiel ich ich deshalb zu einem Bild einen längeren Text mit Zeilenumbruch eingefügt. So ein Zweizeiler wird sich bei vielen Bildern in der Praxis kaum vermeiden lassen. Bei der Darstellung mit CSS-Grid erfolgt aber kein Zeilenumbruch, so dass der Text nach rechts aus dem Grid herausragt. Dies müsste auch noch unterbunden werden.

Meine Kenntnisse mit CSS-Grid sind nicht so ausgereift, dass mir dazu Lösungen einfallen. In jedem Fall ist dazu aber zusätzliches CSS erforderlich.

Ich lasse mich gerne überraschen, aber eine Lösung mit CSS-Grid zur Anordnung von img und figcaption (und genau darum geht es bei Pits Frage) erscheint mir deutlich aufwändiger als die bisherigen 4 CSS-Anweisungen.

Die Anordnung der figure-Elemente mit Flexbox kann natürlich durch CSS-Grid ersetzt werden. Das ist aber ein anderes Feld und hat aber mit Pits ursprünglicher Frage nichts zu tun.

Gruss

MrMurphy

[marctrix]

Hej MrMurphy1,

Hallo

Habe gerade keine Zeit das zu machen, dürfte aber deutlich weniger Code benötigen

Für die Anordnung im umgebenden Container (figure) von img und figcaption verwende ich zur Zeit 4 CSS-Anweisungen:

.grafiken figure {
   position: relative;
}
.grafiken figcaption {
   position: absolute;
   bottom: 0;
   width: 100%;
}

Da ist die Grid-Lösung tatsächlich etwas länger, eine Zeile um genau zu sein:

figure {
  display: grid;
}
img {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
figcaption {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

Mit CSS-Grid wird das CSS viel aufwändiger.

Naja…

Zunächst muss in figure das Grid erstellt werden.

Dann muss figure dort eingefügt werden.

Dann muss figcaption dort eingefügt werden.

Ist das erledigt tauchen zwei zusätzliche Probleme auf:

Ich lasse mich gerne überraschen, aber eine Lösung mit CSS-Grid zur Anordnung von img und figcaption (und genau darum geht es bei Pits Frage) erscheint mir deutlich aufwändiger als die bisherigen 4 CSS-Anweisungen.

Da unterschätzt du grid… 😉

Hier ein Link zu einem Beispiel für figure, img und figcaption-Positionierung mit CSS Grid.

Was ich von der Grid-Lösung erhofft hätte: der Text wird niemals das gesamte Bild überblenden, egal wie lang der werden mag.

Stimmt aber nicht. Wenn @Gunnar Bittersmann das erklären könnte, würde ich mich freuen. Ich dachte das Bild ist in Zeile eins und zwei, der Text nur in Zeile zwei und er dürfte daher nie über das gesamte Grid gehen?!?

Marc

[MrMurphy1]

Hallo

Stimmt, die Lösung funktioniert. Auch wenn du unterschlagen hast, dass du dem figure-Element eine width-Angabe mit auf den Weg geben musstest, die bei meiner Lösung nicht erforderlich war. Das ist aber keine wirkliche Kritik, eher ein Hinweis.

Gruss

MrMurphy

[marctrix]

Hej MrMurphy1,

Stimmt, die Lösung funktioniert. Auch wenn du unterschlagen hast, dass du dem figure-Element eine width-Angabe mit auf den Weg geben musstest, die bei meiner Lösung nicht erforderlich war. Das ist aber keine wirkliche Kritik, eher ein Hinweis.

Ja, aber das liegt nicht am Grid, sondern daran, dass ich Bildbreiten immer auf 100% setze, wenn die in einem figure sind, dann kann ich die Bilder über ihren Container steuern, was für die responsive Umsetzung mehr Möglichkeiten eröffnet.

Deine Lösung funktioniert, weil du die bretenangabe dem Bild gegeben hast. Wenn man untereinander stehende Bilder gleich breit haben möchte, muss man das irgendwo angeben, egal ob man Grid oder was anderes verwendet.

Marc