RaysWebClass.Com

Lesson 14:   CSS Margin, Border, & Padding Rules

The HTML tags with Margin, Border, and Padding properties are:

a, body, div, h1-h6, input, ol, p, select, table, textarea, ul

margin
border
padding
Any one of the above HTML tags here.
NOTE: To stop increasing the height & width rules when increasing the padding us this CSS rule:
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

Web Page Design: Exercise 14


  1. Open myStyles.css in the includes folder and paste this class to the bottom of the stylesheet:
    .title
    {
      color: #2E869D;
      font: 20pt Britannic;
    }
    And Save it.

  2. Open Contact.html

    Paste the following code between the Main Page Below here and the Main Page Above Here comments lines:
      <div class='title'>Contact Us</div>
      <br>

      There are four different ways to contact us here at Global Company:
      <br><br>

      <div style='width: 550px;'>
      <ol>

         <li><img src='images/letter.gif' align='right'>
         Write Us:
         <br><br>
         Global Company<br>
         000 Cold Old Road<br>
         Nowhereville, Oo 00000-0000
         <br><br><hr></li>

         <li><img src='images/ring.gif' align='right'>
         Ring Us:
         <br><br>
         000-000-0000
         <br><br><hr></li>

         <li><img src='images/email.gif' align='right'>
         E-mail Us:
         <br><br>
         <a href='mailto:ContactUs@GlobalCompany.com?subject=Email from Global Company Website
         Company'>ContactUs@GlobalCompany.com</a>
         <br><br><hr></li>

         <li><img src='images/form.gif' align='right'>
         Fill Out Our Form:
         <br><br>

    ~under construction~

         <br><br></li>

      </ol>
      </div>


  3. Open Products.html
    Paste the following code between the Main Page Below here and the Main Page Above Here comments lines:
       <div class='title'>Products</div>
       <br>

       <table border='0' cellspacing='0' cellpadding='5' style='width:600px;'>
       <tr>
         <td colspan='4'><hr></td>
       </tr>
       <tr>
         <td> <img src='images/DooDad.gif' class='picture'> </td>
         <td valign='top'> <b>DooDad</b> </td>
         <td valign='top'>
           A Doodad is a long plank with four square blocks on a rod suspended, on
           three legs, above the plank.
         </td>
         <td valign='top' align='right'> <b>$45.99</b> </td>
       </tr>
       <tr>
         <td colspan='4'><hr></td>
       </tr>
       <tr>
         <td> <img src='images/Gadget.gif' class='picture'> </td>
         <td valign='top'> <b>Gadget</b> </td>
         <td valign='top'>
           A Gadget is a round thing with legs connected to two loops on top
           of another round cylinder thing.
         </td>
         <td valign='top' align='right'> <b>$599.00</b> </td>
       </tr>
       <tr>
         <td colspan='4'><hr></td>
       </tr>
       <tr>
         <td> <img src='images/Widget.gif' class='picture'> </td>
         <td valign='top'> <b>Widget</b> </td>
         <td valign='top'>
           A Widget is three long slender slats and a shorter fat slat on top of
           a pole connected to a rod with a small wheel connected to a large wheel
           and axle.
         </td>
         <td valign='top' align='right'> <b>$399.00</b> </td>
       </tr>
       <tr>
         <td colspan='4'>
           <hr>
           <small style='font-size:7pt;'>
           <a href='http://demonstrations.wolfram.com/TheStraightLineAsARoulette/'>
           Wolfram Images</a>
           </small>
         </td>
       </tr>
       </table>


  4. Open History.html
    Paste the following code between the Main Page Below here and the Main Page Above Here comments lines:
      <div class='title'>History</div>
      <br>

      <div style='width:650px;'>
      Dear visitor,
      <br><br>

      <p>
      Our company, Global Company, has been around sense
      <!-- * * * * * * * * * * * * * * * * -->
      <!-- * Display Day/Date 2 Days Ago * -->
      <!-- * * * * * * * * * * * * * * * * -->
      <SCRIPT LANGUAGE="Javascript">
        var dayNames = new Array(
        "Sunday","Monday","Tuesday","Wednesday",
        "Thursday","Friday","Saturday");
        var monthNames = new Array(
        "January","February","March","April","May","June","July",
        "August","September","October","November","December");
        var now = new Date();
        now.setDate(parseInt(now.getDate()-2));
        document.write(dayNames[now.getDay()] + ", " +
        monthNames[now.getMonth()] + " " +
        (now.getDate()) + ", " + now.getFullYear());
      </SCRIPT>.
      We have developed no less then 3 products in our sterling two day   history - the Doodad, the Gadget, and the Widget. We are very proud of   our accomplishments and expect to have 4 products with in the next   three decates. The President, CEO, Product Developer, Wed Designer,   and sole employee says:
      </p>

      <blockquote>
      "I created this company from the ground up and I am very proud of what I   have accomplished in only two an a half days!"
      </blockquote>

      <p>
      Although none of our products have gown beyond the initial drawing phase,   we hope to have full working models in a decade or two.
      </p>

      <p>
      Please feel free to peruse our product lines and if you see anything you   like, feel free to order directly from this Web site.
      </p>

      Sincerely,
      <br><br>

      Ray LePine,
      <small>President, CEO, Product Developer, Web Designer and sole employee</small>
      <br><br>

      <div align='center'>
          <img src='images/history.jpg'>
      </div>

      </div>