building a basic css layout, part 2

This is the second part of a two-part tutorial on creating a basic
CSS layout. If you have landed on Part 2 first, please go to Part 1, which covers the initial page set-up.

For the purposes of Part 2, you will need your new “index.html” page
and its corresponding stylesheet. Please open them in your preferred HTML editor.

  1. Between
    <head> link rel="stylesheet" href="stylesheet.css" type="text/css" />
    add the following lines, replacing “title of your page” with the title
    you choose for your page (for example, “Bill Wolff’s web site”). If you
    already have a page title, only add the rest of the code:
    <title>title of your page</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="imagetoolbar" content="false" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="ROBOTS" content="ALL" />

    This code will allow CSS and XHTML validators to correctly identify the
    type of page you have, which will result in an accurate validatation.
  2. Adding banner images to the CSS page can be tricky, and requires an
    understanding of the mathematical relationships between structural
    elements in the page and The Box Model:
    The Box Model borrowed from w3.orgWhen creating any element in CSS that you are going to apply a width
    to, we must understand the relationship between the property (“width:”
    — see page 95 – 97 in HTML-Dog) and the actual box that will be created. Consider the following correct way for implementing the Box Model: #container {
    width: --> content area only
    border: --> the width of the border line
    padding: --> the width of the padding
    margin: --> the width of the margin
    }

    Not all browsers, however, have implemented the Box Model in the same
    way: IE5.x/win and pre IE/Mac 5.0 used the following when creating
    boxes: #container {
    width: --> total width of the box
    border: --> the width of the border line
    padding: --> the width of the padding
    margin: --> the width of the margin
    }
    So, when we have the following code: #container {
    width: 760px;
    border: 1px solid gray;
    padding: 10px;
    margin: 10px;
    }

    We will get the following correct Box Model in Mozilla, IE6/win,
    Safari, Opera, IE/Mac 5.0+, which has a total overall width of 782px
    (760px + 1px + 1px + 10px + 10px = 782px):
    The correct box model

    However, when the Box Model is implemented incorrectly, as in
    IE5.x/win and pre IE/Mac 5.0, we get the following box, which has an
    overall width of 760px, and a content area of only 738px (760px – 1px –
    1px – 10px – 10px = 738px):
    The correct box model

    As a result, to trick the browsers that implement the Box Model
    incorrectly, we must implement the Box Model Hack. The Box Model Hack
    assigns IE5.x/win and pre IE/Mac 5.0 a false “width” value (the total
    value of the width we actually want). Here, for example, we want an
    overall width of 782px. By assigning the false width of 782px, our
    content area will wind up being 760px (782px – 10px – 10px – 1px – 1px
    = 760px), which is the width of the content area in browsers that
    implement the Box Model correctly.

    #container {
    width: 760px;
    border: 1px solid gray;
    padding: 10px;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
    }

    * html div #container { /* This is the Tan hack */
    width: 782px;
    w\idth: 760px; }

    #banner {
    margin-bottom: 5px;
    background-color: #FFF;
    border: 1px solid #000;
    height: 125px;
    }

    This CSS code will create a page that looks like the following, with
    necessary height and width measurements (for our purposes, I have
    removed the sidebar and content area):
    banner skeleton with necessary labels

    For our purposes, consider the following CSS code for a container and a banner that contains the Tan Box Model Hack which covers all browsers including Opera):

  3. When creating a banner image you wish to stretch across the full
    width of the banner section, one of the most frequent mistakes is to
    use incorrect widths and heights. If you want to fill the complete area
    of the banner section, your image must be the exact height and width of
    that section. If the image is not the exact size, the image will either
    not fill the whole space or it will run over.Determing the height is easy; in this case, our image is 125px, so
    we know to set our height is set to 125px (like “width,” “height”
    represents the height of the content area, not the height of the box).

    The width is a bit trickier. To determine the width of our banner
    image (when we do not know the exact width of the banner area), we must
    use the width of our content area, not the width of the overall box. To
    determine the width of our image, we must calculate its width by
    subtracting the width of the container, by the width of the left and
    right borders in the container, by the width of the padding in the
    container, by the width of the right and left banner borders. In this
    case we have the following calculation:

    782 pixels (container width)
    - 1 pixel (left container border)
    - 1 pixel (left container border)
    -10 pixels (left container padding)
    -10 pixels (right container padding)
    - 1 pixel (left banner border)
    - 1 pixel (right banner border)

    758 total pixels wide
    banner skeleton with image of blue hills necessary labels

  4. To add our image to our page we can do either of two
    things: add the image in our “index.html” or add the image in our
    stylesheet as a background. Each has its benefits and drawbacks. By
    placing the image in “index.html” you are able to have ALT text, which
    you are not able to do in a stylesheet. But, having the image in the
    stylesheet allows for more complex visual layouts, and there are
    several ALT text workarounds (some of which, like the Fehrner Image
    Replacement, have been very popular but proved to be inaccessible), which you can read about at http://www.stopdesign.com/also/articles/replace_text/
    (note the sub-epigraph: “The original technique (FIR) described in the
    body of this article is no longer recommended for use, as it makes the
    hidden text completely inaccessible for certain screen readers.
    Instead, see one of the alternative techniques mentioned at the end of
    the article under ‘Important Notes.'”).

    To add an image in “index.html” we, of course, use the following code:

    <div id="banner">
    <img src="image-file-with-extension" alt="my banner image" width="758" height="125" />
    </div>

    To add the image in our stylesheet, we use the following code:

    #banner {
    margin-bottom: 5px;
    padding: 0;
    background: url('../images/banner.gif') no-repeat top left;

    border: 1px solid #000;
    height: 125px;
    }

    Making an image accessible to screen readers is not that difficult;
    it just means tricking the screen reader and a sited user of a page.
    The goal is to make the screen reader think there is text and at the
    same time hide it from a sited user. Some have suggested using

    display: none;

    in any element we want to hide. This works if the element you want
    to hide is an image, but if you hide text, it will also be hidden from
    the screen reader.

    Instead, we will be using a context specific element and negative margins. For example, consider the following CSS:

    #banner {
    margin-bottom: 5px;
    padding: 0;
    background: url('../images/banner.gif') no-repeat top left;
    border: 1px solid #000;
    height: 125px;
    }
    #banner p {
    margin-left: -2500px;

    }

    and its related HTML:

    <div id="banner">
    <p>The banner for my web page</p>
    </div>

    A screen reader will read “The banner for my webpage,” but because
    our CSS code positions the paragraph tag 2000 pixels to the left a
    sited user will never see it.

    For more on background images and their positioning, the W3C Schools background information.

Leave a Reply

Your email address will not be published. Required fields are marked *