Grow your CSS skills. Land your dream job.

[Solved] A more interesting price display using CSS

  • # December 30, 2009 at 7:42 am

    Hi all,

    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)
    [/list:u]

    Code:
    £2,486

    Here is an image preview of what I want to achieve
    [img]http://macwarehouse.merus.co.uk/test/currency-display.jpg[/img]

    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.

    # December 30, 2009 at 11:42 am

    The vertical align property should set you free!

    Check out this quick demo I put together:

    Code:

    $5,310.79


    # 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">



    Pricing Display

    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.


Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".