6 Replies Latest reply: Dec 11, 2012 7:19 AM by Reynold Dreamweaver CS6 RSS

    inline not quite!

    Reynold Dreamweaver CS6 Community Member

      Hi,

      Here's the php script;

      PHP Script.png

      and here is the css script;

      CSS Script.png

      and finally here is the screen output;

      Screen Outputs.png

      Questions:

      How can I aline - inline the checkboxes along the end of the item 1?

       

      What do I need to include in my CSS script for the ophan to start it from a new line?

       

      Am I missing an input element selector declaration on the CSS, will this address the inline check boxes?

       

      Thanks.

        • 1. Re: inline not quite!
          kennethkawamoto2 Community Member

          How can I aline - inline the checkboxes along the end of the item 1?

          You need to float your <p>, e.g.

          #facilities p {

              float: left;

              margin: 0;

          }

          What do I need to include in my CSS script for the ophan to start it from a new line?

          You need to clear the float. e.g.

          #facilities > div {

              clear: left;

          }

          --

          Kenneth Kawamoto

          http://www.materiaprima.co.uk/

          • 2. Re: inline not quite!
            Reynold Dreamweaver CS6 Community Member

            Hi Ken,

            Nice website of yours - all in flash!

            About your reply, thanks for the assistance here! It worked.

            ScrrenLeft.png

            However, the rest of item 2 checks boxes have not displayed inline. Have I missed something here?

            Thanks

            • 3. Re: inline not quite!
              kennethkawamoto2 Community Member

              Can you show me your HTML & CSS (as text not PNG)?

               

              --

              Kenneth Kawamoto

              htp://www.materiaprima.co.uk/

              • 4. Re: inline not quite!
                Reynold Dreamweaver CS6 Community Member

                Hi Ken,

                I am experimenting the facilities -- section, once successful I will be able to replicate the styles; hence here is the HTML and CSS. Seperate Styling. External.

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                <html xmlns="http://www.w3.org/1999/xhtml">

                <head>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <title>Forming</title>

                <link href="Forming.css" rel="stylesheet" type="text/css" />

                <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />

                <link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />

                <link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />

                <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>

                <script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>

                <script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>

                </head>

                 

                 

                <body>

                 

                 

                <div class="container">

                  <div class="header"><img src="Feedbackheader.jpg" width="960" height="100" alt="" /><!-- end .header --></div>

                  <div class="content">

                    <h4>Today's date: <?php echo "Date  - ".date("d/m/Y - H:ia")?> </h4>

                    <form id="form1" name="form1" method="post" action="">

                    <fieldset id="Details"><legend class="DRate"> Details </legend>

                    <p> To enable us to review and improve our training,, we would appreciate you taking a few minutes to give us your feedback. All comments are valued. Thank you for your time and co-operation.</p>

                    <p></p>

                    <table id="details" width="780" border="0">

                  <tr>

                    <td> </td>

                    <td> </td>

                    <td> </td>

                  </tr>

                  <tr>

                    <td><div align="right">Your name <img src="Asterick.gif" width="10" height="10" alt="" /></div></td>

                    <td><span id="sprytextfield1">

                    <input type="text" name="text1" id="text1" />

                    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span></td>

                    <td> </td>

                  </tr>

                  <tr>

                    <td><div align="right">Trainers Name<img src="Asterick.gif" width="10" height="10" alt="" /></div></td>

                    <td><span id="spryselect1">

                      <select name="TrainerS" id="TrainerS">

                        <option value="">Select</option>

                        <option value="1">Ash J</option>

                        <option value="2">Sultana</option>

                        <option value="3">Edmond Lai</option>

                        <option value="4">Robert Edwards</option>

                        <option value="5">Rafael Gonzales</option>

                        <option value="6">Olivia Artuso</option>

                        <option value="7">Reynold Chung</option>

                      </select>

                      <span class="selectRequiredMsg">Please select an item.</span></span></td>

                    <td> </td>

                  </tr>

                  <tr>

                    <td><div align="right">Date<img src="Asterick.gif" width="10" height="10" alt="" /></div></td>

                    <td> </td>

                    <td> </td>

                  </tr>

                  <tr>

                    <td><div align="right">Course<img src="Asterick.gif" width="10" height="10" alt="" /></div></td>

                    <td><span id="spryselect2">

                      <select name="select1" id="select1">

                        <option value="">Select</option>

                        <option value="1">Doctors</option>

                        <option value="2">Nurse IP</option>

                        <option value="3">Nurse OP</option>

                        <option value="4">CNS / NP</option>

                      </select>

                      <span class="selectRequiredMsg">Please select an item.</span></span></td>

                    <td> </td>

                  </tr>

                  <tr>

                    <td><div align="right">Other course specify<img src="Asterick.gif" width="10" height="10" alt="" /></div></td>

                    <td><span id="sprytextfield2">

                      <input type="text" name="text2" id="text2" />

                      <span class="textfieldRequiredMsg">A value is required.</span></span></td>

                    <td> </td>

                  </tr>

                  <tr>

                    <td><div align="right">Room<img src="Asterick.gif" width="10" height="10" alt="" /></div></td>

                    <td><span id="spryselect3">

                      <select name="select2" id="select2">

                        <option value="">Select</option>

                        <option value="1">CXH</option>

                        <option value="2">HH</option>

                        <option value="3">SMH</option>

                      </select>

                      <span class="selectRequiredMsg">Please select an item.</span></span></td>

                    <td> </td>

                  </tr>

                  <tr>

                    <td><img src="Asterick.gif" width="10" height="10" alt="" /> indicates a mandatory field</td>

                    <td> </td>

                    <td> </td>

                  </tr>

                </table>

                 

                 

                   

                    <p></p>

                   

                    </fieldset>

                    <fieldset id="course"> <legend class="CRate"> Course </legend>

                    <p> 1 The course met the stated learning objectives</p>

                    <input type="checkbox" name="RateC1"  />

                    <label>Strongly Agree</label>

                    <input type="checkbox"name="RateC2" />

                    <label>Agree</label>

                    <input type="checkbox"name="RateC3" />

                    <label>Disagree</label>

                    <input type="checkbox"name="RateC4" />

                    <label>Strongly Disagree</label>

                    <p> 2 The contents of this course was relevant to my role</p>

                    <input type="checkbox" name="RateCC1"  />

                    <label>Strongly Agree</label>

                    <input type="checkbox"name="RateCC2" />

                    <label>Agree</label>

                    <input type="checkbox"name="RateCC3" />

                    <label>Disagree</label>

                    <input type="checkbox"name="RateCC4" />

                    <label>Strongly Disagree</label>

                    <p>3 The course has provided me with the knowledge and skills I need</p>

                    <input type="checkbox" name="RateCCC1"  />

                    <label>Strongly Agree</label>

                    <input type="checkbox"name="RateCCC2" />

                    <label>Agree</label>

                    <input type="checkbox"name="RateCCC3" />

                    <label>Disagree</label>

                    <input type="checkbox"name="RateCCC4" />

                    <label>Strongly Disagree</label>

                    <p> 4 The course was an appropriate length and pace </p>

                    <input type="checkbox" name="RateCCCC1"  />

                    <label>Strongly Agree</label>

                    <input type="checkbox"name="RateCCCC2" />

                    <label>Agree</label>

                    <input type="checkbox"name="RateCCCC3" />

                    <label>Disagree</label>

                    <input type="checkbox"name="RateCCCC4" />

                    <label>Strongly Disagree</label>

                    </fieldset>

                    <fieldset id="Trainer">

                    <legend class="Trate"> Trainer </legend>

                    <p> 1 The Trainer presented the course in a professional manner </p>

                    <input type="checkbox" name="RateT1"  />

                    <label>Strongly Agree</label>

                    <input type="checkbox"name="RateT2" />

                    <label>Agree</label>

                    <input type="checkbox"name="RateT3" />

                    <label>Disagree</label>

                    <input type="checkbox"name="RateT4" />

                    <label>Strongly Disagree</label>

                    <p> 2 The Trainer handled questions and managed discussions well</p>

                    <input type="checkbox" name="RateT21"  />

                    <label>Strongly Agree</label>

                    <input type="checkbox"name="RateT22" />

                    <label>Agree</label>

                    <input type="checkbox"name="RateT23" />

                    <label>Disagree</label>

                    <input type="checkbox"name="RateT24" />

                    <label>Strongly Disagree</label>

                    <p> 3 The Trainer demonstrated good knowledge of the system</p>

                    <input type="checkbox" name="RateT31"  />

                    <label>Strongly Agree</label>

                    <input type="checkbox"name="RateT32" />

                    <label>Agree</label>

                    <input type="checkbox"name="RateT33" />

                    <label>Disagree</label>

                    <input type="checkbox"name="RateT34" />

                    <label>Strongly Disagree</label>

                    <p> 4 The Trainer was clear and easy to understand</p>

                   <input type="checkbox" name="RateT41"  />

                    <label>Strongly Agree</label>

                    <input type="checkbox"name="RateT42" />

                    <label>Agree</label>

                    <input type="checkbox"name="RateT43" />

                    <label>Disagree</label>

                    <input type="checkbox"name="RateT44" />

                    <label>Strongly Disagree</label>

                    </fieldset>

                    <fieldset id="Facilities"><legend class="Facilities">Facilities</legend>

                    <div id="Facilities1">

                    <p>1 The equipment provided in the training room was fit for purpose</p>

                   

                   

                    <input  type="checkbox" name="infoGrp" class="checkbox"  />

                    <label>Strongly Agree</label>

                 

                 

                    <input type="checkbox" name="infoGrp" class="checkbox" />

                    <label>Agree</label>

                 

                 

                    <input type="checkbox"name="infoGrp" class="checkbox" />

                    <label>Disagree</label>

                 

                 

                    <input type="checkbox"name="infoGrp" class="checkbox" />

                    <label>Strongly Disagree</label>

                    <p> </p></br>

                    </div>

                 

                 

                <p> </p>

                 

                 

                <div id="Facilities2">

                <p>2 The training room had a comformtable environment (temperature/lighting)</p>

                 

                 

                    <input type="checkbox" name="infoGrp" class="checkbox" value="Strongly Disagree" />

                    <label>Strongly Agree</label>

                    <input type="checkbox"name="infoGrp" class="checkbox" value="Agree" />

                    <label>Agree</label>

                    <input type="checkbox"name="infoGrp" class="checkbox" value="Disagree" />

                    <label>Disagree</label>

                    <input type="checkbox"name="infoGrp" class="checkbox" value="Strongly Disagree" />

                    <label>Strongly Disagree</label>

                    </br class="clear">

                    <p></p>

                </div>

                    </fieldset>

                    <fieldset id="General"><legend class"GRate"> General Feedback </legend>

                    <p> Please use this space to give any additional feedback relating to today's training. For example; which parts of the course did you find interesting / useful / relevant? </p>

                    <p> All comments are helpful for use to continue to improve our training. In particular, if you answered 'disagree' or 'strongly disagree' to any of the statement below, we would like to understand your reasons.</p>

                    <p><span id="sprytextarea1">

                    <textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>

                    <span id="countsprytextarea1"> </span><span class="textareaRequiredMsg">A value is required.</span><span class="textareaMaxCharsMsg">Exceeded maximum number of characters.</span></span></p>

                    <p></p>

                    </fieldset>

                    </form>

                 

                 

                </div>

                  <div class="footer">

                    <img src="Footer.jpg" width="960" height="50" alt="" /></div></div>

                <script type="text/javascript">

                var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {hint:"Your name", maxChars:30, validateOn:["blur", "change"]});

                var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1", {validateOn:["blur", "change"]});

                var spryselect2 = new Spry.Widget.ValidationSelect("spryselect2", {validateOn:["blur", "change"]});

                var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none", {validateOn:["blur", "change"], hint:"Name your course"});

                var spryselect3 = new Spry.Widget.ValidationSelect("spryselect3", {validateOn:["blur", "change"]});

                var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {validateOn:["blur", "change"], maxChars:500, hint:"Type your comments", counterId:"countsprytextarea1", counterType:"chars_remaining"});

                </script>

                </body>

                </html>

                 

                 

                CSS -

                 

                @charset "utf-8";

                body {

                          font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

                          background-color: ;

                          margin: 0;

                          padding: 0;

                          color: #000;

                }

                 

                 

                /* ~~ Element/tag selectors ~~ */

                ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */

                          padding: 0;

                          margin: 0;

                }

                h1, h2, h3, h4, h5, h6, p {

                          margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */

                          padding-right: 15px;

                          padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */

                }

                a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */

                          border: none;

                }

                 

                 

                /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */

                a:link {

                          color:#414958;

                          text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */

                }

                a:visited {

                          color: #4E5869;

                          text-decoration: underline;

                }

                a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */

                          text-decoration: none;

                }

                 

                 

                /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */

                 

                 

                 

                 

                input{

                          ;}

                form {

                          background:;

                          border-radius: ;

                          font-size:12px;

                          width: 780 px;

                          height:800;

                 

                }

                #Facilities1, #Facilities2{

                          margin:2px 0;

                }

                #Facilities1 P, Facilities2 P{

                          float:left;

                          margin:0;

                          }

                #Facilities1 Label{

                          float:none;

                          display:inline;

                          padding:5px;

                          }

                #Facilities2 {

                          clear:left;}

                 

                #Facilities2 Label{

                          float:none;

                          display:inline;

                          padding:5px;

                          }

                .container {

                          width: 80%;

                          max-width: 960px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */

                          min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */

                          background-color: ;

                          margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */

                }

                 

                 

                /* ~~the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo~~ */

                .header {

                          background-color: ;

                }

                 

                 

                /* ~~ This is the layout information. ~~

                 

                 

                1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

                 

                 

                */

                .content {

                          padding: 10px 0;

                }

                 

                 

                /* ~~ This grouped selector gives the lists in the .content area space ~~ */

                .content ul, .content ol {

                          padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */

                }

                 

                 

                /* ~~ The footer ~~ */

                .footer {

                          padding: 10px 0;

                          background-color: #6F7D94;

                }

                 

                 

                /* ~~ miscellaneous float/clear classes ~~ */

                .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

                          float: right;

                          margin-left: 8px;

                }

                .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */

                          float: left;

                          margin-right: 8px;

                }

                .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */

                          clear:both;

                          height:0;

                          font-size: 1px;

                          line-height: 0px;

                }

                • 5. Re: inline not quite!
                  kennethkawamoto2 Community Member

                  Oh I didn't mean ALL the codes, just a relevant section!

                   

                  Anyway, just scaned this and spotted:

                  #Facilities1 P, Facilities2 P

                  - you're missing  #.

                   

                  --

                  Kenneth Kawamoto

                  http://www.materiaprima.co.uk/

                  • 6. Re: inline not quite!
                    Reynold Dreamweaver CS6 Community Member

                    Hi Ken,

                    Thanks you. Its done.

                    Reynold