Skip navigation
mykelson
mykelson Calculating status...
Currently Being Moderated

Evenly or justified spaced pricing tier using (...)

Aug 3, 2012 10:22 AM

Hello,

 

  I am attempting to set up a very basic (to some) pricing tier if you will. What I am trying to accomplish in Dreamweaver:

http://postimage.org/image/6qzq84hpt/

I can not seem for the life of me to adequtly create jusitifed text were the (...) will evenly space everything out into a block of text like the image example above. Any help would be greatly apprecaited!

 

If any further info is needed on my end, please let me know.

304 Views   3 Replies   Latest reply: MurraySummers, Aug 3, 2012 11:36 AM
 
Replies
  • MurraySummers
    Currently Being Moderated
    1. MurraySummers,
    Aug 3, 2012 10:27 AM   in reply to mykelson
    Report

    1.  Use a 2-column table for this.

    2.  Make a background image for the left cell that is just the dots (have 3 or 4 of them on the image)

    3.  Have your CSS specify that image as a background image for the cell that tiles horizontally and use the background-position style to adjust its vertical location so that the repeat is inline with the rest of the content

    4.  Put your price into the right column and make it right aligned with CSS

     

    That should do the trick.

     
    |
    Mark as:
  • mykelson
    Currently Being Moderated
    2. mykelson,
    Aug 3, 2012 11:00 AM   in reply to MurraySummers
    Report

    Thank you for your reply! Is it possible for you to provide an example of the script for me to better understand?

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    3. MurraySummers,
    Aug 3, 2012 11:36 AM   in reply to mykelson
    Report

    Your CSS would be something like this -

     

    table.prices td { background-image:url(images/dots.png);background-repeat:repeat-x;widt h:300px; }

    table.prices td + td { background-image:none;width:75px;text-align:right; }

    /* this removes the dots from the 2nd column cells */

     

    Your HTML would be something like this -

     

    <table class="prices">

      <tr>

       <td>Nenita</td>

        <td>$6.75</td>

      </tr>

    ...

    </table>

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points