[Solved] A more interesting price display using CSS
# December 30, 2009 at 7:42 am
I’m trying to create a more interesting price display using CSS and I need a little help doing it. Anyone feeling helpful? Take the price £2,486.00. I’d like to split the currency symbol from the units (pounds) and the decimals (pence) where the decimals are displays smaller but aligned to the top of the text, almost like a <sup> but without using an actual superscript tag (as it wouldn’t be very semantic).
So far I’ve managed to split out the price into <spans> (I’d like to to keep it inline):
.price" wraps the whole thing
".currency" wraps the actual currency symbol (it can vary on my site between pounds, euros and we’ve the capability for dollars and yen)
".units" are whole pounds, euros, etc
".decimals" are anything after – and including – the decimal point (pence, cents, etc)
Here is an image preview of what I want to achieve
I’ve tried a few combinations but can never seem to get the whole thing aligned to the top. What would be the best way of aligning it cross-browser.
Thank you.# January 8, 2010 at 8:05 am
Thanks for that! That helped a lot.
Developing it further, and using the snippet from http://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/, I came up with a good looking price display. I’ve only tested it in firefox so far – so my apologies if it needs tweeking for other browsers.
And because it’s good to share, the code is:Code:< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This item costs $5,310.79 Dollars.
Like the car sir? That’ll be €587,123.87 Euros please.
Show me the money £12,4680,680.61 Pounds.
My father died recently and left in his will the sum of ¥6,980,499.00 Yen. Please wire over $5,310.79 to my Nigerian bank account and I will gladly share the fund with you. Classic.
You must be logged in to reply to this topic.