0

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
22
Views
2 Years
Discussion Span
Last Post by webhawk
2

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.

0

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

0

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/

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.