Creating a page structure

We’ve covered semantic markup—that is, using HTML elements for the purpose for which
they were created. This theme continues when working with CSS-based layouts. With
tables, cells are used to lay out a design and are merged, split, chopped, and changed until
everything works visually. But when working with CSS, you need to be aware of the structure
of your web page from the start. That way, you can create structural elements with id
values that relate to their purpose, and then style them to suit.
For basic page structure, you mostly work with the div element. This element has been
around for some time, but used to be used for aligning text left, right, or centrally.
However, its real purpose is as a divider element, used to divide a document into blocklevel
groups or divisions. Therefore, in CSS-based layouts, the div element’s role is pivotal:
a number of divs are added to the web page in logical order, creating the basic structure;
each is provided with a unique id relating to its purpose; and the divs are then styled to
provide spacing, padding, backgrounds, and so on.

Creating accessible tables

Many web designers ignore all but the most basic elements when working with tables, and
in doing so they end up with output that causes problems for screen readers. By correctly
and carefully structuring and formatting a table, not only will users of screen readers benefit,
but you as a designer will also have far more control over its visual appearance.
Additionally, extendable browsers like Firefox can also enable you to use the table data
in other ways, including outside of the browser. For example, the TableTools plug-in
(https://addons.mozilla.org/en-US/firefox/addon/2637) enables sorting, filtering,
and exporting of tabular data from a web page. A properly formatted table will enhance
this, making the table even more useful. Adding a few extra elements and attributes to
your table is a win-win situation, and it’s surprising to note how few designers bother with
anything other than rows and cells in their tables

Creating a multicolumn drop-down menu in css

1. Edit the HTML to remove the existing nested lists. Then, for the multicolumn dropdown,
decide which link you want it to spawn from and place an unordered link in
its parent list item, with a single list item of its own. Within that list item, place the
unordered lists for the columns in the drop-down, one after the other. Note that if
some columns have fewer items, they must still have the same number of list items.
However, list items can be left empty, despite this technically being a presentational
hack. (Note that HTML Tidy might have problems with this and trim the empty list
items. If you use that tool, add a nonbreaking space as the list’s content.)
<li id="servicesPage">
<a href="#">Services</a>
<ul>
<li>
<ul>
<li><a href="#">Drop-down link 1.1</a></li>
<li><a href="#">Drop-down link 1.2</a></li>
<li><a href="#">Drop-down link 1.3</a></li>
<li><a href="#">Drop-down link 1.4</a></li>
</ul>
<ul>
<li><a href="#">Drop-down link 2.1</a></li>
<li><a href="#">Drop-down link 2.2</a></li>
USING LINKS AND CREATING NAVIGATION
227
5

<li></li>
<li></li>
</ul>
<ul>
<li><a href="#">Drop-down link 3.1</a></li>
<li><a href="#">Drop-down link 3.2</a></li>
<li><a href="#">Drop-down link 3.3</a></li>
<li></li>
</ul>
</li>
</ul>
</li>

2. Next, edit the nested list. The list that contains the three lists that form the
columns of the drop-down needs styling. Having larger borders on multicolumn
drop-downs is a good idea, because it enables users to focus on the contents more
easily, hence the amended border setting in the following code block. The other
change is to the width setting, which must be a multiple of three (here, it’s set to
465px, meaning that each column will be 155 pixels wide). With multicolumn dropdowns,
it’s best to avoid making each column the same width as a tab, otherwise
the result will look strange.
#navigation li ul {
border: 2px solid #ad3514;
width: 465px;
position: absolute;
left: -10000px
}

3. Now, the list item within the nested list needs amending. For the previous exercise,
the #navigation li li rule dealt with the list items in the drop-down, but here it’s
primarily for the container of the three columns. Therefore, the height and width
settings need to be set to auto to enable the list item to stretch to fit its nested
items. The background image is superfluous, so it’s replaced by a flat color, and the
border-bottom pair is removed—the borders will be moved to list items within
the columns.
#navigation li li {
background: #d27448;
height: auto;
width: auto;
}

4. The link rules should be styled next. Since the links are now one level deeper in the
list, instances of li li in the selectors are changed to li li li. In this example,
this change isn’t technically necessary, but it always pays to keep your selectors as
precise and accurate as possible. For the link and visited states, padding settings
for the top-level links are overridden, as are width and height settings. For the
other states, the border used for the hover and active effects is replaced by a
change in background color. Note that the rule that originally had both the hover
and active states in the selector (#navigation li li a:hover, #navigation li

li a:active) now only requires the hover state (#navigation li li li a:hover),
because the rules have nothing in common.
#navigation li li li a:link, #navigation li li li a:visited {
text-transform: none;
padding: 10px;
width: 135px;
height: auto;
}
#navigation li li li a:hover {
background: #ad3514;
}
#navigation li li li a:active {
background: #ed1c24;
}

5. Style the column list items. Add a rule to define a width and height for the column
list items, along with a bottom border. The last of those things makes it easier to
scan the rows within the list, while the width and height settings ensure that the
layout isn’t affected if the list items have no links within. (If the width and height
settings were omitted, the list items within the columns would show their bottom
borders only underneath their content’s width—and not at all if they were empty.)
The height setting is defined in ems rather than pixels, because this makes it possible
for the list items to stretch vertically if the web page’s text is resized.
#navigation li li li {
width: 155px;
height: 3em;
border-bottom: 1px solid #ad3514;
}

6. Finally, add a rule to float and define a width for the lists that comprise the containers
for the list items styled in the previous step.
#navigation ul ul ul {
border: 0;
width: 155px;
float: left;
position: relative;
}

**NOTE :Although the drop-down examples work in currently shipping browsers, neither works
as is in Internet Explorer 6, because that browser doesn’t enable you to do anything
with the hover state unless it’s on a link. To cater for that browser, JavaScript must be
used as a backup.

Creating a drop-down menu

1. Edit the web page. For any link you want to have a drop-down menu spawn from,
nest an unordered list in its parent list item, as per the example in the following
code block.
<li id="servicesPageLink">
<a href="#">Services</a>
<ul>
<li><a href="#">Drop-down link one</a></li>
<li><a href="#">Drop-down link two</a></li>
<li><a href="#">Drop-down link three</a></li>
<li><a href="#">Drop-down link four</a></li>
</ul>
</li>

2. Create the drop-downs. Test your page now, and it will look odd because nested list
items pick up the styles for the standard list items. To start dealing with this, add
position: relative; to the #navigation li rule, which will enable nested
absolute-positioned elements to take their top and left values from their containers

rather than the page as a whole. Then, after the existing rules in the CSS, add the
#navigation li ul rule shown in the following code block. By setting position to
absolute and left to a large negative value, the nested lists (i.e., the drop-down
menus) are placed offscreen by default, but are still accessible to screen readers.
Adding the top border helps visually separate the nested list from its parent button.
#navigation li ul {
border-top: 1px solid #ad3514;
width: 185px;
position: absolute;
left: -10000px
}
Next, add the following rule to bring the nested lists back when you hover the
cursor over the parent list item. Upon doing so, the list item’s descendant list’s
display value is set to block, and it’s displayed directly underneath the parent
item.
#navigation li:hover ul {
display: block;
left: 0;
}

3. Style nested list items and links. Add the following rule to replace the default
background for list items with one specifically for the drop-down menus. The
border-bottom value visually separates each of the list items.
#navigation li li {
background: url(drop-down-menu-background.gif) repeat-y;
border-bottom: 1px solid #ad3514;
}
Next, add the following rule to style nested list item links, overriding the
text-transform and padding values of top-level list items.
#navigation li li a:link, #navigation li li a:visited {
text-transform: none;
padding-left: 10px;
}

4. The final step is to override the hover and active states. For this example, the
background value for top-level lists is overridden and the background image
removed (meaning the hover state for nested list links has no unique background).
To make the hover state stand out, the links are given a vibrant left border. This
also moves the text inward by the width of the border.
#navigation li li a:hover, #navigation li li a:active {
background: none;
border-left: 5px solid #f7bc1d;
}

These property values are common to both states, apart from the border color
(orange for the hover state and red for the active state, roughly matching the colors
applied to the top-level tab icons in the same states, although the orange is
brighter for the drop-downs so that they stand out more); therefore, add the following
rule to change only the left border’s color on the active state:
#navigation li li a:active {
border-left-color: #ed1c24;
}

Creating a CSS-only tab bar that automates the active page

1. Edit the body element—in the HTML page, edit the body start tag, adding the class
value shown. Its significance will be explained later.
<body id="homePage">

2. Edit the body rule. In the CSS document, amend the body rule as shown to add a
light gray background:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
background: #dddddd;
}

3. Style structural divs. Add the following #wrapper rule, which defines a set width for
the page, centers it, and sets the background color to white.
#wrapper {
width: 700px;
margin: 0 auto;
background: #ffffff;
}
Next, style the content div by adding the following rule, which adds a border to all
edges but the top one, and defines internal padding:
#content {
padding: 15px 15px 0;
border-right: 1px solid #898989;
border-bottom: 1px solid #898989;
border-left: 1px solid #898989;
}
These rules work slightly differently from those in the previous exercise. We want
the content borders to start right under the navigation, hence the padding
being applied to the top of the content div, rather than a margin below the
navContainer div.

4. Style the navContainer div. Add the following rule to style the navContainer div.
The font settings define a size and family. Avoid setting a line-height value,
because that makes it much harder to line up the tabs with the borders later. The
padding value applies some padding above the soon-to-be-created tabs, and the
border-bottom value finally surrounds all edges of the content div with a border.
Because the wrapper div has a white background, this currently shows through the
navContainer div, and so a background setting is applied, using the same background
color value as applied to the body element.
#navContainer {
font: 1.1em Arial, Helvetica, sans-serif;
text-align: center;
padding: 20px 0 0;
border-bottom: 1px solid #909090;
background: #dddddd;
}

5. Style the list. Add the following rule to style the list. The bottom padding value
(5px here) adds padding to the bottom of the list, and needs to be equivalent to
the padding value you want to be under the text in each tab.
#navigation ul {
padding: 0 0 5px;
}
Next, style the list items to make them display inline.
#navigation li {
display: inline;
}

6. Add the following rule to style the links. Most of the property values should be
familiar by now. Note how the border value applies a border to each link; this, in
tandem with the background value, gives all the links the appearance of background
tabs. The padding setting provides space around the link contents (and
note how the vertical padding value is the same as the bottom padding value in
step 5), and the margin-right setting adds some space between each tab.
#navigation a:link, #navigation a:visited {
text-transform: uppercase;
text-decoration: none;
color: #000000;
background: #bbbbbb;
border: 1px solid #898989;
padding: 5px 10px;
position: relative;
margin-right: 5px;
}
As per the previous exercise, the unwanted right-hand value for the rightmost tab
(in this case, the margin-right setting) can be overridden by using a contextual
selector that takes advantage of the id values defined in the HTML document’s
unordered list items.
#navigation #contactDetailsPageLink a:link, #navigation
å #contactDetailsPageLink a:visited {
margin-right: 0;
}

7. Style other link states. Add the following two rules to define the other link states.
The first makes the text slightly lighter when a link has been visited. The second
brings back the default underline on the hover state, along with making the link’s
background slightly lighter.
#navigation a:visited {
color: #222222;
}
#navigation a:hover {
text-decoration: underline;
background: #cccccc;
}

8. Create page-specific overrides. Remember back in step 1, when you defined an id
value for the body element? This can now be used to automate the active tab via
the following rule:
#homePage #homePageLink a:link, #homePage #homePageLink a:visited,
å #servicesPage #servicesPageLink a:link, #servicesPage
å #servicesPageLink a:visited, #customerSupportPage
å #customerSupportPageLink a:link, #customerSupportPage
å #customerSupportPageLink a:visited, #contactDetailsPage
å #contactDetailsPageLink a:link, #contactDetailsPage
å #contactDetailsPageLink a:visited {
background: #ffffff;
border-bottom-color: #ffffff;
}
The declaration is simple: a white background is applied and the bottom border
color is changed to white. The grouped selector is more complex, so I’ll start by
explaining the first contextual selector, which is #homePage #homePageLink a:link.
What this means is, “Apply the declaration to the link within an element with an id
of homePageLink that’s in an element with an id of homePage.” In the page you’ve
been working on, the body element has an id of homePage, and the first list element
in the unordered list has an id of homePageLink. Therefore, the link within this list
item is automatically given the style, making it look like the active tab (since the
background blends directly into the content area).
The other selectors in the grouped selector behave in the same way (in each case
for the link and visited styles); so if, for example, you change the id value of the
body start tag in the HTML document to customerSupportPage and then refresh
the web page, you’ll see the third link become the active tab.

Creating a simple horizontal navigation bar in CSS

1. Examine the web page. The web page for this exercise—graphical-navigation.
html—is designed for flexibility when it comes to styling elements on the page,
making it easy to change elements without touching the markup (this page is used
with a few modifications in subsequent exercises, too).
The page’s contents are placed within a wrapper div, within which are the masthead
and content divs. The latter contains some paragraphs, and the former
includes a navContainer div, which houses a navigation div, which in turn houses
the unordered list shown in the following code block. (This nesting of divs isn’t
required for all sites—often you can get away with a single div around the navigation
list—or, indeed, none at all, applying the id value of navigation to the list
itself; however, having an additional wrapper or two is often useful for more complex
layouts.)
The list is an unordered list. The main difference to previous lists is the inclusion of
an id value for each list item. For horizontal lists, especially those that will be highly
styled, this is worth doing, because it enables you to work all manner of CSS trickery
later on, which can benefit the web page. (In fact, some of the techniques can
be applied to vertical lists, too.)
<ul>
<li id="homePageLink"><a href="#">Home page</a></li>
<li id="servicesPageLink"><a href="#">Services</a></li>

<li id="customerSupportPageLink"><a href="#">Customer support</a>
å</li>
<li id="contactDetailsPageLink"><a href="#">Contact details</a></li>
</ul>

2. Edit the body and p rules. This design is going to have a classic feel, so in the CSS
file, edit the body rule to amend the font set, add a light gray background, and
amend the p rule to change the font size.
body {
font: 62.5%/1.5 Georgia, "Times New Roman", Times, serif;
background: #dddddd;
}
p {
font-size: 1.3em;
margin-bottom: 1em;
}

3. Style the structural divs. First, add a rule to style the wrapper div, as shown in the
following code block. This sets a fixed width for the div, centers it horizontally, and
applies borders on all edges except the top one. The background value provides a
white background for the page’s content. (Note that there’s plenty of explanation
about page layout in Chapter 7.) For the content area, add some horizontal
padding by adding the #content rule shown in the following code block.
#wrapper {
width: 700px;
margin: 0 auto;
border-right: 1px solid #898989;
border-bottom: 1px solid #898989;
border-left: 1px solid #898989;
background: #ffffff;
}
#content {
padding: 0 15px;
}

4. Style the navigation container by adding the following rule to style the
navContainer div. In this rule, the font style for the navigation bar’s links is set,
and the text-align value centers the content horizontally. The padding value
applies some padding at the top and bottom of the navContainer div, ensuring
its content doesn’t hug its edges—in design, the space is often as important as the
content, so don’t cram things in.
#navContainer {
font: 1.1em/1 Georgia, "Times New Roman", Times, serif;
background: #d7d7d7;
text-align: center;
padding: 7px 0px;
border-top: 1px solid #898989;
border-bottom: 1px solid #898989;
margin-bottom: 10px;
}

5. Style the list items. Now that the structure’s styled, it’s time to get cracking on the
list. First, add a rule to remove the default bullets from the unordered list within
the navigation div.
#navigation ul {
list-style: none;
}
Next, set the list items to display inline, as with the breadcrumbs. Add some horizontal
padding, and also, as shown, add a border to each item’s right-hand edge,
which will act as a visual separator, making each link more distinct.
#navigation li {
display: inline;
padding: 0px 9px;
border-right: 1px solid #aaaaaa;
}
If you test the page at this point, you’ll see that all the links have a right-edge border—
not a terrible crime—but from a design standpoint, the one at the far right
shouldn’t have one (after all, separators are only needed between pairs of links).
Luckily, because of the id values applied to the list items earlier, each one can be
individually styled, which also means an override can be applied to a specific link.
In this case, add the following rule, which removes the border from the list item
with an id value of contactDetailsPageLink:
#navigation #contactDetailsPageLink {
border-right: none;
}

6. The last thing to do is style the links. The following rules set the link text to uppercase,
removing the default underline and coloring them black by default. The links
are then gray on the visited state, have an underline on the hover state, and are
red on the active state.
#navigation a:link, #navigation a:visited {
text-transform: uppercase;
text-decoration: none;
}
#navigation a:link {
color: #000000;
}
#navigation a:visited {}
#navigation a:hover {
text-decoration: underline;
}
#navigation a:active {
color: #ff0000;
}

**NOTE :In this example, the color of the navigation links—which have no underline—is the
same as the body copy. While this would be a very bad idea for inline links, it’s fine for
the navigation links, because they’re obviously distinct from the text elsewhere on the
page, due to the background color and horizontal line that separates the navigation
area from the content area.

Creating breadcrumb navigation

1. Add the list. In the HTML document, add the following code for the breadcrumbs.
Note that the last item signifies the current page—this is why it’s not a link.
<ul id="breadcrumbs">
<li><a href="#">Home page</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Live gigs</a></li>
<li>London, 2008</li>
</ul>

2. Add some body padding. Add a padding value to the existing body rule.
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}

3. Style the list by adding the following rule. The font-size setting specifies the font
size for the list items, and the margin-bottom setting adds a margin under the list.
ul#breadcrumbs {
font-size: 1.2em;
margin-bottom: 1em;
}

4. Add the following rule to style the list items. By setting display to inline, list
items are stacked horizontally. The background value sets double-arrow.gif as the
background to each list item (ensure it’s in the same directory as the CSS document,
or modify the path accordingly); the positioning values ensure the background
is set at 0 horizontally and 50% vertically, thereby vertically centering it at
the left—at least once no-repeat is set, which stops the background tiling. Finally,
the padding value sets padding at the right of each list item to 10px, ensuring items
don’t touch the subsequent background image; the left padding value of 15px
provides room for the background image, ensuring the list item text doesn’t sit on
top of it.
#breadcrumbs li {
display: inline;
background: url(double-arrow.gif) 0 50% no-repeat;
padding: 0 10px 0 15px;
}

**Note that when list items are displayed inline, the default bullet points are not displayed.
This is one reason why the bullets in this example are background images,
although we also wanted something more visually relevant, right-facing arrows showing
the path direction.

Creating a vertical navigation bar with collapsible sections

1. Set up the JavaScript. Create a new JavaScript document and attach it to the HTML
file via a script element in the head of the document. (In the example files, this
document has been named vertical-navigation-bar.js.) First, add the
JavaScript lines first shown in the “Enhancing accessibility for collapsible content”
section:
var cssNode = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', 'javascript-overrides.css');
document.getElementsByTagName('head')[0].appendChild(cssNode);
Next, add the toggler script shown in the “Modularizing the collapsible content
script” section, but amend the target element as shown:
function toggle(toggler) {
if(document.getElementById) {
targetElement = toggler.nextSibling;

if(targetElement.className == undefined) {
targetElement = toggler.nextSibling.nextSibling;
}
if (targetElement.style.display == "block")
{
targetElement.style.display = "none";
}
else
{
targetElement.style.display = "block";
}
}
}

2. Amend the list. To each top-level navigation link, add the onclick attribute, as
shown following. And to each second-level list that you initially want to be invisible,
add the class attribute shown. For any list you want to be visible, instead add
style="display: block;".
<li>
<a href="#" onclick="toggle(this); return false;">Section one</a>
<ul class="collapsibleList">
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>

3. Add a style sheet. Create and save the style sheet document javascriptoverrides.
css, and add the following rule to initially hide any lists with the
collapsibleList class value in JavaScript-enabled browsers.
#navigation ul.collapsibleList {
display: none;
}
The following images show the results (which depict, from left to right, the
default, hover, and active states).

Creating a pop-up window

Pop-up windows are mostly an annoyance, especially when automated and when they
remove browser controls. However, they are occasionally useful, such as for providing a
user with brief access to terms and conditions without interrupting a checkout process.
Some portfolio sites also use pop-up windows to display larger versions of images
(although we’ll later see a better method of creating an online gallery).
Should you require a pop-up window of your very own, the JavaScript is simple:
function newWindow()
{
window.open("location.html");
}
And this HTML calls the script using the onclick attribute:
<a href="location.html" onclick="newWindow(); return false;">Open a
å new window!</a>
Note how the href attribute still has a value, which caters to users with JavaScript disabled
(loading the document into the current window). The return false part of the onclick
value ensures the href value is ignored for browsers with JavaScript activated (otherwise
both the original and pop-up window would display with the new web page).
Creating a system to open windows with varied URLs requires only slight changes to both
script and HTML. The script changes to this:
function newWindow(webURL)
{
window.open(webURL);
}

The HTML changes to this:
<a href="location-one.html" onclick="newWindow('location-one.html');
å return false;">Open location one in a new window!</a>
<a href="location-two.html" onclick="newWindow('location-two.html');
å return false;">Open location two in a new window!</a>
Note how the target location is now within the single quotes of the onclick value. This
could be any file name, and the link type can be absolute, relative, or root-relative. To provide
a warning when a pop-up is opened (as recommended by WCAG—Web Content
Accessibility Guidelines), you can add a single line to the JavaScript:
function newWindow(webURL)
{
alert("You are about to open a new window.");
window.open(webURL);
}
It’s also possible to control the settings of a pop-up window. To do so, the script needs to
be amended as follows:
function newWindow(webURL)
{
alert("You are about to open a new window.");
var newWin = window.open(webURL,"new_window",
å"toolbar,location,directories,
åstatus,menubar,scrollbars,resizable,
åcopyhistory,width=300,height=300");
newWin.focus();
}
The values within the set of quotes that begin "toolbar, location... enable you to set
the pop-up window’s dimensions and appearance. There must be no whitespace in the
features list, and it must all be on one line. Most of the items are self-explanatory, but
some that may not be are location, which defines whether the browser’s address bar is
visible, and directories, which defines whether secondary toolbars such as the links bar
are visible. Note that if you specify one or more of these, any you don’t specify will be
turned off—therefore, you must specify all the features you want in the pop-up window.
Now, a word of warning: as alluded to earlier, having control of the web browser wrenched
away from them makes some users want to kick a puppy. Therefore:
Never use JavaScript to pop up windows without the user knowing that it’s going to
happen. (The integrated alert mentioned earlier is one thing, but you should always
also mention next to the relevant link that a pop-up will be created if the link is
clicked.)

*Never create a site that automatically pops up a window and removes the window
controls.

*Never use a pop-up window unless it’s absolutely necessary.

Some designers might argue about aesthetics and for the clean nature of a browser window
at full-screen, devoid of its controls, but there are no real reasons for using pop-up
windows in this manner other than that; there are, however, counterarguments, such as
taking control from the user, the general annoyance factor, a full-screen window suddenly
covering everything else, and so on. Ultimately, pop-ups and nonrequested new windows
are a very bad thing, so avoid using them.