[TYPO3-german] css_styled_content imgtext vertikale Ausrichtung Text/Bild

JoH asenau info at cybercraft.de
Tue May 19 21:23:37 CEST 2009


> kann mir jemand einen Tipp geben, wie ich in einem textpic-Element von
> css_styled_content beim Einfügen eines Bildes in den Fließtext (rechts
> oder links) Bild und Text oben bündig anzeigen lassen kann?
>
> Herzlichen Dank schon mal vorab.

Wenn Du mit bündig meinst, daß Text und Bild sowas wie eine gemeinsame
"Oberkante" haben sollen, lautet die Antwort: Das geht im IE nur bedingt und
im Firefox noch weniger, weil der fixe Schriftgrößen ignoriert.

Grund: Schrift wird anhand der line-height an ihrer Grundlinie ausgerichtet
und nicht an der Oberkante. Du könntest nun die line-height reduzieren,
damit die Oberkante bündig wird, damit würdest Du aber gleichzeitig auch den
Zeilenabstand des gesamten Blocks reduzieren. vertical-align bringt hier
üblicherweise keinen Erfolg, weil das dazu dient Elemente an der Schrift
auszurichten und nicht umgekehrt. Da sich die Schrift in einem eigenen
DIV-Container befindet, kann man das Bild nicht daran ausrichten.

Die einzige Option wäre, den Block mit negativer margin-top um n Pixel nach
oben zu verschieben. Das bringt aber auch nur dann was, wenn die
Schriftgröße fix ist. Im IE hättest Du damit schon gewonnen, weil der sich
bei fixen Größenangaben an den Standard hält und nicht skaliert. Im Firefox
funktioniert das nur, wenn der User die Schriftgröße nicht variiert, denn
sämtliche FF-Versionen scheren sich nicht wirklich um den Standard und
skalieren munter drauflos.

Die neuesten Versionen der Browser skalieren dann wieder die gesamte Seite
inklusive Bildern, was Opera schon seit einigen Jahren tut, dann bist Du mit
negativer margin-top bei fixer Schriftgröße wieder vorn. Bei variablen
Schriftgrößen könntest Du allerhöchstens versuchen, margin-top mit einem
negativen Wert für em zu belegen. Dabei kann es dann allerdings auch wieder
Rundungsfehler geben.

Vielleicht ist es doch besser einfach drauf zu verzichten und hinzunehmen,
daß man im Web nicht alles umsetzen kann, was man vom Print her gewohnt ist
;-)

HTH

Joey

-- 
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your gob sometimes!)
Dieter Nuhr, German comedian
Twitter: http://twitter.com/bunnyfield
Xing: http://contact.cybercraft.de
T3 cookbook (2nd edition): http://www.4any1.de
TYPO3 Schulung: http://workshops.eqony.com




More information about the TYPO3-german mailing list