The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Quantities Showing, Element Not Displaying Properly
cweb
post Mar 15 2011, 12:07 PM
Post #1





Group: Members
Posts: 9
Joined: 15-March 11
Member No.: 14,134



Hi.
The following information is not displaying properly.

Insert a label element with the text Quantity. Give the label the id qLabel Within the label element, insert a selection list for the qty field. Insert the numbers 1 through 10 for both the option text & option values.
What I see:
a blank Input text box next to Toppings... (it should not be there)
Numbers 6 7 8 9 10 under the Toppings... heading (they should not be there

Should be:
Toppings (select all that apply) selection of toppings box

Quantity a box with the quantity


My HTML code:
CODE
<label id="qLabel">Quantity    
           <select id="qty" name="qty">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
             </select>
             </label>

CSS code:
CODE

#qLabel {margin-top: 80px}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 15 2011, 12:36 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Again, you aren't posting all of the HTML. There is no way the above can create an INPUT because there is not INPUT in the markup.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
cweb
post Mar 15 2011, 01:26 PM
Post #3





Group: Members
Posts: 9
Joined: 15-March 11
Member No.: 14,134



Sorry. Here goes.

This is all of my code. CSS code is at the bottom of the page.
HTML:


CODE
<html>
<head>
<!--   Note to Self - THIS IS THE GOOD ONE
   New Perspectives on HTML and XHTML
   Tutorial 6
   Case Problem 3

   Pizza Order Form
   Author:
   Date:  

   Filename:         pizza.htm
   Supporting files: buttonball.jpg, leftball.jpg, orderform.css, rb.css,
                     redball.jpg, rightball.jpg
-->

   <title>Pizza Order Form</title>
   <link href="rb.css" rel="stylesheet" type="text/css" />
   <link href="orderform.css" rel="stylesheet" type="text/css" />
</head>


<body>
   <div id="heading">
      <img src="redball.jpg" alt="Red Ball Pizza" />
   </div>


   <div id="links">
      <ul>
         <li><a href="#">home page</a></li>
         <li><a href="#">menu</a></li>
         <li><a href="#">directions</a></li>
         <li><a href="#">coupons</a></li>
         <li><a href="#">online ordering</a></li>
         <li><a href="#">shopping cart</a></li>
         <li><a href="#">testimonials</a></li>
      </ul>
   </div>


   <div id="pageContent">
  
      <div id="leftCol">
         <p>Please select the size, crust, toppings and quantity for your pizza order.
            Don't forget to add extra breadsticks and chicken wings!</p>
         <p>Click the <em>Add to Cart</em>
            button to add your selected items to your shopping
            cart.</p>
         <p>For preferred lunch and dinner delivery times, please phone or
            fax orders in advance.</p>

         <p>Phone: <br />(386) 555 - 7499</p>
         <p>Fax:   <br />(386) 555 - 7498</p>

      </div>

      <div id="rightCol">
         <h1>Online Ordering</h1>
  <form>
    <fieldset id="pizzaType">
    <legend>Build Your Pizza</legend>
    

        <label> SIze
                  
                         <select>
               <option value="12">12 Regular</option>
                           <option selected="selected">14 Large</option>
               <option value="16">16 Extra Large</option>
               <option value="20">20 Family Size</option>
             </select>
               </label>

               <label> Crust
                  
                     <select id="crust" name="Crust">
               <option value="thin">Thin</option>
               <option value="thin">Thick</option>    
                           <option selected="selected">Hand Tossed</option>  
                           <option value="deep dish">Deep Dish</option>
                </select>
               </label>
        
    <label>Toppings (select all that apply)
                    <input type="text" id="toppings" name="toppings" />
                     <select multiple="multiple" id="toppings" name="toppings" size="5">
            <optgroup label="Vegetables and Fruits">
                <option>Diced mango</option>
                <option>Artichokes</option>
                <option>Broccoli</option>
                <option>Caramelized onions</option>
                <option>Fire roasted red peppers</option>
                <option>Fresh mushrooms</option>
                <option>Green peppers</option>
                <option>Green olives</option>
                <option>Spinach</option>
                <option>Grilled zucchini</option>
                <option>Hot banana peppers</option>
                <option>Jalapeno peppers</option>
                <option>Kalamata olives</option>
                <option>Pineapple</option>
                <option>Red onions</option>
                <option>Roasted garlic</option>
                <option>Roma tomatoes</option>
                <option>Sun-dried tomatoes</option>                    
            </optgroup>
                                
        <optgroup label="Meats">
                <option>Steak Strips</option>
                <option>Anchovies</option>
                <option>Bacon Topping</option>
                <option>Bacon Strips</option>
                <option>Mesquite Chicken</option>
                <option>Ground Beef</option>
                <option>Italian Ham</option>
                <option>Italian Sausage</option>
                <option>Pepperoni</option>
                <option>Salami</option>
        </optgroup>

        <optgroup label="Cheeses">
                <option>Provolone cheese</option>
                <option>Extra cheese</option>
                <option>Feta cheese</option>
                <option>Four cheese blend</option>
                <option>Goat cheese</option>
                <option>Mozzarella cheese</option>
                <option>Parmesan cheese</option>
        </optgroup>

        <label id="qLabel">Quantity    
          <select>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
             </select>
             </label>

           <input type="image" src="buttonball.jpg" />
       </fieldset>

        <fieldset id="extras">
             <legend>Extras</legend>
        <label>Breadsticks
            <select id="bread" name="bread">
            <option value="6">6 piece</option>
            <option value="12">12 piece</option>
            <option value="18">18 piece</option>    
         </select>
        </label>

    <label>Cheesy Bread
            <select id="cbread" name="cbread">
            <option value="6">6 piece</option>
            <option value="12">12 piece</option>
            <option value="18">18 piece</option>    
                 </select>
    </label>

    <label>Chicken Wings
            <select id="wings" name="wings">
            <option value="6">6 piece</option>
            <option selected="selected">12 piece</option>
            <option value="18">18 piece</option>
            <option value="24">24 piece</option>
               </select>
    </label>

    <label>Barbecue Wings        
                  <select id="bwings" name="bwings">
            <option value="6">6 piece</option>
            <option selected="selected">12 piece</option>
            <option value="18">18 piece</option>
            <option value="24">24 piece</option>
              </select>
    </label>

                <input type="image" src="buttonball.jpg" />

     </form>
                        
      </div>

      <address>
         Red Ball Pizza •
         811 Beach Drive •
         Ormond Beach, FL  32175 •
         (386) 555 - 7499
      </address>

   </div>

</body>

</html>


CSS:

Order Form Style Sheet

/*
Filename: orderform.css
Supporting Files:

*/
CODE
form
        {
          margin:0px;
          padding:0px;
        }     

    
    fieldset
            {
              margin-bottom:10px;
              margin-top:0px;
                  margin-right:0px;
              margin-left:0px;
          background:ivory;
          border-style:inset;
                  color:rgb(255,192,192);
            }

    legend
            {
          color:red;
              letter-spacing:3px;
        }

    
    label
            {
          display:block;
              position:relative;
              width:400px;
                  margin-top:5px;
                  margin-bottom:10px;
                  margin-left:0px;
              margin-right:0px;
                }

    select
          {
        position:absolute;
            top:0px;
                left:250px;
                font-size:12px;
          }
            
    #qLabel {margin-top: 80px}

    input
         {
           margin-left:250px;
         }

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 15 2011, 01:43 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Just use your editor's FIND function and search for "input" and you'll find it.

QUOTE
<label>Toppings (select all that apply)
<input type="text" id="toppings" name="toppings" />
<select multiple="multiple" id="toppings" name="toppings" size="5">
<optgroup label="Vegetables and Fruits">


Also, you have omitted the closing tag for that LABEL.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 07:07 AM