What You'll Learn in This Hour:
- The different strategies for laying out a page in CSS
- Why it's a bad idea to use
for page layout
- The steps to replacing a table-based layout with a CSS-based structure
- How to write HTML code for CSS-based layouts
- How to use positioned content to lay out a page
- How to use floating columns to lay out a page
One of the major draws of modern CSSas supported by recent, more compliant browsersis the freedom to replace clunky HTML layout tables with structured HTML markup, styled by CSS rules. In previous hours, you've learned how to place individual portions of your web page in specific locations using absolute positioning or floating content. You can use the same types of style rules to build the visual structure of the page.
./ ADD NAME=CH20LEV1SEC1.HTML
This hour will bring together many of the techniques you've learned in previous hours for using CSS properties to lay out an entire page or even an entire website. You won't need to misuse HTML elements for page layout now that you have reliable CSS techniques for layout in your repertoire.
The examples this hour use a redesigned version of the website for the Dunbar Project (http://www.thedunbarproject.com). Dunbar School in Tucson, Arizona, was a segregated school for African-American students from 1918 until 1951, and was closed in 1978. Since then, a community group has been working to restore the school and make it into a community cultural center.
The Dunbar Project has graciously allowed the author to use their website in this book for a sample website redesign in CSS. The Dunbar Project site as it appeared in early 2006 is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20fig01 Figure 20.1]. It is mostly a dark teal color, and although it's not bad, it could be improved through the use of Cascading Style Sheets, as you'll see this hour.
Figure 20.1. The Dunbar Project's original website. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/20fig01_alt.jpg [View full size image]] File:20fig01.jpg The Problems with Layout Tables
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20fig02 Figure 20.2] shows the source view for the original version of the Dunbar Project web-site, which was not designed with CSS. Instead, multiple nested tags provide the page layout, and is used extensively.
Figure 20.2. Table-based layout can be very convoluted. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/20fig02_alt.jpg [View full size image]] File:20fig02.jpg
Tables for layout are problematic for a number of reasons. HTML purists argue against tables on principle: The tag is meant to identify data in rows and columns of information, and is not intended for page layout. Accessibility mavens will tell you that screen readers employed by visually impaired users struggle with table layout.
Table-based layouts are often harder to maintain than CSS-based layouts, requiring extensive rewriting of HTML tags to make simple changes. Later this hour, you'll see how a few CSS rules can easily move entire sections around without touching the HTML document at all.
CSS-based layouts make it easier to maintain your HTML pages without cluttering them up with and tags, and make for simpler transitions to new layouts by just swapping in a new style sheet. Your web pages laid out with CSS will be smaller (and thus load more quickly) than table-based pages. You can write web pages with the main content first in the HTML source and the navigation and footer information after, making your page more friendly to screen readers and search engines.
Writing HTML with Structure
The first step to laying out a page is to start with well-written HTML that is divided into sections for styling. This is commonly done with tags that have id attributes set on them, corresponding to the different sections of the page.
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex01 Listing 20.1], you can see a redesign of the Dunbar Project home page, which uses simple markup to store the site navigation, the content, the side navigation links, and the page footer.
Listing 20.1. Using Tags to Create Sections for Positioning
<!-- dunbar-20.1.html --><br /><html><br /><head><br /><title>The Dunbar Project</title><br /></head><br /><body><br /><div id="header"><br /><h1>The Dunbar Project</h1><br /><h2>In the Shadow of Downtown Tucson</h2><br /><div id="sitenav"><br /><ol><li><a href="index.html">Home</a></li><br /><li><a href="about/">About the Dunbar Project</a></li><br /><li><a href="gallery/">Photo Galleries</a></li><br /><li><a href="donate/">Donate</a></li><br /><li><a href="contact/">Contact</a></li></ol><br /></div> <!-- sitenav --><br /></div> <!-- header --><br /><div id="main"><br /><div id="content"><br /><h3>Welcome to The Dunbar Project Website</h3><br /><img src="DunbarTop.jpg" alt="[Dunbar School]"><br /><p>Dunbar School was completed in January 1918, for the<br />purpose of educating Tucson's African-American students.<br />The school was named after <a href="poet.html">Paul<br />Laurence Dunbar</a>, a renowned African-American poet.<br />African-American children in first through ninth grades<br />attended Dunbar until 1951, when de jure segregation was<br />eliminated from the school systems of Arizona. When<br />segregation in Arizona was eliminated, Dunbar School<br />became the non-segregated John Spring Junior High School,<br />and continued as such until 1978 when the school was<br />closed permanently.</p><br /><!-- ... more content omitted ... --><br /></div> <!-- content --><br /><div id="sidebar"><br /><h3>Dunbar Project</h3><br /><ol><li><a href="plan/">The Dunbar Site Plan</a></li><br /><li><a href="auditorium/">Dunbar Auditorium</a></li><br /><li><a href="history/">School History</a></li><br /><li><a href="proposal/">Project Proposal</a></li><br /><li><a href="donors/">Dunbar Donors</a></li><br /><li><a href="poet.html">About Paul Laurence Dunbar,<br />Poet</a></li><br /><li><a href="links/">Related Links</a></li></ol><br /><h3>Coalition Partners</h3><br /><ol><li>The Tucson Urban League</li><br /><li>The Dunbar Alumni Association</li><br /><li>The Dunbar/Spring Neighborhood Association</li><br /><li>The Juneteenth Festival Committee</li></ol><br /><h3>Individual Members</h3><br /><ol> <!-- ... list of donors omitted ... --> </ol><br /></div> <!-- sidebar --><br /><div id="footer"><br /><p id="note501c3">The Dunbar Project is a 501c(3) organization,<br />and your contributions are tax deductible.</p><br /><p id="copyright">Copyright © 2006 by the Dunbar<br />Project. Questions?<br /><a href="mailto:webmaster@thedunbarproject.com"<br />>Mail the Webmaster.</a></p><br /></div> <!-- footer --><br /></div> <!-- main --><br /></body><br /></html><br />
|
You can download a full copy of this HTML file from the book's website; the content has been cut for space in this listing.
The structure of this page is defined by the tags with id attributes. The general skeleton (with content omitted) consists of the following:
<div id="header">
<div id="sitenav"></div>
</div> <! header >
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div> <! main >
Comments are used with the closing tags as reminders about which is being closed; it makes the page easier to edit later.
The page is constructed of two sections: a header and a main body. Each of these has one or more subsections. This structure provides what's needed to redesign and lay out the page.
Why this particular structure? There are actually many ways you could structure such the page, inserting tags appropriately. This skeleton is simply the method chosen for this example, to get the specific styles used later on. During the web development process, you might go back to your HTML and add or remove tags while styling to give more flexibility when creating page layouts.
The number of tags you use will vary from layout to layout. Some web designers believe strongly in using only a minimum number of tags, whereas others add them freely whenever needed. The approach for this example is down the middle between those extremes: There are enough to make it easy to illustrate how CSS-based layout works, but not so many that we're adding extraneous tags just because we can.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20fig03 Figure 20.3] shows the new HTML page without any styles applied.
Figure 20.3. An unstyled page, ready for layout. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/20fig03_alt.jpg [View full size image]] File:20fig03.jpg
Writing a Layout Style Sheet
With an HTML page ready for styling, the next step is to write the style sheet. There are several questions to consider regarding how to lay out the page.
The first is a technical question: Will you use absolute positioning for layout, or will you use floated columns? You can get the same general layout effects from both techniques. Positioning is a little bit easier to grasp, at first, so this example uses absolute positioning. Later this hour, however, you'll learn how to lay out the same HTML page with the float property.
You need to figure out how many columns you want. There's a slight increase in complexity when you have more columns, but the specific techniques remain the same whether you're using two columns, three columns, or more. In this redesign, two columns are used to avoid making the example overly complex.
Finally, you need to determine whether you are using a fixed layout or a liquid layout. A fixed layout is one that defines a specific width for an entire page; for example, it may be always 700 pixels across, and excess space in the browser simply becomes wider margins. A liquid layout is one that grows larger (or smaller) based on the user's screen resolution and browser window size.
There are advantages and disadvantages to both fixed and liquid layouts. A fixed layout may be easier to create and easier to read on larger monitors; a liquid layout is more adaptable but could result in overly long lines, which are harder to read. In this example, the Dunbar Project site will use a liquid design with margin size based on em units.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex02 Listing 20.2] is a style sheet that starts to set up the layout choices.
Listing 20.2. A Style Sheet for Page Layout
/* dunbar-layout-20.2.css */<br /><br />body { margin: 0; padding: 0;<br />background-color: silver; }<br />#header { background-color: black; color: white; }<br />#sitenav ol { padding: 0; margin: 0;<br />display: inline; }<br />#sitenav li { display: inline; padding-left: 1em;<br />margin-left: 1em; border-left: 1px<br />solid black; }<br />#sitenav li:first-child<br />{ padding-left: 0; border-left: none;<br />margin-left: 0; }<br />#sitenav li a { color: white; }<br />#main { padding: 0 12em 2em 2em;<br />position: relative;<br />background-color: gray; }<br />#content { background-color: white; }<br />#sidebar { position: absolute; width: 10em;<br />right: 1em; top: 1em; }<br />#sidebar h3 { color: white;<br />background-color: black; }<br />#sidebar ol { margin: 0 0 1em 0;<br />background-color: white;<br />border: 2px solid black; }<br />#footer { background-color: white; }<br />
|
This style sheet is deliberately plain and simple, with colors of black, gray, silver, and white to make it easier for you to identify the various sections of the page.
So what's happening here?
- The first rule sets the margin and padding of the <body> to 0. This is an important first rule for layout because browsers typically add one or the other (or both) to any web page.
- The #sitenav rules in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex02 Listing 20.2] are used to turn the ordered list of links into a horizontal navigation bar.
- The #main section is set to position: relative to become the containing block around the #content, #sidebar, and #footer sections.
- The #main section is also given a large padding on the right, 12em. This is where the #sidebar will be located.
- Absolute positioning is used to move the #sidebar into the margin, out of its place in the normal flow of content. It is positioned 1 em to the left of the right edge of its containing block (#main) by right: 1em, and 1 em down from the top edge of the containing block by top: 1em.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20fig04 Figure 20.4] shows the results of linking this style sheet to the HTML file from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex01 Listing 20.1].
Figure 20.4. Positioning properties define the rough outline of the page. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/20fig04_alt.jpg [View full size image]] File:20fig04.jpg
It's still quite rough, but you can see the different sections moved into place. You should note the silver bars above and below the header. Where did they come from, and why?
The silver bars are the result of the background color set on the <body> showing through. They are formed because of the default margin properties set on the and headings used on the page. Remember that margins are outside of the border of an element's box, and the background-color property on a box colors only the interior content, not the margin. This applies even when you have a wrapped around a heading, such as . The margin extends beyond the edge of the 's background-color.
To fix this, we explicitly set the heading margins to zero on the heading tags. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex03 Listing 20.3] is a style sheet that not only does that, but also assigns colors, fonts, and other styles on the site. The teal, purple, white, and yellow colors were chosen to reflect not only the original design of the website, but also the actual colors used at the Dunbar school auditorium as well.
Listing 20.3. A Style Sheet for Colors and Fonts
/* dunbar-colors-20.3.css */<br /><br />body { font-family: Optima, sans-serif; }<br />a:link { color: #055; }<br />a:visited { color: #404; }<br />#header { text-align: center;<br />color: white; background-color: #055; }<br />#header h1, #header h2<br />{ margin: 0; }<br /><br />#header h1 { color: #FFFF00; font-size: 250%; }<br />#header h2 { font-weight: normal; font-style: italic; }<br />#sitenav { color: white; background-color: #404; }<br />#sitenav ol { font-size: 90%; text-align: center; }<br />#sitenav li { margin-left: 1em;<br />border-left: 1px solid #DD0; }<br />#sitenav li a:link, #sitenav li a:visited<br />{ color: white; text-decoration: none; }<br />#sitenav li a:hover<br />{ color: #DDDD00; }<br /><br />#main { background-color: #055; }<br /><br />#content { background-color: white; padding: 1em 5em; }<br />#content h3 { margin-top: 0; }<br />#content p { font-size: 90%; line-height: 1.4; }<br /><br />#sidebar h3 { font-size: 100%; color: white; margin: 0;<br />font-weight: normal; padding: 0.125em 0.25em;<br />background-color: #404; }<br />#sidebar ol { background-color: white; border: 2px solid #404;<br />border-top: 0; margin: 0 0 1em 0;<br />padding: 0.125em 0.25em; }<br />#sidebar li { font-size: 85%;<br />display: block; padding: 0.125em 0; }<br />#sidebar li a:link, #sidebar li a:visited<br />{ text-decoration: none; color: #055; }<br />#sidebar li a:hover { color: #404; }<br /><br />#footer { background-color: #404; color: white;<br />padding: 0.5em 5em; }<br />#footer p { margin: 0em; font-size: 85%; }<br />#footer p a:link, #footer p a:visited<br />{ color: #DDDD00; }<br />
|
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20fig05 Figure 20.5] shows the HTML file from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex01 Listing 20.1] with both the layout style sheet from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex02 Listing 20.2] and the colors and fonts style sheet from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex03 Listing 20.3].
Figure 20.5. Fonts and colors help define the website's look. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/20fig05_alt.jpg [View full size image]] File:20fig05.jpg
As you can see, the styled page in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20fig05 Figure 20.5] looks quite different from the unstyled version in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20fig03 Figure 20.3].
Re-Ordering Sections with Positioning Styles
The page in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20fig05 Figure 20.5] looks okay, but let's say that you got this far into the web design process and you suddenly decided that you want to have the site navigation bar located on top of the headline, rather than below it.
You could go in and change your HTML source around. This would work, but it would introduce a problem. The order of the HTML in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex01 Listing 20.1] is sensiblethe name of the site is given first, and then the navigation menu. This is how users of non-CSS browsers such as Lynx will read your page, and also how search engines and screen readers will understand it as well. Moving the title of the page after the list of links doesn't make much sense.
Instead, you can use CSS positioning properties to reformat the page without touching the HTML file. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex04 Listing 20.4] is a style sheet to do exactly that.
Listing 20.4. Moving One Section Before Another
/* dunbar-move-20.4.css */<br /><br />#header { padding: 1.25em 0 0.25em 0;<br />position: relative;<br />background-color: #404; }<br />#sitenav { position: absolute;<br />top: 0; right: 0;<br />border-bottom: 1px solid #DDDD00;<br />width: 100%;<br />background-color: #055; }<br />
|
What's happening here?
- The #header section encloses the #sitenav in the HTML source, so by setting it to position: relative, it now becomes the containing block for the site navigation links.
- Padding is added to the top of the #header section. This is where subsequent rules will place the site navigation menu; the padding reserves the space for it.
- Absolute positioning properties align the top-right corner of the #sitenav section with the top-right corner of its containing block, the #header.
- Giving a width of 100% to the #sitenav ensures it will reach across the full width of its containing block, which is, in this case, as wide as the browser display window.
- Finally, colors are swapped on the #header and the #sitenav to make them fit in better with the overall design in their new locations, and a yellow border is added to the bottom of the navigation links.
You can see the effects of these changes in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20fig06 Figure 20.6].
Figure 20.6. The navigation menu is now above the page headline. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/20fig06_alt.jpg [View full size image]] File:20fig06.jpg
| Try it Yourself: Redesign the Layout of a Page
You just learned how to move the site navigation menu around. What if you want to make further changes to the page? Try these steps to get familiar with how easy it is to change the layout with CSS:
|
> |
1. |
Download a copy of the Dunbar Project page for editing. You can get all the files used in this hour from the book's website. The file dunbar.html contains the complete HTML page, and dunbar-full.css has all the style rules listed in this chapter combined into a single style sheet.
|
2. |
Move the sidebar to the left side of the page instead of the right. To do this, you need to make space for it in the left gutter by changing the padding rule on the #main section to #main { padding: 0 2em 2em 12em; }<br /> |
3. |
Then change the positioning offset properties the #sidebar. You don't even have to change the rule for the top property; just replace the property name right with left.
|
4. |
Reload the page. You should now see the menu bar on the left side of the screen.
|
5. |
Next, move the #footer section. Even though the id of the is "footer", there's nothing magical about that name that means it needs to be at the bottom of the page. Place it on the right side, where the sidebar used to be located. First clear some space: #main { padding: 0 12em 2em 12em; }<br /> |
6. |
Then reposition the footer with these rules: #footer { position: absolute;<br />top: 1em; right: 1em;<br />width: 10em;<br />padding: 0; }<br />#footer p { padding: 0.5em; }<br /> |
7. |
Reload the page. The #footer is now no longer a footer, but a third column on the right side of the page.
|
|
The Floated Columns Layout Technique
You can also lay out a web page by using the float property rather than positioning properties. This method is a little bit more complex, but is favored by some designers who prefer the versatility. In addition, floated columns can be written with fewer tags, and in some cases deal better with side columns that are shorter than the main text.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex05 Listing 20.5] is a style sheet demonstrating how you can float entire columns on a page with CSS. This is a replacement for the dunbar-layout-20.2.css style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex02 Listing 20.2]. The new style sheet places the menu bar on the left instead of the right, just for variety's sakethere's nothing inherently left-biased about floated columns (or right-biased about positioning).
Listing 20.5. Float-Based Layouts in CSS
/* dunbar-float-20.5.css */<br /><br />body { margin: 0; padding: 0; }<br />#sitenav ol { padding: 0; margin: 0;<br />display: inline; }<br />#sitenav li { display: inline; padding-left: 1em;<br />margin-left: 1em; border-left: 1px<br />solid black; }<br />#sitenav li:first-child<br />{ padding-left: 0; border-left: none;<br />margin-left: 0; }<br /><br />/* This is what positions the sidebar: */<br />#main { padding: 0 2em 2em 12em; }<br />#content { float: left; }<br />#sidebar { float: left; width: 10em;<br />position: relative;<br />right: 11em; top: 1em;<br />margin-left: -100%; }<br />#sidebar ol { margin: 0 0 1em 0; }<br />
|
What does this style sheet do?
- The first section simply duplicates the site navigation bar code from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex02 Listing 20.2], so that the entire style sheet can be replaced by this one.
- Starting at the second comment, the code for positioning the columns appears. The first rule sets the #main section to have a wide gutter on the left, which is where we will be placing the sidebar.
- Both the #content and #sidebar sections are set to float. This means that they line up on the left side of the #main section, just inside the padding.
- A width is given to the #sidebar of 10emthe same width as in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10lev1sec2.html#ch10ex02 Listing 10.2]. The size was chosen because that allows 1 em of space around it, after it is placed inside the 12 em gutter set by the padding rule on #main.
- A negative margin is set on the left side of the #sidebar, which actually makes it overlay the #content section. Relative positioning is then used, via the right and top rules, to push the sidebar into the correct place in the gutter.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20fig07 Figure 20.7] shows this style sheet applied to the HTML file in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex01 Listing 20.1], along with the colors and fonts style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex03 Listing 20.3] and the style sheet from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20ex04 Listing 20.4], which relocated the site navigation menu.
Figure 20.7. The sidebar is positioned as floating content. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/20fig07_alt.jpg [View full size image]] File:20fig07.jpg
./ ADD NAME=CH20LEV1SEC2.HTML
Summary
Tables have long been used in web design to lay out a web page. However, this misuse of markup introduces a plethora of complications, from accessibility concerns to complexity problems. Using CSS for layout can clean up your HTML code and produce flexible designs that can be updated easily to new styles.
Laying out a page with CSS starts with adding sections to the HTML, using s with ID selectors. These are then arranged in vertical columns, through the use of either positioning rules or the float property. With CSS layouts, it's not difficult to re-order and reshape the page simply by changing the style sheet.
./ ADD NAME=CH20LEV1SEC3.HTML
Workshop
The workshop contains a Q&A section, quiz questions, and activities to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20qa1q1a1 Q.] |
Is it ever okay to use tables for layout? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20qa1q1 A.] |
Never, ever, ever! Well, almost. CSS layouts generally are more efficient and versatile than -based code, but if you are careful to test your layout tables in a browser such as Lynx to make sure that the site is usable without tables, you can probably get away with it. Tables aren't awful for laying out a page, and CSS can be tricky when you're dealing with grid-based designs. In general, though, you're better off using CSS whenever you can.
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20qa1q2a2 Q.]
| Which are better measurements for layouts, pixels or percentages?
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20qa1q2 A.]
| Some web designers, especially those from a print background or who have picky clients to please, swear by pixels. With some patience (and possibly work-arounds for browser quirks, as described in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch24.html#ch24 Hour 24], "Troubleshooting and Browser Hacks"), you can get close to pixel-perfect designs in CSS. Other designers like percentage measurements, which scale with the size of the text window. Personally, I prefer em measurements, which are based on the user's chosen font size. There's no clear-cut advantage to any approach, however; all have their pros and cons. You can experiment with a variety of measurement types, and don't be afraid to mix and match them sensibly on your sitefor example, designating column widths in percentages but also setting pixel-based min-width and max-width values.
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20qa1q3a3 Q.]
| Are there problems with using ems for layout?
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20qa1q3 A.]
| Only if you're not careful. The biggest problems result from setting margins, padding, or positioning properties based on em values, and then changing the font size of those values. For example, you might overlook the effects of the font-size rule buried in these declarations:
#sidebar { right: 1em; top: 1em;<br />text-align: right; color: white;<br />font-family: Verdana, sans-serif;<br />font-size: 50%; }<br />
This won't actually be located 1 em in each direction from the corner of its containing block; it will be 0.5 em from the right, and 0.5 em from the top. If you are going to change the font size within a section that uses ems for dimensions or placement, set the font-size rules on the contents of the box, as done in this chapter's style sheets with #sidebar h3 { ... } and #sidebar ol { ... } rules. You could also add an extra inside the sidebar, and set the font-size rule on that . |
Quiz
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20qa2q1a1 1.] |
Which property tells the text to start flowing normally again, after a floated column? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20qa2q2a2 2.] |
How do you designate the containing block for an absolutely positioned element? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20qa2q3a3 3.] |
What kind of rules would you write to change an ordered list of navigation links into a horizontal navigation bar? |
Answers
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20qa2q1 1.] |
The clear property, which was introduced in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15], "Alignment," can be used after floated columnsfor example, if you want a footer to reach across the entire browser window below the floated columns. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20qa2q2 2.] |
As explained in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch19.html#ch19 Hour 19], "Absolute and Fixed Positioning," you set the containing block by changing the position property, usually to a value of relative (with no offset properties designated). |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch20qa2q3 3.] |
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch20lev1sec1.html#ch20ex02 Listing 20.2] has an example of a style sheet with rules to do that, using the display property as described in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16], "Borders and Boxes." |
Exercises
Practice the following exercises:
- What kind of layouts can you create with CSS? Choose your favorite siteseither your own or some you enjoy usingand duplicate their layout styles with CSS. Existing sites make good models for doing your own practice, but keep in mind that unless you get permission, you shouldn't simply steal someone else's code. Start with the visual appearance as you see it on the screen, and draw out boxes on paper as guidelines showing you where various columns are located. Use that as your model to write the HTML and CSS for building a similar layout.
- Try both of the techniques described in this hourusing absolutely positioned content and using floating columns. Start with one version and convert it over to the other. Find a style of page that looks right to you, and the CSS code that you feel is easiest to understand, apply, and modify consistently.
./ ADD NAME=CH21.HTML | |
|
