Learning Web Design Third Edition- P31 pot

Part III: CSS for Presentation 286 Floating a b c d e f g h i j k l m n o p q r s t u v w x y z Inline content reflows to fit the width of the block. a b c d e f g h i j k l m n o p q r s t u v w x y z Blocks fill the available width. Blocks are layed out in the order in which they appear in the source. Each block starts on a new line. <p> <h1> <p> <p> <p> <h1> <p> <p> Figure 15-1. One more example of the normal flow behavior. Objects in the normal flow affect the layout of the objects around them. This is the behavior you’ve come to expect in web pages—elements don’t overlap or bunch up, they make room for one another. We’ve seen all of this before, but in this chapter we’ll be paying attention to whether elements are in the flow or removed from the flow. Floating and positioning changes the relationship of elements to the normal flow in dif- ferent ways. Let’s first look at the special behavior of floated elements (or “floats” for short). Floating Simply stated, the float property moves an element as far as possible to the left or right, allowing the following content to wrap around it. It is not a posi- tioning scheme per se, but a unique feature built into CSS with some interest- ing behaviors. Floats are one of the primary tools of modern CSS-based web design, used to create multicolumn layouts, navigation toolbars from lists, and table-like alignment without tables. It’s exciting stuff. Let’s start with the float property itself. float Values: left | right | none | inherit Default: none Applies to: all elements Inherits: no The best way to explain floating is to demonstrate it. In this example, the float property is applied to an img element to float it to the right. Figure 15-2 shows how the the paragraph and the contained image is rendered by default (top) and how it looks when the float property is applied (bottom). Dealing with Browser Bugs This is a good time to address the unfortunate topic of browser bugs. This book presents the way CSS is supposed to work, but in reality, browsers have bugs and uneven support for the CSS2.1 standard that make getting a layout to behave consistently a major headache. Although no browser is perfect, all eyes turn to Internet Explorer for Windows because it makes up the lion’s share of web traffic (over 80% as of this writing). It also has a host of notorious bugs related to page layout such as the IE5/5.5 Box Model Problem, the “Guillotine Bug,” the “Peekaboo Bug,” and the “Double Float-Margin Bug,” just to name a few. Unfortunately, the techniques for dealing with browser bugs are beyond the scope of this book (in fact, they could fill a small book in themselves). In addition, bug workaround best practices change frequently, so information in a book is likely to get stale. However, I do encourage you to become famiilar with the ways your pages (especially those with floats and positioned elements) are likely to misbehave in popular browsers. In many cases, you can adapt your design to avoid the bug. There are also techniques for giving specific browsers the CSS rules they need (or make sure they don’t get the ones they don’t understand). The following resources are good starting places to get up to speed on the browser issues developers care about most, and what fixes are available. Floating Chapter 15, Floating and Positioning 287 The markup <p><img src="crown.gif" alt="" />They went down, down, </p> The style sheet img { float: right; } p { padding: 15px; background-color: #FFF799; border: 2px solid #6C4788; } image moves over and text wraps around it Inline image in the normal flow Inline image floated to the right. space next to the image is held clear Figure 15-2. The layout of an image in the normal flow (top), and with the float property applied (bottom). That’s a nice effect we’ve gotten rid of a lot of wasted space on the page, but now the text is bumping right up against the image. How do you think you would add some space between the image element and the surrounding text? If you guessed “add a margin,” you’re absolutely right. I’ll add 10 pixels of space on all sides of the image using the margin property (Figure 15-3). You can begin to see how all the box properties work together in page layout. img { float: right; margin: 10px; } . . . continued from previous page Position Is Everything www.positioniseverything.net This site run by Big John and Holly Bergevin explains browser bugs and “interesting browser behaviors.” Note that some of the solutions on this site (the well- known “Holly Hack” in particular) are being reconsidered now that the release of Internet Explorer 7 makes them obsolete or problematic. Be sure to check the home page for the latest updates and information. Quirksmode Bug Reports www.quirksmode.org/bugreports/ Peter Paul Koch has created a repository where anyone can note browser bugs and discuss workarounds. The archive of bugs is searchable by browser version. CSS-discuss Wiki css-discuss.incutio.com The css-discuss mailing list site maintains an archive of links to sites related to CSS “hacks.” See css-discuss.incutio.com/ ?page=CssHack and css-discuss. incutio.com/?page=BrowserBugs Web Standards Group webstandardsgroup.org/resources/ The Web Standards Group keeps a list of up-to-date links to CSS browser bugs. Look for the link on the Resources page. IE5/Mac Bugs and Fixes www.macedition.com/cb/ ie5macbugs/index.html A good resource if your traffic logs indicate you should provide page layout support for IE5/Mac (the most CSS-compliant browser for Mac OS 9 users). Part III: CSS for Presentation 288 Floating Indicates outer margin edge (this rule would not appear in the actual web page) Figure 15-3. Adding a 10-pixel margin around the floated image. Some key behaviors of floated elements are apparent in the previous two figures: A floated element is like an island in a stream. First and foremost, you can see that the image is both removed from its position in the normal flow, yet continues to influence the surrounding content. The subesquent paragraph text reflows to make room for the floated img element. One popular analogy compares floats to islands in a stream—they are not in the flow, but the stream has to flow around them. This behavior is unique to floated elements. Floats stay in the content area of the containing element. It is also important to note that the floated image is placed within the content area (the inner edges) of the paragraph that contains it. It does not extend into the padding area of the paragraph. Margins are maintained. In addition, the margin is held on all sides of the floated image, as indi- cated in Figure 15-3 by the blue, dotted line. In other words, the entire element box, from outer edge to outer edge, is floated. More floating examples Those are the basics let’s look at more examples and explore some additional floating behaviors. Before style sheets, the only thing you could float was an image by using the deprecated align attribute. With CSS, it is possible to float any (X)HTML element, both inline and block-level, as we’ll see in the following examples. Floating an inline text element In the previous example, we floated an inline image element. This time, let’s look at what happens when you float an inline text (non-replaced) element (Figure 15-4). The markup <p><span class="disclaimer">Disclaimer: The existence of silver, gold, and diamond trees is not confirmed.</span>They went down, down, down, till at last they came to a passage </p> Floating Chapter 15, Floating and Positioning 289 The style sheet span.disclaimer { float: right; margin: 10px; width: 200px; color: #FFF; background-color: #9D080D; padding: 4px; } p { padding: 15px; background-color: #FFF799; border: 2px solid #6C4788; } Figure 15-4. Floating an inline text (non-replaced) element. From the looks of things, it is behaving just the same as the floated image, which is what we’d expect. But there are some subtle things at work here that bear pointing out. Always provide a width for floated text elements. First, you’ll notice that the style rule that floats the span includes the width property. In fact, it is necessary to specify a width for floated text elements because without one, the content area of the box expands to its widest pos- sible width (or, on some browsers, it may collapse to its narrowest possible width). Images have an inherent width, so we didn’t need to specify a width in the previous example (although we certainly could have). Floated inline elements behave as block elements. Notice that the margin is held on all four sides of the floated span text, even though top and bottom margins are usually not rendered on inline elements (see Figure 14-16 in the previous chapter). That is because all floated elements behave like block elements. Once you float an inline ele- ment, it follows the display rules for block-level elements, and margins are rendered on all four sides. Margins on floated elements do not collapse, however. And speaking of block-level elements It is necessary to specify the width for floated text elements. It is necessary to specify the width for floated text elements. Part III: CSS for Presentation 290 Floating Floating block elements Let’s look at what happens when you float a block within the normal flow. In this example, a whole paragraph element is floated to the left (Figure 15-5). The markup: <p>ONCE upon a time </p> <p id="float">As he had a white skin, blue eyes, </p> <p>The fact was he thought them very ugly </p> The style sheet: p#float { float: left; width: 200px; margin-top: 0px; background: #A5D3DE; } p { border: 1px solid red; } Figure 15-5. Floating a block-level element. I’ve added a red rule around all p elements to show their boundaries. In addi- tion, I set the top margin on the float to 0 (zero) to override the browser’s default margin settings on paragraphs. This allows the floated paragraph to align with the top of the following paragraph. There are a few other things I want to point out in this example. Just as we saw with the image, the paragraph moves off to the side (left this time) and the following content wraps around it, even though blocks nor- mally stack on top of one another. There are two things I want to point out in this example. You must provide a width for floated block elements. If you do not provide a width value, the width of the floated block will be set to auto, which fills the available width of the browser window or other containing element. There’s not much sense in having a full-width floated box since the idea is to wrap text next to the float, not start below it. Floating Chapter 15, Floating and Positioning 291 Elements do not float higher than their reference in the source. A floated block will float to the left or right relative to where it occurs in the source allowing the following elements in the flow to wrap around it. It will stay below any block elements that precede it in the flow (in effect, it is “blocked” by them). That means you can’t float an element up to the top corner of a page, even if its nearest ancestor is the body element. If you want a floated element to start at the top of the page, it must appear first in the document source. Floating multiple elements It’s perfectly fine to float multiple elements on a page or even within a single element. When you float multiple elements, there is a complex system of behind-the-scenes rendering rules that ensure floated elements do not over- lap. You can consult the CSS2.1 specification for the details, but the upshot of it is that floated elements will be placed as far left or right (as specified) and as high up as space allows. Figure 15-6 shows what happens when a series of sequential paragraphs are floated to the same side. The first three floats start stacking up from the left edge, but when there isn’t enough room for the fourth, it moves down and to the left until it bumps into something; in this case, the edge of the browser window. However, if one of the floats, such as “P2,” had been very long, it would have bumped up against the edge of the long float instead. The source <p>P1</p> <p class="float">P2</p> <p class="float">P3</p> <p class="float">P4</p> <p class="float">P5</p> <p>P6</p> <p>P7</p> <p>P8</p> <p>P9</p> <p>P10</p> The style sheet: p#float { float: left; width: 200px; margin: 0px; background: #CCC;} p {border: 1px solid red;} This lining-up effect is used strategically in CSS-based web design to create multicolumn layouts and horizontal navigation bars out of floated list items. We’ll look at these techniques in Chapter 16, Page Layout with CSS and Chapter 17, CSS Techniques, respectively. N o t e Absolute positioning is the CSS method for placing elements on a page regardless of how they appear in the source. We’ll get to absolute positioning in just a few sections. N o t e Absolute positioning is the CSS method for placing elements on a page regardless of how they appear in the source. We’ll get to absolute positioning in just a few sections. N o t e The CSS Recommendation lists a set of complicated rules dictating the behavior of multiple floated elements. If you are experiencing strange floating behaviors, you may want to go right to the source and learn how they should behave at www.w3.org/www.w3.org/TR/CSS21/ visuren.html#floats and www.w3.org/ TR/CSS21/visuren.html#float-position. N o t e The CSS Recommendation lists a set of complicated rules dictating the behavior of multiple floated elements. If you are experiencing strange floating behaviors, you may want to go right to the source and learn how they should behave at www.w3.org/www.w3.org/TR/CSS21/ visuren.html#floats and www.w3.org/ TR/CSS21/visuren.html#float-position. Elements floated to the same side line up. If there is not enough room, subsequent elements move down. Figure 15-6. Multiple floated elements line up and do not overlap. Elements floated to the same side line up. If there is not enough room, subsequent elements move down. Figure 15-6. Multiple floated elements line up and do not overlap. Part III: CSS for Presentation 292 Floating Clearing floated elements The last thing you need to know about floated elements is how to turn the text wrapping off and get back to layout as usual. This is done by clearing the element that you want to start below the float. Applying the clear property to an element prevents it from appearing next to a floated element, and forces it to start against the next available “clear” space below the float. clear Values: left | right | both | none | inherit Default: none Applies to: block-level elements ony Inherits: no Keep in mind that you apply the clear property to the element you want to start below the floated element, not the floated element itself. The left value starts the element below any elements that have been floated to the left. Similarly, the right value makes the element clear all floats on the right edge of the containing block. If there are multiple floated elements, and you want to be sure an element starts below all of them, use the both value to clear floats on both sides. In this example, the clear property has been used to make h2 elements start below left-floated elements. Figure 15-7 shows how the h2 heading starts at the next available clear edge below the float. img { float: left; margin-right: 10px; } h2 { clear: left; margin-top: 2em; } Figure 15-7. Clearing a left-floated element N o t e The clear property replaces the depre- cated clear attribute once used in the br element to clear aligned images. N o t e The clear property replaces the depre- cated clear attribute once used in the br element to clear aligned images. Floating Chapter 15, Floating and Positioning 293 Notice in Figure 15-7 that although there is a 2-em top margin applied to the h2 element, it is not rendered between the heading and the floated image. That’s the result of collapsing vertical margins. If you want to make sure space is held between a float and the following text, apply a bottom margin to the floated element itself. It’s time to give floating a try in Exercise 15-1. In this exercise, we’ll make further improvements to the JenWARE home page that we worked on in Chapter 14. If you did not follow along with the exercises in the previous chapter, there is a fresh copy in its most recent state, called jenware_ 2.html, in the Chapter 15 materials (www.learningwebdesign. com/materials). Open the JenWARE home page document in a text editor and browser (it should look like Figure 14-18 in the previous chapter). We’ll start by removing wasted vertical space next to the product images by floating the images to the left. We’ll use a contextual selector to make sure that we only float the images in the “products” section of the page. While we’re at it, let’s add a little margin on the bottom and right sides using the margin shorthand property. #products img { float: left; margin: 0 6px 6px 0; } Save the document and take a look at it in the browser. You should see the product descriptions wrapping to the right of the images. Next, I’d like the “Go to the (product) page” links to always appear below the images so they are clearly visible on the left side of the products section. This change is going to require a little extra markup, because we need a way to target just the paragraphs that contain “go to” links. Scroll down to the markup section of the document and add the class name “goto” to each of the paragraphs that contain links. Here is the first one: <p class="goto"><a href="#">Go to the GlassWARE page </a></p> Now we can use a class selector to make those paragraphs clear the floated images. #products p.goto { clear: left; } 1. 2. Time to take on that “testimonials” div box. Instead of taking up valuable space “above the fold,” let’s move it off to the side and let the products section move up into the spotlight. Start by removing the margin property and changing the width from 500 to 150 pixels. Finally, float the div to the right with the float property. Figure 15-8 shows the results. #testimonials { float: right; width: 500px 150px; margin: 2em auto; border: 1px dashed #F26521; padding: 1em; padding-left: 60px; background: #FFBC53 url(images/ex-circle-corner. gif) no-repeat left top; line-height: 1.2em; } Figure 15-8. The results of floating the testimonials div. There are some interesting behaviors to observe here. First, let’s keep in mind that although it looks a little like the the “testimonials” div is being floated in the products box, it is actually floated within the content area of the body element (the nearest block-level ancestor). This is the same floated block element behavior we saw in Figure 15-6. 3. exercise 15-1 | Floating elements In this exercise, we’ll make further improvements to the JenWARE home page that we worked on in Chapter 14. If you did not follow along with the exercises in the previous chapter, there is a fresh copy in its most recent state, called jenware_ 2.html, in the Chapter 15 materials (www.learningwebdesign. com/materials). Open the JenWARE home page document in a text editor and browser (it should look like Figure 14-18 in the previous chapter). We’ll start by removing wasted vertical space next to the product images by floating the images to the left. We’ll use a contextual selector to make sure that we only float the images in the “products” section of the page. While we’re at it, let’s add a little margin on the bottom and right sides using the margin shorthand property. #products img { float: left; margin: 0 6px 6px 0; } Save the document and take a look at it in the browser. You should see the product descriptions wrapping to the right of the images. Next, I’d like the “Go to the (product) page” links to always appear below the images so they are clearly visible on the left side of the products section. This change is going to require a little extra markup, because we need a way to target just the paragraphs that contain “go to” links. Scroll down to the markup section of the document and add the class name “goto” to each of the paragraphs that contain links. Here is the first one: <p class="goto"><a href="#">Go to the GlassWARE page </a></p> Now we can use a class selector to make those paragraphs clear the floated images. #products p.goto { clear: left; } 1. 2. Time to take on that “testimonials” div box. Instead of taking up valuable space “above the fold,” let’s move it off to the side and let the products section move up into the spotlight. Start by removing the margin property and changing the width from 500 to 150 pixels. Finally, float the div to the right with the float property. Figure 15-8 shows the results. #testimonials { float: right; width: 500px 150px; margin: 2em auto; border: 1px dashed #F26521; padding: 1em; padding-left: 60px; background: #FFBC53 url(images/ex-circle-corner. gif) no-repeat left top; line-height: 1.2em; } Figure 15-8. The results of floating the testimonials div. There are some interesting behaviors to observe here. First, let’s keep in mind that although it looks a little like the the “testimonials” div is being floated in the products box, it is actually floated within the content area of the body element (the nearest block-level ancestor). This is the same floated block element behavior we saw in Figure 15-6. 3. exercise 15-1 | Floating elements Part III: CSS for Presentation 294 Floating Look at how the “products” div behaves: its content wraps around the float, but its element box (indicated by the border and white background color) is not reshaped around the float. In fact, the background of the “products” div appears to be behind or under the floated box. This is the normal behavior for floats and wrapped content: the content reflows, but the element box is not changed. The other behavior of note here is that the “testimonials” div was floated relative to its position in the source it can’t float up higher than the block-level paragraph element that preceded it. The testimonials box moved off to the right edge of the body content area, and the following div moved up in its space. There is one last change to make to this page that’s going to make a big difference in its appearance. Let’s add some space between the products and textimonial areas so they don’t appear to overlap. We’ll do this by adding a margin on the right of the “products” div that is wide enough to accommodate the “testimonials” box. 4. How wide does the margin need to be? We’ll need to calculate the width of the “testimonials” element box. 150 pixel width + 2 pixels of border + 60 pixels left padding + approximately 12 pixels (1 em) right padding = approx. 224 pixels Setting the right margin on the “products” div to 250 pixels should do the trick. #products { margin-right: 250px; border: double #FFBC53; padding: 2em; background-color: #FFF; line-height: 2em; } The results are shown in Figure 15-9. Hey, look at that! your first two-column layout, created with a float and a wide margin. This is the basic concept behind many CSS-based layout templates as you’ll see in Chapter 16. Figure 15-9. A new two-column layout for the JenWARE home page, created with a float and a wide margin on the following content. Positioning Basics Chapter 15, Floating and Positioning 295 That covers the fundamentals of floating. Let’s move on to the other approach to moving elements around on the page—positioning. Positioning Basics CSS provides several methods for positioning elements on the page. They can be positioned relative to where they would normally appear in the flow, or removed from the flow altogether and placed at a particular spot on the page. You can also position an element relative to the browser window (technically known as the viewport in the CSS Recommendations) and it will stay put while the rest of the page scrolls. Unfortunately, not all positioning methods are well supported, and inconsis- tent and buggy browser implementation can make it challenging to achieve the results you’re after. The best thing to do is get acquainted with the way positioning should work according to the specification, as we’ll do in the fol- lowing sections, starting with the basic position property. Types of positioning position Values: static | relative | absolute | fixed | inherit Default: static Applies to: all elements Inherits: no The position property indicates that an element is to be postioned, and specifies which positioning method should be used. I’ll introduce each key- word value briefly here, then we’ll take a more detailed look at each method in the remainder of this chapter. static This is the normal positioning scheme in which elements are positioned as they occur in the normal document flow. relative Relative positioning moves the box relative to its original position in the flow. The distinctive behavior of relative positioning is that the space the element would have occupied in the normal flow is preserved. absolute Absolutely positioned elements are removed from the document flow entirely and positioned relative to a containing element (we’ll talk more about this later). Unlike relatively positioned elements, the space they would have occupied is closed up. In fact, they have no influence at all on the layout of surrounding elements. N o t e Positioning is another CSS feature that can trigger unexpected browser behavior. Consult the sites listed in the Browser Bugs sidebar for known browser bugs and workarounds. N o t e Positioning is another CSS feature that can trigger unexpected browser behavior. Consult the sites listed in the Browser Bugs sidebar for known browser bugs and workarounds. . css-discuss.incutio.com/ ?page=CssHack and css-discuss. incutio.com/?page=BrowserBugs Web Standards Group webstandardsgroup.org/resources/ The Web Standards Group keeps a list of up-to-date links to CSS browser. fresh copy in its most recent state, called jenware_ 2.html, in the Chapter 15 materials (www.learningwebdesign. com/materials). Open the JenWARE home page document in a text editor and browser. fresh copy in its most recent state, called jenware_ 2.html, in the Chapter 15 materials (www.learningwebdesign. com/materials). Open the JenWARE home page document in a text editor and browser