Flexible Bilder in Tabellen anzeigen
Seit Version 3.6 bindet weblica Bilder auf einer Seite stets so ein, dass diese sich automatisch an den verfügbaren Platz anpassen und zwar unter Wahrung des Seitenverhältnisses, Stichwort responsive Bilder. Das funktioniert in allen aktuellen Browsern zuverlässig, ausser bei Bildern, die sich innerhalb von Tabellen befinden. Da kann es passieren, dass diese Bilder winzig klein erscheinen anstatt in der richtigen Grösse.
In diesem Artikel erfahren Sie, warum das passiert und noch wichtiger, wie Sie das Problem einfach lösen können. Fangen wir mit der Lösung an:
In diesem Artikel erfahren Sie, warum das passiert und noch wichtiger, wie Sie das Problem einfach lösen können. Fangen wir mit der Lösung an:
Die Lösungen
Lösung 1: Table-Layout: fixed
Prädikat: besonders einfach, aber nicht in jedem Fall optimal
Hinterlegen Sie eine der beiden CSS-Regeln im globalen CSS Ihres Projekts (siehe hierzu auch: Eigenen CSS-Code für ein Projekt hinterlegen), je nach dem, welche Lösung für Ihren Fall besser passt:
Hinterlegen Sie eine der beiden CSS-Regeln im globalen CSS Ihres Projekts (siehe hierzu auch: Eigenen CSS-Code für ein Projekt hinterlegen), je nach dem, welche Lösung für Ihren Fall besser passt:
Weisen Sie die Klasse den Text-Absätzen zu, welche Tabellen auf diese Art anzeigen sollen (siehe hierzu: Eigene CSS-Klassen für Absätze verwenden). Alle anderen Text-Absätze stellen die in ihnen enthaltenen Tabellen wie gewohnt dar.
Table-Layout: fixed kurz erklärt
Diese Anweisung ändert die Art und Weise, wie der Web-Browser die Darstellung von Tabellen berechnet: Die Darstellung hängt einzig von der Tabellenbreite und den Breiten der darin enthaltenen Spalten ab, der Inhalt der Zellen wird nicht berücksichtigt. Diese Methode ist sehr schnell und der Browser kann mit der Darstellung der Tabelle beginnen sobald die erste Zeile geladen ist. Ein nicht unbedingt erwünschter Nebeneffekt dieser Methode ist, dass manche Spalten mehr Platz als nötig erhalten. Wenn Sie das stört, nutzen Sie Lösung 2.
Das Warum
Muss man nicht verstehen, darf man aber ;-)
Warum funktionieren flexible Bilder in Tabellen nicht automatisch? Haben die Browser-Hersteller gepatzt oder handelt es sich um einen Fehler in weblica? Weder noch! Der Grund liegt in der Spezifikation von CSS und entspricht dem erwarteten wenn auch nicht dem gewünschten Verhalten.
Flexible Bilder nutzen die max-width-Eigenschaft von CSS und setzen diese auf 100%. Damit sagen wir dem Browser, dass ein Bild maximal so breit werden darf wie das Element, in dem es sich befindet. Diese Eigenschaft funktioniert aber nur für so genannte Block-Elemente und genau das sind Tabellen nicht.
Dieses Problem beschäftigt Web-Designer übrigens schon seit Längerem. Leider gibt es bis heute keine allgemeine Lösung, die in jedem Fall wie gewünscht funktioniert. Doch mit den hier vorgestellten Varianten lässt sich in weblica auch dieses Problem einfach und bedarfsgerecht lösen.
Warum funktionieren flexible Bilder in Tabellen nicht automatisch? Haben die Browser-Hersteller gepatzt oder handelt es sich um einen Fehler in weblica? Weder noch! Der Grund liegt in der Spezifikation von CSS und entspricht dem erwarteten wenn auch nicht dem gewünschten Verhalten.
Flexible Bilder nutzen die max-width-Eigenschaft von CSS und setzen diese auf 100%. Damit sagen wir dem Browser, dass ein Bild maximal so breit werden darf wie das Element, in dem es sich befindet. Diese Eigenschaft funktioniert aber nur für so genannte Block-Elemente und genau das sind Tabellen nicht.
Dieses Problem beschäftigt Web-Designer übrigens schon seit Längerem. Leider gibt es bis heute keine allgemeine Lösung, die in jedem Fall wie gewünscht funktioniert. Doch mit den hier vorgestellten Varianten lässt sich in weblica auch dieses Problem einfach und bedarfsgerecht lösen.