19 Replies Latest reply on Jan 2, 2016 12:59 PM by osgood_

    Lining up text - dollar amounts

    slalemand

      Hi. I'm trying (real hard), to work on a web site, and right now I can't figure out how to line up dollar amounts.

       

      This is my code (which I didn't do, Dreamweaver did for me - somehow).

       

      What I would like is for the dollar amounts to line up even on the right-hand side

       

      This is what it looks like when I view in the web browser

       

      pricinglist.jpg

       

      ___________

       

         </div>

       

       

      <ul>

      <li> Sportsman:                                $580  </li>

      <li> Sportsman Touring:          $630  </li>

      <li> RZR Side by Side:            $710  </li>

      </ul>

       

       

      </div>

       

      _________

       

      Skip

        • 1. Re: Lining up text - dollar amounts
          osgood_ Level 8

          Use a definition list:

           

          <!DOCTYPE html >

          <html >

          <head>

          <meta charset="UTF-8" />

          <title>Definition List</title>

          <style>

          dl {

          width: 30%;

          margin: 0;

          padding: 0;

          }

          dt {

          width: 60%;

          margin: 0;

          padding: 0;

          float: left;

          }

          dd {

          margin: 0;

          padding: 0;

          }

           

          </style>

          </head>

           

          <body>

           

          <dl>

          <dt>Sportsman</dt>

          <dd>$580</dd>

          <dt>Sportsman Touring</dt>

          <dd>$630</dd>

          <dt>RZR Side by Side</dt>

          <dd>$710</dd>

          </dl>

          </body>

          </html>

          1 person found this helpful
          • 2. Re: Lining up text - dollar amounts
            slalemand Level 1

            Great, thank you.

             

            So if I was to copy and paste this as you have it, it would look right? I ask, because I did, but it didn't paste as you have it written, so do I write is as it is and will that fix the issue, and do I do it the same for each category (changing the text to the right text)?

            • 3. Re: Lining up text - dollar amounts
              slalemand Level 1

              Ok, so I'm working with the code, and have it coping the same as you have it typed, but the dollar amounts are showing up under the description.

               

              Do I delete this, and insert your code to have it work right? Or do I insert your code above this?

               

              Yes, I am a beginner, sorry

               

              _________

               

              <ul>

              <li> Sportsman:                   $580  </li>

              <li> Sportsman Touring:          $630  </li>

              <li> RZR Side by Side:            $710  </li>

              </ul>

               

              ______________

              • 4. Re: Lining up text - dollar amounts
                osgood_ Level 8

                slalemand wrote:

                 

                Great, thank you.

                 

                So if I was to copy and paste this as you have it, it would look right? I ask, because I did, but it didn't paste as you have it written,

                 

                Maybe the code got corrupted when you copied and pasted but yes if you write the code as shown it will work then just copy and paste for each list you require and change the text

                • 5. Re: Lining up text - dollar amounts
                  Nancy OShea Adobe Community Professional & MVP

                  I'm guessing you pasted too much code into your existing document which resulted in errors.

                   

                  Tihis code goes inside your stylesheet.

                   

                  dl {

                  width: 30%;

                  margin: 0;

                  padding: 0;

                  float:left;

                  }

                  dt {

                  width: 60%;

                  margin: 0;

                  padding: 0;

                  float: left;

                  }

                  dd {

                  margin: 0;

                  padding: 0;

                  }

                   

                  This code replaces your current lists.

                   

                  <dl>

                  <dt>Sportsman</dt>

                  <dd>$580</dd>

                  <dt>Sportsman Touring</dt>

                  <dd>$630</dd>

                  <dt>RZR Side by Side</dt>

                  <dd>$710</dd>

                  </dl>

                   

                  <dl>

                  <dt>Sportsman</dt>

                  <dd>$580</dd>

                  <dt>Sportsman Touring</dt>

                  <dd>$630</dd>

                  <dt>RZR Side by Side</dt>

                  <dd>$710</dd>

                  </dl>

                   

                  <dl>

                  <dt>Sportsman</dt>

                  <dd>$580</dd>

                  <dt>Sportsman Touring</dt>

                  <dd>$630</dd>

                  <dt>RZR Side by Side</dt>

                  <dd>$710</dd>

                  </dl>

                   

                  And when you're done, it should look like this:

                   

                   

                   

                  Nancy O.

                  • 6. Re: Lining up text - dollar amounts
                    Rob Hecker2 Adobe Community Professional & MVP

                    Actually, the solutions offered will result in misalignment if you make one number over $1000 or under $100.

                     

                    I always use right justify. (text-align: right).

                     

                    Also, you normally want to include two decimal places for US currency.

                    The following PHP code converts to decimals:

                     

                    $grandtotalF=number_format($grandtotal,2,'.',',');

                    • 7. Re: Lining up text - dollar amounts
                      osgood_ Level 8

                      Rob Hecker2 wrote:

                       

                      Actually, the solutions offered will result in misalignment if you make one number over $1000 or under $100.

                       

                      I always use right justify. (text-align: right).

                       

                       

                       

                      Too true but I figured the OP might be able to work that one out for themselves, but maybe not. If not then just add the appropriate css to the dd tag:

                       

                       

                      dd {

                      margin: 0;

                      padding: 0;

                      text-align: right;

                      }

                       

                       

                      Flexbox, no let's not go there.

                      • 8. Re: Lining up text - dollar amounts
                        Rob Hecker2 Adobe Community Professional & MVP

                        . . .and about those dollar signs. . .

                         

                        Not long ago I had to go through hundreds of thousands of lines to code to remove the hard coded dollar signs so my code could support euros, yuen, etc. I replaced the dollar signs with the following function:

                         

                        // CURRENCY SYMBOL

                        // currency_position = does the symbol come before or after the number?

                        // currency_tymbol = the askii symbol to use

                        // currency_decimal = how many decimal places are required?


                        function currencyf($number) {
                        global $currency_position,$currency_symbol,$currency_decimal;
                        $number = abs($number);
                        $number = number_format($number, $currency_decimal);
                        if ($currency_position == TRUE){
                        return $number." ".$currency_symbol;   
                        }else{
                        return $currency_symbol.$number;   
                        }}

                         

                        // example

                        <td style='text-align:right'>".currencyf($totaltax)."</td>

                        • 9. Re: Lining up text - dollar amounts
                          osgood_ Level 8

                          Rob Hecker2 wrote:

                           

                          . . .and about those dollar signs. . .

                           

                          Not long ago I had to go through hundreds of thousands of lines to code to remove the hard coded dollar signs so my code could support euros, yuen, etc. I replaced the dollar signs with the following function:

                           

                          // CURRENCY SYMBOL

                          // currency_position = does the symbol come before or after the number?

                          // currency_tymbol = the askii symbol to use

                          // currency_decimal = how many decimal places are required?


                          function currencyf($number) {
                          global $currency_position,$currency_symbol,$currency_decimal;
                          $number = abs($number);
                          $number = number_format($number, $currency_decimal);
                          if ($currency_position == TRUE){
                          return $number." ".$currency_symbol;   
                          }else{
                          return $currency_symbol.$number;   
                          }}

                           

                          // example

                          <td style='text-align:right'>".currencyf($totaltax)."</td>

                           

                          I guess it depends what the ultimate goal is and you have to make those decisions at the he outset of the project. I doubt the user, given they say they are a beginner, will even understand what you posted?

                           

                          I mean they seem a bit lost with the simple code I posted so what chance, zero I suspect.

                          • 10. Re: Lining up text - dollar amounts
                            Rob Hecker2 Adobe Community Professional & MVP

                            Agreed.

                             

                            But I'm not just speaking to the OP. I'm speaking to all of humanity. . . well, those who visit this forum, anyway.

                            • 11. Re: Lining up text - dollar amounts
                              slalemand Level 1

                              Ok, so as I mentioned, a Beginner here. I copied and pasted the code on the page, by selecting what I wanted fixed. I didn't know (Beginner), that the code went into the style sheet.

                               

                              Now I will begin exploring to see where I put this within the style sheets … which by the way, I'm fine doing, I don't mind leaning this way. For me it beats reading how to do it:)

                              • 12. Re: Lining up text - dollar amounts
                                slalemand Level 1

                                Ok, so let me provide a bit more information (yeah, there's more)

                                 

                                1) So the page / site in question, someone else did for the client. They appear to have done most of it in PS, then saved / exported as HTML, so it should work in Dreamweaver. I'm now TRYINg to take over and finish the site (just up-dating the text and such).

                                 

                                2) I'm a beginner with Dreamweaver, hell at most web stuff. Sorry if this upsets anyone, I loved Golive for it's ease:)

                                 

                                3) So, no, I'm not good or familiar with Style Sheets and much more.

                                 

                                I did open Style.css in the page I'm working on, and was hoping, by selecting the text, that would high-light the code in the style.css page, but no such luck, or I'm doing it wrong.

                                 

                                It does appear they have the sections of the page titled in the style.css page, so if I can figure out what they called it, I should be able to select the current code  and replace with the new code provided (by the way, Thank you Very much for this) … right?

                                 

                                Is there a way to in-fact, select the text I need fixed, and have the code show up somewhere, so I'll know which code to fix / change?

                                • 13. Re: Lining up text - dollar amounts
                                  slalemand Level 1

                                  Ok, I just noticed there are several .css files I can select … which one? Below is how they read, and they all look different, as I'm sure they should, but why so many?

                                   

                                  Source Code: style.css   defaught.css   light.css   dark.css   bar.css   nivo-slider.css   style.css    style.css   jquery-1.11.3.min.js

                                  • 14. Re: Lining up text - dollar amounts
                                    slalemand Level 1

                                    Doesn't seem to be working. Are there likely to be other settings they have (Box size?) or something, that is not allowing to work?

                                     

                                    Do I need to replace both the style sheet code, and the code in the current list, for this to work, or just the style sheet code?

                                     

                                    ____________ what I see needs to be replaced when I select the text in Source code in Live view?

                                     

                                              <li style="margin-top:-17px; margin-left:-14px;">Pricing for ATV/4-Wheeler Fri - Sat - Sun</li>

                                      

                                           </ul>

                                       </div>

                                     

                                     

                                    <ul>

                                    <li> Sportsman:                   $580  </li>

                                    <li> Sportsman Touring:          $630  </li>

                                    <li> RZR Side by Side:            $710  </li>

                                    </ul>

                                     

                                     

                                    </div>

                                     

                                     

                                    <div class="m-a-b-left1">

                                     

                                     

                                    <div class="middle-top-title-atv1">

                                          <ul>

                                              <li style="margin-top:-17px; margin-left:-35px;">Pricing for ATV / 4-Wheeler - Weekday Rates</li>

                                      

                                           </ul>

                                       </div>

                                     

                                     

                                    <ul>

                                    <li> Sportsman:                                $580  </li>

                                    <li> Sportsman Touring:          $630  </li>

                                    <li> RZR Side by Side:            $710  </li>

                                     

                                     

                                    </ul>

                                     

                                     

                                    __________________________

                                    • 15. Re: Lining up text - dollar amounts
                                      osgood_ Level 8

                                      slalemand wrote:

                                       

                                      Doesn't seem to be working. Are there likely to be other settings they have (Box size?) or something, that is not allowing to work?

                                       

                                      Do I need to replace both the style sheet code, and the code in the current list, for this to work, or just the style sheet code?

                                       

                                      ____________ what I see needs to be replaced when I select the text in Source code in Live view?

                                       

                                                <li style="margin-top:-17px; margin-left:-14px;">Pricing for ATV/4-Wheeler Fri - Sat - Sun</li>

                                       

                                             </ul>

                                         </div>

                                       

                                       

                                      <ul>

                                      <li> Sportsman:                   $580  </li>

                                      <li> Sportsman Touring:          $630  </li>

                                      <li> RZR Side by Side:            $710  </li>

                                      </ul>

                                       

                                       

                                      </div>

                                       

                                       

                                      <div class="m-a-b-left1">

                                       

                                       

                                      <div class="middle-top-title-atv1">

                                            <ul>

                                                <li style="margin-top:-17px; margin-left:-35px;">Pricing for ATV / 4-Wheeler - Weekday Rates</li>

                                       

                                             </ul>

                                         </div>

                                       

                                       

                                      <ul>

                                      <li> Sportsman:                                $580  </li>

                                      <li> Sportsman Touring:          $630  </li>

                                      <li> RZR Side by Side:            $710  </li>

                                       

                                       

                                      </ul>

                                       

                                       

                                      __________________________

                                       

                                      Just go into CODE view in Dreamweaver and find the below code:

                                       

                                      <ul>

                                      <li> Sportsman:                   $580  </li>

                                      <li> Sportsman Touring:          $630  </li>

                                      <li> RZR Side by Side:            $710  </li>

                                      </ul>

                                       

                                      replace it with WITH:

                                       

                                      <dl>

                                      <dt>Sportsman</dt>

                                      <dd>$580</dd>

                                      <dt>Sportsman Touring</dt>

                                      <dd>$630</dd>

                                      <dt>RZR Side by Side</dt>

                                      <dd>$710</dd>

                                      </dl>

                                       

                                       

                                      Then copy the css below, open the style.css file and and paste it at the end of it, save file.

                                       

                                       

                                      dl {

                                      width: 100%;

                                      margin: 0;

                                      padding: 0;

                                      }

                                      dt {

                                      width: 60%;

                                      margin: 0;

                                      padding: 0;

                                      float: left;

                                      }

                                      dd {

                                      margin: 0;

                                      padding: 0;

                                      text-align: right;

                                      }

                                       

                                       

                                       

                                       

                                       

                                      • 16. Re: Lining up text - dollar amounts
                                        slalemand Level 1

                                        Great. When I do, this is what it looks like? Is there something else that I need to change? Is the box that the text is in, need to be changed

                                        to a bigger size?

                                         

                                        Price-look.jpg

                                        • 17. Re: Lining up text - dollar amounts
                                          osgood_ Level 8

                                          What browser are you looking at this in?

                                           

                                          Copy the below and insert it in a new Dreamweaver document:

                                           

                                          <!DOCTYPE>

                                          <html>

                                          <head>

                                          <meta charset="UTF-8" />

                                          <title>Untitled Document</title>

                                          <style>

                                          dl {

                                          width: 30%;

                                          margin: 0;

                                          padding: 0;

                                          }

                                           

                                          dt {

                                          width: 70%;

                                          margin: 0;

                                          padding: 0;

                                          float: left;

                                          }

                                           

                                          dd {

                                          margin: 0;

                                          padding: 0;

                                          text-align: right;

                                          float: left;

                                          width: 30%;

                                          }

                                          </style>

                                          </head>

                                           

                                          <body>

                                          <h4>Pricing for ATV/4-Wheeler Fri - Sat - Sun</h4>

                                          <dl>

                                           

                                          <dt>Sportsman</dt>

                                           

                                          <dd>$580</dd>

                                           

                                          <dt>Sportsman Touring</dt>

                                           

                                          <dd>$630</dd>

                                           

                                          <dt>RZR Side by Side</dt>

                                           

                                          <dd>$710</dd>

                                           

                                          </dl>

                                          </body>

                                          </html>

                                          • 18. Re: Lining up text - dollar amounts
                                            slalemand Level 1

                                            Safari 5.0.6, and yes, when I make a new doc it looks fine, so now it's on to find out the issue with the page I'm working on.

                                            • 19. Re: Lining up text - dollar amounts
                                              osgood_ Level 8

                                              slalemand wrote:

                                               

                                              Safari 5.0.6, and yes, when I make a new doc it looks fine, so now it's on to find out the issue with the page I'm working on.

                                               

                                              Could be a conflict with some other css the page is using.

                                               

                                              I'd insert the new css in the head section of the page bewteen style tags <style>    </style>  and AFTER any linked css files the page uses.

                                               

                                              Then comment out the other css files one by one by wrapping them in comment tags <!--           --> and test the page. The page will look unstyled but it will give you a good indication which other css file/s may be affecting why the <dl><dt><dd> tags are not displaying as they should. Thats if it is the problem, it could be something else of course.

                                               

                                              Best idea would be to upload the page to a server and provide a link so someone can check out the code.