Member Avatar for Transcendent

676d3a4d6fae34888f383c4d66a4ab99676d3a4d6fae34888f383c4d66a4ab99

<!DOCTYPE html>
<!-- grocery.html
     A document for computeCost.js
     -->
<html lang = "en">
  <head> 
    <title>grocery.html</title>
    <meta charset = "utf-8" />
    <style type = "text/css">
      label,input {display: block; margin-bottom: 20px; margin-right: 20px;} 
      label { float: left; width:200px; text-align: right;}
      input { margin-left:150px;}


      #items{ margin-bottom: 20px; margin-right: 20px;} 
      #theCost{margin-bottom: 20px; margin-right: 20px; }
      #done { margin-bottom: 20px; margin-right: 20px;} 
      #done input {display:inline; margin-left: 140px;}  
      #column { display:inline; }   
      #item, #quantity {  margin-left: 40px;}   
     </style>

<!-- Script s -->
    <script type = "text/javascript"  src = "computeCost.js" >
    </script>

  </head>

      <body>
        <h2>Grocery List</h2>
            <form>

                <div id = "column">

                    <label id="item">Item</label>
                    <label id= "quantity">Quantity</label>

                </div>

                <div id= "items">
                    <label>Apple(59 cents each) </label>
                    <input type="text" name="apples" id="appleTotal" />
                    <label>Orange(49 cents each) </label> 
                    <input type="text" name="oranges" id="orangeTotal" />

                    <label>Banana(39 cents each) </label> 
                    <input type="text" name="bananas" id="bananaTotal" />
                </div>



                <div id = "done">

                    <!-- The submit and reset buttons -->
                        <input type = "button"  value = "Submit" onClick ="ComputeCost()"/> 
                        <input type = "reset"  value = "Clear" />

                </div>

                <div id = "taxes">

                    <label>Total before tax </label> 
                    <input type="text" name="beforeTax" id="beforeTaxTotal" onfocus = "this.blur()"/>

                    <label>Tax(7.25%) </label> 
                    <input type="text" name="taxes" id="TaxTotal" disabled ="disabled" />
                </div>

                <div id = "theCost">
                    <!-- Button for precomputation of the total cost -->
                    <label >Total after tax</label>
                    <input type ="text" size = "5" id = "totalCost" onfocus = "this.blur()" />
                </div>



            </form>
      </body>
</html>
  • 4 Contributors
  • 3 Replies
  • 286 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by webhawk

Recommended Answers

All 3 Replies

Member Avatar for hericles

You've given your labels a width of 200px which is pushing everything over to the right.
You should get used to using the developer tools in your browser (if you don't already) as copying your code and looking at the element in the inspector I used Chrome) made this trivial to see.
And sometimes tables have a use over divs. This looks like a tabular layout to me and placing it in a table does make a certain sense.

Member Avatar for marqusG

This will work:

    <!DOCTYPE html>
    <!-- grocery.html
    A document for computeCost.js
    -->
    <html lang = "en">
    <head>
    <title>grocery.html</title>
    <meta charset = "utf-8" />
    <style type = "text/css">
    .row{
      width: 100%;
      display: block;
      height: 60px;
    }
    .col{
      float: left;
      min-width: 180px;
      display: block;
    }
    #done input[type="button"]{
      float: left;
      margin-right: 10px;
    }
    /*label,input {
      display: block; 
      margin-bottom: 20px; 
      margin-right: 20px;
      }
    label { 
      float: left; 
      width:200px; 
      text-align: right;
      }
    input { 
      margin-left:150px;
    }
    #items{ 
      margin-bottom: 20px; 
      margin-right: 20px;
    }
    #theCost{
      margin-bottom: 20px; 
      margin-right: 20px; 
    }
    #done { 
      margin-bottom: 20px; 
      margin-right: 20px;
    }
    #done input.submit, #done input.reset {
      display:inline; 
      margin-left: 10px;
      float: left;
    }
    #column { 
      display:inline;
      height: 60px; 
    }
    #item, #quantity { 
      margin-left: 40px;
    } */
    </style>
    <!-- Script s -->
    <script type = "text/javascript" src = "computeCost.js" >
    </script>
    </head>
    <body>
    <h2>Grocery List</h2>
    <form>
    <div class="row" id="column">
      <div class="col">
        <label id="item">Item</label>
      </div>
      <div class="col">
        <label id= "quantity">Quantity</label>
      </div>
    </div>
    <div class="row" id= "items">
      <div class="col">
        <label>Apple(59 cents each) </label>
      </div>
      <div class="col">
        <input type="text" name="apples" id="appleTotal" />
      </div>
    </div>
    <div class="row" id= "items">
      <div class="col">
        <label>Orange(49 cents each) </label>
      </div>
      <div class="col">
        <input type="text" name="oranges" id="orangeTotal" />
      </div>
    </div>
    <div class="row" id= "items">
      <div class="col">
        <label>Banana(39 cents each) </label>
      </div>
      <div class="col">
        <input type="text" name="bananas" id="bananaTotal" />
      </div>
    </div>
    <div class="row" id = "done">
    <!-- The submit and reset buttons -->
      <div class="col">
      &nbsp;
      </div>
      <div class="col">
        <input type = "button" value = "Submit" onClick ="ComputeCost()"/>
        <input type = "reset" value = "Clear" />
      </div>
    </div>
    <div class="row" id = "taxes">
      <div class="col">
        <label>Total before tax </label>
      </div>
      <div class="col">
        <input type="text" name="beforeTax" id="beforeTaxTotal" onfocus = "this.blur()"/>
      </div>
    </div>
    <div class="row" id = "taxes">
      <div class="col">
        <label>Tax(7.25%) </label>
      </div>
      <div class="col">
        <input type="text" name="taxes" id="TaxTotal" disabled ="disabled" />
      </div>
    </div>
    <div class="row" id = "theCost">
    <!-- Button for precomputation of the total cost -->
      <div class="col">
        <label >Total after tax</label>
      </div>
      <div class="col">
        <input type ="text" size = "5" id = "totalCost" onfocus = "this.blur()" />
      </div>
    </div>
    </form>
    </body>
    </html>

You should try to use some grid system like Skel or even better a solid framework like Bootstrap or YAML.

Cheers

Member Avatar for webhawk

Another problem with forms is that they can look very different depending upon which browser you're using. I've used things Fomralizer in the past to force the same look and feel for all browsers.
http://formalize.me/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.