Tài liệu HTML Utopia: Designing Without Tables Using CSS- P9 pptx

The Markup File: index.html (excerpt) <h3>Move of the Month</h3> <h4>The Outer Stall</h4> <img src="img/sidebar-player.gif" alt="player demonstrating the outer stall move" height="110" width="60" class="motm-image" /> <p>Eti bibendum mauris nec nulla. Nullam cursus ullamcorper quam. Sed cursus vestibulum leo.</p> <p class="more"><a href="">more</a></p> </div> </div> <! sidebar > <div id="sidebar2"> <div class="inner"> <ul id="nav"> <li><a href="">Freestyle</a></li> <li><a href="">Tournaments</a></li> <li><a href="">Results</a></li> <li><a href="">Rules</a></li> <li><a href="">Blog</a></li> <li><a href="">FAQ</a></li> <li><a href="">Forums</a></li> <li><a href="">Organisations</a></li> </ul> <h3>The BagBlog</h3> <div id="bloglatest"> <h4>10 Apr 06</h4> <p><a href="">A New Season: On the Road Again</a></p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent henrerit iaculis arcu.</p> </div> <ul id="blog"> <li>5 Apr: <a href="">Ouch That Really Hurt</a></li> <li>3 Apr: <a href="">Experimental Moves From Spain</a></li> <li>29 Mar: <a href="">5 Ways to Lighten Up Training</a></li> </ul> <h3>Newsletter</h3> <p>To get all the latest news, tips, results and new footbag products sign up to our free newsletter.</p> <form method="post" action="" id="newsletterform"> <div> 219 Licensed to siowchen@darke.biz Chapter 9: Three-column Layouts <input type="text" name="email" id="newsletter-email" value="email@here" class="text" /> </div> <div class="searchbutton"> <input type="submit" name="btnSubmit" id="newsletter-submit" value="SUBSCRIBE" class="btn" /> </div> </form> </div> </div> <! sidebar2 > </div> <! main > </div> <! wrapper > </body> </html> You can see that I’ve wrapped this section in a div with the id sidebar2; within that is a div with a class of inner. I’ve also added some classes to the different elements, so they’re ready for us to add the CSS. Once we add this markup, the column will display below the main content area in the browser, as shown in Figure 9.2. 220 Licensed to siowchen@darke.biz Positioning the Sidebar Figure 9.2. Viewing the page in the browser after adding the sidebar2 div and contents Positioning the Sidebar We can now use CSS to position this sidebar and style its contents. Using the CSS file for the two-column layout as a starting point, find the rules for #content. Our first task is to create some space into which we can drop the sidebar. Check your Sidebar’s Location At the end of the last chapter, we showed how easy it was to move a column that was on the right over to the left by changing only two CSS properties. However, the layout we’re working toward here assumes that the sidebar sits to the right of the content, so you may need to move it back. File: styles.css (excerpt) #content { margin: 0 240px 0 160px; border: 1px solid #b9d2e3; background-color: white; 221 Licensed to siowchen@darke.biz Chapter 9: Three-column Layouts color: black; } Change the value for the left margin from 0 to 160px, to create a 160-pixel left margin on the content. Now, create a rule for #sidebar2 to position it within the 160 pixel margin to the left of the content area: File: styles.css (excerpt) #sidebar2 { position: absolute; top: 0; left: 0; } This will position the sidebar to the top and left of the relatively positioned div with the id main, as Figure 9.3 illustrates. Figure 9.3. After positioning the sidebar2 The content of sidebar2 now appears to overlap the content div, as you’d expect. All we’re doing is placing the sidebars over a space created by content’s margins. 222 Licensed to siowchen@darke.biz Positioning the Sidebar If the sidebar is wider than that margin, it will continue to display over the top of the content div. To prevent this overlap, we give sidebar2 a width value: File: styles.css (excerpt) #sidebar2 { position: absolute; top: 0; left: 0; width: 159px; border-top: 1px solid #b9d2e3; border-left: 1px solid #b9d2e3; border-bottom: 1px solid #b9d2e3; background-color: white; color: black; margin: 0; padding: 0; } I have also started to style this sidebar, giving it top, left, and bottom borders, and a background color of white. Figure 9.4 shows our progress so far. 223 Licensed to siowchen@darke.biz Chapter 9: Three-column Layouts Figure 9.4. Giving sidebar2 a width so that it doesn’t overlap the content We can now style the individual elements within sidebar2. File: styles.css (excerpt) #sidebar2 .inner { margin: 10px; } #sidebar2 .inner selects the wrapper around the sidebar contents (those that have a class of inner) and applies a ten-pixel margin between the contents of the sidebar and its border. File: styles.css (excerpt) #sidebar2 p { font-size: 90%; color: #666666; } #sidebar2 a:link, #sidebar2 a:visited { color: #245185; 224 Licensed to siowchen@darke.biz Positioning the Sidebar font-weight: bold; } Let’s also create rules for the paragraphs within sidebar2, setting the text to 90% and a dark gray color. We can also set the links within the sidebar2 div to be blue and bold. File: styles.css (excerpt) #sidebar2 h3 { color: #245185; padding-bottom: 0.2em; border-bottom: 1px solid #b9d2e3; font-size: 110%; } The headings for the blog and newsletter are marked up as level three headings, so we make these blue and give them a bottom border so that they look similar to the text in these areas of the design. Figure 9.5 shows how these styles display. Figure 9.5. After the text elements are styled 225 Licensed to siowchen@darke.biz Chapter 9: Three-column Layouts The Navigation At the top of this sidebar is a list that contains navigation items. Let’s add some specific rules to style these list items to fit with our design. Set the list style to none to remove the bullets, then set margin and padding to 0 to line the list up with the paragraph text: File: styles.css (excerpt) #nav { list-style: none; margin: 0; padding: 0; } We’ll also add a bottom border to each list item, and apply padding to create space between the items (and between each item and its border): File: styles.css (excerpt) #nav li { border-bottom: 1px solid #b9d2e3; padding: 0.4em 0 0.2em 0; font-size: 90%; } Finally, we can style the links, removing the underline from each, and setting its weight to normal (previously, we set all links in sidebar2 to display in bold). The results of this work are depicted in Figure 9.6. File: styles.css (excerpt) #nav li a:link, #nav li a:visited { text-decoration: none; color: #245185; font-weight: normal; } 226 Licensed to siowchen@darke.biz Positioning the Sidebar Figure 9.6. Styling the navigation The Blog Next, we have the blog section of the page. This area contains a featured item, which we’ve wrapped in a div with an id of bloglatest, and a list of the three most recently posted blog items. These listings would link through to the full blog entries on the completed site. To style the date on the featured blog entry, we need to style the h4 within the div bloglatest to make it orange: File: styles.css (excerpt) #bloglatest h4 { color: #ff4e00; font-size: 100%; font-weight: bold; } 227 Licensed to siowchen@darke.biz Chapter 9: Three-column Layouts On our list of blog entries, let’s set margin to 0 and padding to 20 pixels. We’ll also set the list bullets to use the more-bullet.gif image that we used elsewhere in the layout: File: styles.css (excerpt) #blog { margin: 0; padding: 0 0 0 20px; list-style: url(img/more-bullet.gif); } Finally, we’ll style the list items. For each item, the date displays in orange; the link to the article appears in blue next to it. As we’ve already styled links to display in blue font, we can make the entire list item appear in orange: the links will still be blue. Figure 9.7 shows the finished display. File: styles.css (excerpt) #blog li { font-size: 90%; padding-bottom: 0.5em; color: #ff4e00; font-weight: bold; } 228 Licensed to siowchen@darke.biz [...]... our layout using float, let’s look at a simple example that will give us a more thorough understanding of how this property works The document we’ll use for this example, replicated below, contains the same areas that we’ll include in the project site’s layout File: floatexample .html ... seems pretty easy To demonstrate, let’s add the following markup just before the closing tag of the wrapper div File: index .html (excerpt) Copyright 2006 - All Rights Reserved < /html> Add the following rules to your style sheet, to style the footer to match our design: File: styles.css (excerpt) #footer... CSS layouts using Firefox—one of the more standards-compliant browsers—then check that my design displays as expected in Internet Explorer But as you can see, this layout is relat­ ively simple, and holds together well in IE6 Figure 9.9 The completed three-column layout in IE 6 on Windows This layout is a great choice for projects for which you need a basic three-column layout with, or without, a header... File: floatexample .html Floated column example ⋮ ... 246 Licensed to siowchen@darke.biz Achieving Full-height Columns Figure 9.20 Adding a clearing element to extend the parent element’s height To create this effect, add the following to index .html: File: index .html (excerpt)   Add the following rule to your style sheet: File: styles.css (excerpt) #clearone { clear: both; height:... if the columns are shorter than the content The final piece of the puzzle is the use of the clear property on the footer div, which causes the footer always to display below the content and sidebars, without overlapping any parts of the layout As we saw in the last chapter, clear can have a value of left, right, or both Applying the clear: both declaration to the footer will clear the left- and right-hand... displays under­ neath the content and the sidebars continue to display where they’ve been placed, regardless of any other parts of the document Once you’ve taken a page element out of the document flow using position: absolute, that element will display in complete disregard of other page elements: it will simply overlap them if they’re in its way When you create a site, you can’t be certain that one... moved the different portions of our page into the correct locations Figure 9.16 shows how our page looks now 242 Licensed to siowchen@darke.biz Putting float into Practice in our Layout Figure 9.16 After using float to lay out the columns You should finish up with a layout that looks the same as our original, absolutely positioned layout However, whether you increase the amount of content in the sidebars,... your goal, here’s a method that will let you achieve it 244 Licensed to siowchen@darke.biz Achieving Full-height Columns To create this effect, we need to “fake” the appearance of full-length columns using background images The technique, popularized by Dan Cederholm’s article “Faux Columns,1” basically relies on applying background images to divs in your document, to create the appearance of columns . floatexample .html <!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> <meta http-equiv="Content-Type" content="text /html; charset=iso-8859-1"