float + vertical-align

[Quetschi]

Hallo,

folgendes html

<p>
          <span class="beschreibung">pro Person ab</span>
          <span class="preis">290,- EUR</span>
</p>

css dazu

.preis
{
	float:right;
	color:#882931;
	vertical-align:baseline;
        font-size:140%;
}

.beschreibung
{
	vertical-align:baseline;
}

Das Problem ist, das ich aufgrund der unterschiedlichen Schriftgrößen für Beschreibung und Preis die vertikale Ausrichtung auf baseline stellen möchte weils einfach am schönsten aussieht wenn die Texte auf einer gemeinsamen Grundlinie stehen.

Das ganze klappt aber nur, solange ich den preis nicht nach rechts floate - irgendwie ja auch logisch, weil das Element ja dadurch aus dem Textfluss genommen wird.

Meine Frage nun:
Gibts da nen Workaround oder ähnliches dazu? Oder lässt sich das gar nicht erreichen?

Gruss
Quetschi

[RelaxAlien]

evtl auf css4you.de

[Quetschi]

Auf css4you.de hab ich mich natürlich schon rumgetrieben - alle Beispiele dort sind aber ohne float. Beim googlen findet man auch teilweise in der Auflistung schon sowas wie

...vertical-align (nur bei float:none)...

was mich nicht gerade zuversichtlicher macht.

Also falls irgendjemand nen Workaround für sowas kennt: Her damit

[wahsaga]

Re: float + vertical-align

Original geschrieben von Quetschi
Das ganze klappt aber nur, solange ich den preis nicht nach rechts floate - irgendwie ja auch logisch, weil das Element ja dadurch aus dem Textfluss genommen wird.

Eben - und durch die dadurch entstehende "eigene Zeile" mit eigener Schriftgröße hast du also zwei unterschiedliche Baselines, weil unterschiedliche Zeilenhöhen - also selbst wenn du denn Text mittels vertical-align darauf ausrichtest, bringt das nicht das gewünschte.

Ich würde also versuchen, zunächst mal beide spans per line-height auf gleiche Zeilenhöhe zu bringen, dann sollte es m.E. auch mit dem vertical-align:baseline wie gewünscht klappen.
(z.B. für den span mit "normaler" Schriftgröße line-height:140%, und für den mit font-size:140% line-height:100% - das sollte dann ja für beide die gleiche Zeilenhöhe ergeben.)

[Quetschi]

Hallo,

thx, leider hats damit auch ned so ganz funktioniert - egal welche der gegebenen Möglichkeiten zur Schriftgrößenformatierung (%, em, px...) ich verwende - der Versuch die line-height damit zu vereinheitlichen scheint wirkungslos zu bleiben.

Ich hab aber momentan trotzdem ein akzeptables Ergebnis bekommen, indem ich für den span mit der kleineren Schrift eine deutlich größere line-height angebenen hab, als für den span mit der größeren Schrift (ja, ich hab für den kleineren span sowieso erst einen höheren Wert angegeben, damit er praktisch auf gleichem Level mit dem größeren wäre). Damit landet bei IE, FF, Opera und Netscape alles schön auf einer Grundlinie.

Evtl. liegt das aber auch am restlichen html/css, dass es mit der Formatierung auf gleiche Zeilenhöhe ned klappt. Bei Gelegenheit teste ich es nochmal mit komplett jungfräulichem html/css.

Gruss
Quetschi