Suche mir bei CSS wiedermal einen Wolf - oder ich steh' einfach nur auf der Leitung.
Ich will zahlreiche <div>s mit Rahmen darstellen, die nach Fensterbreite automatisch umlaufen. Ist erledigt.
Darin enthalten sind das Vorschaubildchen und ein Kommentar. Da nun aber bei einer Auflistung von Zillionen Bildchen diese sowohl im Hoch- wie im Querformat vorkommen können (wobei das Seitenverhältnis frei ist und die größte Abmessung 160px beträgt), wird ein Quadrat mit 160px Seitenlänge reserviert. Dieses Bildchen ist anklickbar und führt zu einem Bild im Vollformat (hier wegen evtl. Bandbreitenbeschränkung bei Euch auch nur ein anderes Vorschaubild). Auch dies ist erledigt.
Jetzt kommen wir nur noch zur Positionierung des Bildes mit dem umschließenden Anker im <div> der zweiten Ebene, also mit 160x160px Größe. Das Bild im Hochformat wird korrekt zentriert, das im Querformat aber nicht (es sollte auf halber Höhe dargestellt werden). Offenkundig funktioniert das vertical-align: middle; nicht.
Weiß jemand Rat, wie ich das allein mit CSS hinbekomme, aber nach Möglichkeit auf calc() verzichte? Mit calc() bräuchte ich attr(height), was bei mir aber nicht funktioniert. Ich verwende Opera 11.61 und Firefox 11. Hierauf soll die Lösung zumindest funktionieren. JavaScript ist absolut keine Option! Auch die Positionierung per PHP in den HTML-Quelltext einzufügen, ist keine saubere Sache. Es wird doch wohl eine Lösung in CSS geben?
Gruß - WPö
Ich glaube nur der Statistik, die ich selbst gefälscht habe!
Meine Netzpräsenz: WPö.de
PB5.31 auf LMDE und Pentium T7200 2,00GHz, 4GB DDR2, ATI X1400.
Leider ist das ja nicht, was ich suche. CSS wurde ja gerade wegen der Unart eingeführt und ausgebaut, die Tabellen für die Gestaltung bedeuten. Einige wenige Spezialfälle werden noch immer nicht mit CSS abgedeckt, aber ich kann mich nicht daran erinnern, daß dies hier der Fall wäre. Selbstverständlich ist mir klar, daß es mit einer Tabelle klappen würde, aber ich möchte bei CSS bleiben. Es wird doch eine Möglichkeit geben, dieses vertical-align zum Laufen zu bewegen?
Gruß - WPö
Ich glaube nur der Statistik, die ich selbst gefälscht habe!
Meine Netzpräsenz: WPö.de
PB5.31 auf LMDE und Pentium T7200 2,00GHz, 4GB DDR2, ATI X1400.
Ha! Habe jetzt ebenfalls eine Lösung gefunden, die der Deinen gleichkommt, bin aber 5 Minuten zu spät. Danke vielmals, Derren! Mit vertical-align darf sich das W3C nochmals 'was ausdenken, daß man nicht display: table-cell; nutzen muß. So ein Vorgehen halte ich für eine Zweckentfremdung. Aber gut, es funktioniert erstmal.
Gruß - WPö
Ich glaube nur der Statistik, die ich selbst gefälscht habe!
Meine Netzpräsenz: WPö.de
PB5.31 auf LMDE und Pentium T7200 2,00GHz, 4GB DDR2, ATI X1400.
vertical-align ist für Inline-Elemente gedacht zum Ausrichten
anhand der Basislinie. Wenn du das umrahmende DIV weg lassen
würdest kämst du der Sache zumindest näher. So ist
vertical-align in in der klassischen Bedeutung nicht für dich von
Bedeutung. display: table-cell mag zwar nach nem "hack" klingen,
ist aber so gewollt und im Standard integriert ... zudem die
einfachste mir bekannte Lösung mit normalen CSS.
