| The <div> element is similar to the <span> element in that the only reason it exists is to allow designers to associate styles with chunks of material. But the chunks that the <div> element works with are generally bigger. The <div> element is a block-level element, meaning that it can encompass a variety of other elements, including paragraphs, tables, lists, other <div> elements, and so on. By contrast, the <span> element is an inline element, meaning that it always ropes off a "span" inside another element part of a paragraph, part of a table row, part of a label, and so on. The <div> element is also an important tool for using CSS to position elements on the screen to take them out of the document's normal "flow" and put them where you want them. In fact, you can use CSS positioning to accomplish many of the layout tasks often handled with tables. This brings us back to the problem of reading order, which surfaced when we visited the Metropolitan Museum site in Chapter 7. As with layout tables, when you use CSS positioning you have to bear in mind that the order in which elements appear on the screen may not match the order in which people using screen readers and talking browsers will hear them. But with CSS, this can actually be a plus: with CSS, reading order isn't necessarily bound to the display order. Screen readers and talking browsers base their reading order on the order in which they encounter elements in the source document. This means that you can sequence elements in the source document so that they'll play well on screen readers and talking browsers, then use CSS to create the visual arrangement that works best as well. Two for the price of one! That's what we've done in our next example. Here we'll show you a technique that could straighten out the problem with reading order we described in Chapter 7 while simultaneously enabling people who use screen readers and talking browsers to hear the main content of the page first, instead of plodding through all the navigation links before getting the information they want. Figure 15-9 shows a mock-up page for a class taught at the University of Texas in fall 2002. Visually, the page is divided into two areas. There is a navigation bar on the left side of the screen, with several links starting about a third of the way down the screen. The main body of the page shows the course title, a table of information about where and when to find the class and the instructor, and a paragraph headed "Course description." The navigation bar and the body of the page are separated by a thick white vertical line that runs the length of the screen. Figure 15-9. Screen shot of a page using CSS positioning to display links on the left side of the screen.  Visually, there is nothing remarkable about this page at all. And that is precisely our point! Most Web users expect to find a navigation bar on the left side of the screen, like the one on this page. But for people who use screen readers, talking browsers, and refreshable Braille displays, it can be extremely inconvenient to hear all those navigation links before they get to the "meat" of the page. This is why Section 508 requires a way to bypass those links. The Skip Navigation or Skip to Main Content link is a clunky workaround, as we noted earlier. So here is another solution: we've used CSS positioning and HTML structural markup to make both groups of users happy at the same time. The links are displayed on the left in the conventional way, but screen readers and talking browsers will speak them after reading the rest of the page. We can thank CSS positioning and HTML's block-level elements for this. The page has two main divisions (<div> elements). The first one holds the material in the main content area. The second major <div> element contains the navigation links. Placing the <div> elements in this order in the source code ensures that screen readers and talking browsers will read the main content area first. CSS positioning allows us to create the kind of visual layout that experienced Web users have come to expect, with the navigation links on the left. Here's the CSS code for the style sheet used to position the navigation links to the left of the main content while screen readers and talking browsers read the main content first. body{ position:relative; top:0; left:0; font-family:verdana,arial,sans-serif; font-weight:normal; font-size:1em; background-color:black; color:white} .main{ position:absolute; top: 0; left:20%; border-left:thick white ridge } h1{ font-family:verdana,arial,sans-serif; font-size:1.4em; font-weight:bold; font-style:italic; line-height:1.25em; color:white } h2{ font-family:verdana,arial,sans-serif; font-size:1.25em; font-weight:normal; text-decoration:none; color:white } .navlinks{ position:absolute; top:30%; left:0; width:20%; } a{ font-family:verdana,arial,sans-serif; font-size:1.2em; font-weight:normal; color:white; line-height:1.2em; } The style sheet listed above adapts an idea from a CSS tutorial by Stephanos Piperoglou [2000]. Piperoglou explains that setting an element's position property to relative (the other choices are absolute, fixed, and static) has an interesting effect when the position property of any element that's contained inside the first element is set to absolute. What happens is that the "child" element's position is now defined as absolute in relation to its "parent" element (that is, the element that contains it). In other words, setting the position property of the <body> element to relative allows us to manipulate the positions of the main and navlinks <div> elements in relation to the <body> element. |
