HTML and CSS Reference
In-Depth Information
The XHTML code snippet is the same as the one used for the vertical navigation
menus shown at the beginning of this section. For the horizontal list to display
properly, you must add a CSS configuration for the
<li>
selector within the
nav
class
as follows:
.nav li { display: inline;
list-style-type: none;
}
Focus on Accessibility
View the home0.html and wildflower0.css files in the Chapter7 folder in the student
files to experiment with this technique. See Chapter7/skipnav.html for a version of this
page that includes a transparent image configured as an internal link to the named frag-
ment maincontent. This “skip navigation” method allows visitors using screen readers
to easily skip repetitive navigation links.
WWW
Often a Web page layout will consist of a header across the top of the page with three
columns below: navigation, content, and sidebar. If you are thinking about this layout
as a series of boxes—you're thinking correctly for configuring pages using CSS! Figure
7.12 shows a wireframe sketch of this page layout design. Figure 7.13 (shown also in
the color insert section) shows a Web page configured using this design. You will create
this page in the next Hands-On Practice.
Figure 7.12
Sketch of three-
column page layout
Search WWH ::
Custom Search