Tài liệu HTML Utopia: Designing Without Tables Using CSS- P10 docx

Achieving Full-height Columns File: styles.css (excerpt) #main2 { background-image: url(img/leftbg.gif); background-position: bottom left; background-repeat: repeat-y; } If you view this page now, you’ll see that our full-length faux columns are almost complete, as Figure 9.22 shows. However, the bottom of each of the columns needs a little tidying up. Figure 9.22. Our faux columns are almost complete Edit the style sheet to remove the content div’s bottom border by replacing the border property with border-top, border-right, and border-left declarations: File: styles.css (excerpt) #content { margin: 0 240px 0 160px; border-top: 1px solid #b9d2e3; border-right: 1px solid #b9d2e3; 249 Licensed to siowchen@darke.biz Chapter 9: Three-column Layouts border-left: 1px solid #b9d2e3; background-color: white; color: black; } Also remove the border from the bottom of the left-hand sidebar by removing the border-bottom declaration from the #sidebar2 rule: File: styles.css (excerpt) #sidebar2 { float: left; width: 159px; border-top: 1px solid #b9d2e3; border-left: 1px solid #b9d2e3; background-color: white; color: black; margin: 0; padding: 0; } If you view your layout in the browser, you should find that your columns appear to run the full length of the screen, as shown in Figure 9.23. 250 Licensed to siowchen@darke.biz The Content Order Problem Figure 9.23. Full-length columns Admittedly, this effect does require some fiddling around in your graphics program to prepare the background images so that they line up. However, once you’ve created your images, the effect works very well. The Content Order Problem The floated layout we created above looks fantastic. However, the absolutely positioned layout does have one point in its favor: in the markup for the absolutely 251 Licensed to siowchen@darke.biz Chapter 9: Three-column Layouts positioned version of our page, the columns can appear in any order we like. This might not seem important to you, but it’s important to those who use browsers that don’t support CSS, and users of screen readers. If we use the floated layout, these people will have to wade through all of the content of the sidebars before they get to the page’s main content, which sits at the bottom of our markup. The effect is more marked if you remove the style sheet so that you can see the markup for the content sections in order. Comment out the link to your style sheet and reload the page: you’ll be able to see how much “junk” content occurs before the main page content (Figure 9.24 illustrates). Now imagine that your site displayed the same sidebar content on every page—it would be pretty tiresome for site users to have to listen to a screen reader read out that same content for every page of your site they visited! Figure 9.24. Displaying the page without a style sheet One solution to this problem is to implement a “skip navigation” link. This link enables the user to skip over repeated or unimportant content in order to get to the real meat of the page. To effect this solution, we simply link to an id that’s located at the top of the page’s important content. 252 Licensed to siowchen@darke.biz 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 [...]... is tabular data, so a table is the best way to mark it up File: fixedwidth .html (excerpt) Footbag Freaks < /html> 262 Licensed to siowchen@darke.biz Creating the Document Pay special attention to the table’s markup This table has headings along its top and down its left-hand side (the title of each match) These headings are marked up using the th element, while the rest of the cells are marked up using td We also use the scope attribute on the headings... started with One of the things I enjoy about using CSS for layout is that it gives us the ability to put together simple pages that look attractive very quickly When the need arises, you can create a news page or simple layout for an an­ nouncement like this one in a very short space of time The heading “Announcement” is an h1 element We can address it using a selector that addresses any h1 elements... As we’ve already discussed, though tables should not be used for page design layouts, they are the ideal way to mark up tabular data, like the kind of informa­ tion you might find displayed in a spreadsheet We have a nice chunk of tabular 273 Licensed to siowchen@darke.biz Chapter 10: Fixed-width Layouts data on this page, and we’ve already marked it up correctly using the various table elements to... in this layout is very simple—it contains just the logo and tagline The logo falls into its correct place by virtue of the natural flow of the document, so let’s skip to styling the tagline beneath it using the following rule: File: fixedwidth.css (excerpt) #tagline { font-weight: bold; color: #050845; font-style: italic; margin: 0 0 0.5em 0; padding: 0 0 0 20px; } Note that you’ll need to add id="tagline"... inserting space between it and the content that will wrap around it: File: fixedwidth.css (excerpt) #worldcuplogo { float: right; margin: 0 0 20px 40px; } Once we add id="worldcuplogo" to the image in our XHTML, the logo will display to the right of the layout, the content flowing around it as shown in Fig­ ure 10.5 269 Licensed to siowchen@darke.biz Chapter 10: Fixed-width Layouts Figure 10.5 Floating the... 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... the ball image that displays to the left of the heading in our mockup We want to display it just once—by default, it would tile beneath the heading—so we set background-repeat to no-repeat We’re also using the background-position property to push the image to the left and center it vertically To stop the heading from appearing on top of the image, we’ve added padding of 30 pixels to the left of the... so open this new div after the opening tag and close it before the closing Give this div an ID of wrapper 264 Licensed to siowchen@darke.biz Centering the Content Area File: fixedwidth .html (excerpt) ⋮ Now, create an external style sheet named fixedwidth.css and add the following rules to . File: fixedwidth .html (excerpt) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">. 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