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.
- 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. - 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:
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 {
So, when we have the following code:
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
}#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):
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):
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):
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):
- 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
- 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 usingdisplay: 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.