total ........................... $100.00

Discussion in 'HTML' started by WindAndWaves, Nov 20, 2004.

  1. WindAndWaves

    WindAndWaves Guest

    Hi Gurus

    What is the smartest way to make

    item x ....................... $100.00
    item y ............................$2.00
    total ...........................$102.00

    using cascading stylesheets

    TIA

    - Nicolaas
    WindAndWaves, Nov 20, 2004
    #1
    1. Advertising

  2. WindAndWaves

    Nik Coughlin Guest

    WindAndWaves wrote:
    > Hi Gurus
    >
    > What is the smartest way to make
    >
    > item x ....................... $100.00
    > item y ............................$2.00
    > total ...........................$102.00
    >
    > using cascading stylesheets
    >
    > TIA
    >
    > - Nicolaas


    With a table. It's tabular data.

    <style type="text/css">
    .price
    {
    text-align: right;
    }
    </style>

    <table>
    <tr>
    <td>item x</td>
    <td class="price">$100.00</td>
    </tr>
    <tr>
    <td>item y</td>
    <td class="price">$2.00</td>
    </tr>
    <tr>
    <td>total</td>
    <td class="price">$102.00</td>
    </tr>
    </table>
    Nik Coughlin, Nov 20, 2004
    #2
    1. Advertising

  3. in alt.html, WindAndWaves wrote:
    > Hi Gurus
    >
    > What is the smartest way to make
    >
    > item x ....................... $100.00
    > item y ............................$2.00
    > total ...........................$102.00
    >
    > using cascading stylesheets


    IMHO, dotted tabs are not very good idea in net, they look so 1980's, so
    unless you aim 1980 look, think something else.

    Here is couple ways to do it:
    http://www.student.oulu.fi/~laurirai/www/css/examples/dottedtab.html
    http://www.student.oulu.fi/~laurirai/www/css/examples/dottedtab2.html


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Lauri Raittila, Nov 20, 2004
    #3
  4. WindAndWaves

    Kris Guest

    In article <>,
    Lauri Raittila <> wrote:

    > > What is the smartest way to make
    > >
    > > item x ....................... $100.00
    > > item y ............................$2.00
    > > total ...........................$102.00
    > >
    > > using cascading stylesheets

    >
    > IMHO, dotted tabs are not very good idea in net, they look so 1980's, so
    > unless you aim 1980 look, think something else.


    I'd go for a table.

    <table>
    <tr>
    <th><span>item x</span></th>
    <td><span>$100.00</span></td>
    </tr>
    ...
    </table>

    table { width: 100%; }

    td, th {
    color: #000;
    background: url("dots.png") #fff bottom left repeat-x;
    }

    td { text-align: left; }
    th { text-align: right; }

    tr span {
    color: #000;
    background: #fff;
    }

    --
    Kris
    <> (nl)
    Kris, Nov 20, 2004
    #4
  5. in alt.html, Kris wrote:
    > In article <>,
    > Lauri Raittila <> wrote:
    >
    > > > What is the smartest way to make
    > > >
    > > > item x ....................... $100.00
    > > > item y ............................$2.00
    > > > total ...........................$102.00
    > > >
    > > > using cascading stylesheets

    > >
    > > IMHO, dotted tabs are not very good idea in net, they look so 1980's, so
    > > unless you aim 1980 look, think something else.

    >
    > I'd go for a table.


    I assumed table. But now that I think of it, it could be done using pre
    also, but I don't think that is good idea at all.

    [snip]
    > background: url("dots.png") #fff bottom left repeat-x;

    [snip]

    This might degrade bit better than my examples, but you need that image.

    I can't think any sensible way to make the dots look like real dots of
    font, which is disappointing. Unsensible way, works in Opera 7 at least:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <style type="text/css">
    tr, table {display:block;font-family:monospace;}
    td {display:inline;white-space:pre:font-family:monospace;}
    tr td:first-child:after { content:" ......................." }
    tr + tr td:first-child:after { content:" ........................."}
    tr + tr + tr td:first-child:after { content:" ........................"}
    </style>

    <table>
    <tr><td>item x<td>$100.00
    <tr><td>item y<td>$2.00
    <tr><td>total<td>$102.00
    </table>

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Lauri Raittila, Nov 20, 2004
    #5
  6. WindAndWaves

    neredbojias Guest

    Without quill or qualm, Lauri Raittila quothed:

    > I assumed table. But now that I think of it, it could be done using pre
    > also, but I don't think that is good idea at all.


    Why not? Pre is exactly the way I'd do it if I really wanted to spots
    before my eyes.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    neredbojias, Nov 20, 2004
    #6
  7. in alt.html, neredbojias wrote:
    > Without quill or qualm, Lauri Raittila quothed:
    >
    > > I assumed table. But now that I think of it, it could be done using pre
    > > also, but I don't think that is good idea at all.

    >
    > Why not? Pre is exactly the way I'd do it if I really wanted to spots
    > before my eyes.


    Because those dots aren't data, but presentation. I would not like to
    copy such table to somewhere, I cans sort it using normal tools etc.

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Lauri Raittila, Nov 20, 2004
    #7
  8. WindAndWaves

    WindAndWaves Guest

    "Lauri Raittila" <> wrote in message
    news:...
    > in alt.html, WindAndWaves wrote:
    > > Hi Gurus
    > >
    > > What is the smartest way to make
    > >
    > > item x ....................... $100.00
    > > item y ............................$2.00
    > > total ...........................$102.00
    > >
    > > using cascading stylesheets

    >
    > IMHO, dotted tabs are not very good idea in net, they look so 1980's, so
    > unless you aim 1980 look, think something else.
    >
    > Here is couple ways to do it:
    > http://www.student.oulu.fi/~laurirai/www/css/examples/dottedtab.html
    > http://www.student.oulu.fi/~laurirai/www/css/examples/dottedtab2.html
    >
    >
    > --
    > Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>


    Thank you Lauri - that is cool - thank you for reminding me that we are now
    in 2004 - almost 2005. How is finland treating you?
    WindAndWaves, Nov 20, 2004
    #8
  9. WindAndWaves

    neredbojias Guest

    Without quill or qualm, Lauri Raittila quothed:


    > > > I assumed table. But now that I think of it, it could be done using pre
    > > > also, but I don't think that is good idea at all.

    > >
    > > Why not? Pre is exactly the way I'd do it if I really wanted to spots
    > > before my eyes.

    >
    > Because those dots aren't data, but presentation. I would not like to
    > copy such table to somewhere, I cans sort it using normal tools etc.


    Okay.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    neredbojias, Nov 21, 2004
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andreas Klemt
    Replies:
    2
    Views:
    405
    Marina
    Jul 28, 2003
  2. Not4u
    Replies:
    9
    Views:
    1,029
    Not4u
    Feb 27, 2004
  3. Replies:
    8
    Views:
    6,667
    Neredbojias
    Dec 9, 2005
  4. fred
    Replies:
    3
    Views:
    261
    Zifud
    Mar 17, 2005
  5. Replies:
    5
    Views:
    869
Loading...

Share This Page