Pit: css: figure nimmt zuviel Platz ein

Beitrag lesen

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