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 (or "test.html") 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.org

    When 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.

    For our purposes, consider the following CSS code for a container and a banner that contains the Tan Box Model Hack where covers all browsers including Opera): #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

  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.

Comments are closed.