The Content Order Problem
To see this technique in action, add a link to the navigation list in the page’s
header:
File: index.html (excerpt)
<ul>
<li><a href="">Contact Us</a> | </li>
<li><a href="">About Us</a> | </li>
<li><a href="">Privacy Policy</a> | </li>
<li><a href="">Sitemap</a> | </li>
<li><a href="#content">Jump to content</a></li>
</ul>
Load the page in your browser and click the link, as shown in Figure 9.25. The
page will jump down a little, so that the top of the content div is as close as
possible to the top of the viewport.
Anchors Away
You might be used to achieving this effect using an <a> tag with a name at-
tribute, but modern browsers now support linking directly to an element’s
id, which spares you having to insert additional and otherwise useless anchor
elements.
253
Licensed to siowchen@darke.biz
Chapter 9: Three-column Layouts
Figure 9.25. Clicking the link enables users to skip easily to the
main content
These links aren’t particularly useful for visitors who don’t use screen readers or
text-only browsers, though, and various methods have been devised to hide these
links so they’re available only via screen readers and browsers that don’t support
CSS. Unfortunately, due to the way that some screen readers interpret CSS and
JavaScript, these methods can be problematic. So, for optimum accessibility, it’s
recommended that you keep the link visible and locate it somewhere near the
top of the content. Some site owners, such as Molly Holzschlag,
2
have devised
ways of partially hiding the links. On Molly’s site, pictured in Figure 9.26, the
link doesn’t appear until you hover your mouse over the area at the top of the
screen.
2
http://www.molly.com/
254
Licensed to siowchen@darke.biz
Other Layout Methods
Figure 9.26. The “skip to content” link on molly.com
Other Layout Methods
There are other methods of creating multiple-column layouts with a footer that
can allow you to order your source code more usefully. However, these techniques
tend to entail other compromises. For example, the Source Ordered Columns
example on Position is Everything,
3
pictured in Figure 9.27, offers one alternative
layout method. The compromise is that all of the columns need to be liquid: they
must be set with percentage widths, rather than set with fixed widths that use
pixel values.
3
http://positioniseverything.net/ordered-floats.html
255
Licensed to siowchen@darke.biz
Chapter 9: Three-column Layouts
Figure 9.27. Source ordered columns on Position is Everything
Position is Everything is an excellent source of demos and new ideas for creating
CSS layouts. The site also offers an article called “In Search of the One True
Layout”,
4
which provides an example of a three-column layout with a footer that
behaves as required for the example above. However, it uses some complex
techniques and many browser hacks. As you continue to work with CSS and de-
velop your confidence with this technology, these examples can be invaluable in
helping you to solve problems, but they’re also fun to experiment with in your
spare time.
Summary
In this chapter, we learned how to change an existing layout by adding another
column. Then, we added a footer to our layout and experienced first-hand the
problems footers can cause within an absolutely positioned layout. By recreating
the same layout from a slightly different starting point, we overcame these
problems and produced a layout that positioned elements in a very different
way—without needing to redevelop our style sheet from the ground up!
4
http://positioniseverything.net/articles/onetruelayout/
256
Licensed to siowchen@darke.biz
Summary
No doubt, you’ve already realized that there’s no single, ideal way to address the
problems posed by CSS layouts. Whenever you tackle a new design, you’ll need
to make a decision as to which type of layout best suits your needs. However, as
we saw in this chapter, in most cases it’s not too difficult to change your mind
later, and switch to a different layout method if you need to.
In the next chapter, we’ll look at another type of layout—the fixed-width lay-
out—and consider some of the ways in which we can create these types of layouts.
Of course, we’ll also address the issues that you’re likely to encounter as you do
so.
257
Licensed to siowchen@darke.biz
258
Licensed to siowchen@darke.biz
10
Fixed-width Layouts
In the last two chapters, we’ve been creating layouts that we call liquid lay-
outs—those that stretch to fit the size of the user’s browser window. This ap-
proach gives the user control over the size at which they view the design, as it
allows them to resize their window. The other type of layout you may wish to
build is a fixed-width layout. In this type of layout, we fix the width of the
content area to a measurement that will allow the user to avoid scrolling horizont-
ally on most screens.
In this chapter, we’ll create a fixed-width layout that’s centered in the user’s
browser window. Along the way, we’ll look at a few techniques that we can use
to style tables of data effectively, and we’ll discuss a method by which you can
enable your site visitors to use a different layout if they find your fixed-width
layout difficult to read.
Licensed to siowchen@darke.biz
Chapter 10: Fixed-width Layouts
The Layout
Figure 10.1. A mockup of the fixed-width layout
260
Licensed to siowchen@darke.biz
Creating the Document
We will start, as in the last chapters, with a mockup that our designer has created
in Fireworks; this is presented in Figure 10.1. As you can see, this layout doesn’t
have a great deal of content. If the table was stretched to the full width of the
page, it might look a little sparse and be difficult to read in a wide browser win-
dow. This is a situation where we might choose to use a fixed-width layout.
Creating the Document
Once again, create an XHTML or HTML document and save it as fixed-
width.html
. Ensure that all of the content in the document is marked up correctly,
then submit it to the W3C validator so you can be certain that the file doesn’t
contain any markup errors that will create problems when you start to add CSS.
A Tabular Layout
Although we discourage using tables for page layout purposes, remember
that using tables is perfectly valid—in fact, it’s recommended—for the display
of tabular data such as might be stored in a spreadsheet. The match schedule
shown in Figure 10.1 is tabular data, so a table is the best way to mark it
up.
File: fixedwidth.html (excerpt)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Footbag Freaks</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css"
href="fixedwidth.css" />
</head>
<body>
<div id="header">
<img src="img/logo.gif" alt="Footbag Freaks" height="77"
width="203" />
<p>The Home of the Hack</p>
</div> <! header >
<div id="content">
<img src="img/player.gif" height="272" width="111"
alt="World Cup 06 Melbourne" />
<h1>Announcement</h1>
<h2>2006 FOOTBAG WORLD CUP DRAW</h2>
<p>Melbourne, Australia. July 21st - 27th</p>
261
Licensed to siowchen@darke.biz
Chapter 10: Fixed-width Layouts
<p>Footbag Freaks is pleased to announce that the draw for
the biggest and most prestigious event in global footbag
is coming to Melbourne in July, 2006 with the staging of
the Footbag World Cup.</p>
<p>Seen as the pinnacle of achievement in the sport, the
2006 World Cup will bring together over 200 of the
world's premier footbag experts, with representative
teams expected from over 40 nations. Entries will close
on March 2, 2006. Tickets to the event will go on sale
from January 1, 2006.</p>
<table class="schedule" summary="Schedule of matches for the
Footbag 2006 World Cup">
<caption>Event Schedule</caption>
<thead>
<tr>
<th scope="col">Match</th>
<th scope="col">Scheduled</th>
<th scope="col">Country</th>
<th scope="col">Vs.</th>
<th scope="col">Country</th>
<th scope="col">Winner plays </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><a href="#">Match 1</a></th>
<td><a href="#">July 21st :12:00pm</a></td>
<td>England</td>
<td>vs.</td>
<td>New Zealand</td>
<td>Winner of Match 12</td>
</tr>
<tr>
⋮
<th scope="row"><a href="#">Match 12</a></th>
<td><a href="#">July 24th :7:00pm</a></td>
<td>Mexico</td>
<td>vs.</td>
<td>Iceland</td>
<td>Winner of Match 1</td>
</tr>
</tbody>
</table>
</div> <! content >
</body>
</html>
262
Licensed to siowchen@darke.biz
Không có nhận xét nào:
Đăng nhận xét