The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P19 pptx

337CSS Positioning and Layout } #nav { float: left; width: 230px; } #nav ul { list-style: none; margin: 3em 0 0 0; padding: 0; border: none; } #nav li { font-size: 85%; } #nav a:link, #nav a:visited { color: #555555; background-color: transparent; display: block; padding: 1em 0 0 10px; text-decoration: none; min-height: 40px; } #nav a:hover, #nav li.cur a:link, #nav li.cur a:visited { color: #FFFFFF; background-image: url(arrow.gif); background-repeat: no-repeat; } #footer { clear: both; font-size: 80%; padding: 1em 0 1em 0; margin-left: 250px; color: #999999; background-color: transparent; } The result is shown in Figure 9.33. Download at WoweBook.Com The CSS Anthology338 Figure 9.33. The floated, fixed-width, centered layout with a border Discussion For the purposes of this discussion, we’ll ignore purely aesthetic-style properties such as borders, colors, and fonts, so that we can concentrate on the layout. Both versions of this layout begin with a centered div, similar to the layouts we worked with in “How do I center a block on the page?”. This div is given the ID wrapper: chapter09/2col-fixedwidth.css or chapter09/2col-fixedwidth-float.css (excerpt) body { margin: 0; padding: 0; ⋮ } #wrapper { width: 760px; margin-right: auto; Download at WoweBook.Com 339CSS Positioning and Layout margin-left: auto; ⋮ } The result of applying these styles is shown in Figure 9.34. Figure 9.34. Centering the content on the page Now, in “How do I create a liquid, two-column layout with the menu on the left and the content on the right?” we saw that we could use absolute positioning to control the navigation’s location, and apply enough margin to the content of the page so that there’d be no overlap between the two blocks. The only difference in this layout is that we need to position the navigation within the centered wrapper block, so we’re unable to give it an absolute position on the page. Instead of using absolute, you can set an element’ s position property to relative which, unlike absolute positioning, keeps the element within the document flow; instead, it lets you shift the element from the starting point of its default position on the page. If no coordinates are provided in order to shift the element, it will ac- tually stay exactly where the browser would normally position it. However, unlike an element that lacks having a position value specified, a relatively positioned element will provide a new positioning context for any absolutely positioned ele- ments within it. Download at WoweBook.Com The CSS Anthology340 In plain English, an element with position: absolute that’s contained within an element with position: relative will base its position on the edges of that parent element, instead of the edges of the browser window. This is exactly what we need to use to position the navigation within the centered block in this example. The first step is to set the position property of wrapper to relative: chapter09/2col-fixedwidth.css (excerpt) #wrapper { position: relative; text-align: left; width: 760px; margin-right: auto; margin-left: auto; ⋮ } We then use absolute positioning to set the location of the navigation block: chapter09/2col-fixedwidth.css (excerpt) #navigation { position: absolute; top: 200px; left: 0; width: 230px; } Finally, we add a margin to the main content of the page to make space for the newly positioned navigation area: chapter09/2col-fixedwidth.css (excerpt) #content { margin-left: 250px; padding: 0 10px 0 0; } As long as the content of the page occupies more vertical space than the navigation, this layout will work just fine. Unfortunately, since the navigation block is abso- lutely positioned, it’s unable to affect the height of the wrapper block, so if the Download at WoweBook.Com 341 CSS Positioning and Layout content is shorter than the navigation, the wrapper block will be too short to contain the navigation. We can see this effect by adding a two-pixel, red border to the wrapper, and adding text to the sidebar so that it becomes longer than the content. In Figure 9.35, you can clearly see that the content in the sidebar extends below the wrapper element. Figure 9.35. The content in the sidebar extending below the bottom of the wrapper block The alternative method of using floated blocks to achieve our design goals is more complex, but it overcomes the limitation I just mentioned, enabling us to position a footer below the columns regardless of which column is the longest. First, we float the navigation block left and the content block right: Download at WoweBook.Com The CSS Anthology342 chapter09/2col-fixedwidth-float.css (excerpt) #content { float: right; width: 500px; padding: 0 10px 0 0; } #navigation { float: left; width: 230px; } This should give us the same layout as the positioned example offered. However, if we now look at the layout with the red border on the wrapper, you’ll find that the red border only wraps the header area of the page. The wrapper no longer wraps! Figure 9.36. Floating the navigation left and the content right Download at WoweBook.Com 343CSS Positioning and Layout One of the reasons we wanted to use a floated layout, however, is to add a footer. I will add this to the document below the floated columns: chapter09/2col-fixedwidth-float.html (excerpt) <div id="nav"> <ul> <li><a href="#">Prepare the Dough</a></li> <li class="cur"><a href="#">Choose Your Toppings</a></li> <li><a href="#">Pizza Ovens</a></li> <li><a href="#">Side Salads</a></li> </ul> </div> <div id="footer">&copy; 2009 Recipe for success</div> </div> </body> </html> Reload the page, and as you can see in Figure 9.37, the border of the wrapper block now cuts through the page content. This occurs because we floated most of the block’s contents, removing them from the document flow. The only element inside wrapper that’s still within the document flow is the footer block, which can be seen in the bottom-left corner of the wrapper block, where it has been pushed by the floated blocks. If we set the clear property of the footer block to both, the footer will drop down below both of the floated blocks; this forces the wrapper to accommodate both the navigation and the content—no matter which is taller. The page now renders as shown in Figure 9.38: chapter09/2col-fixedwidth-float.css (excerpt) #footer { clear: both; ⋮ } Download at WoweBook.Com The CSS Anthology344 Figure 9.37. After adding the footer Figure 9.38. The footer set to clear: both Download at WoweBook.Com 345CSS Positioning and Layout How do I create a full-height column? If you’ve tried to add a background to a side column like the one shown in “How do I create a fixed-width, centered, two-column layout?”, you may have discovered you’re unable to make the column extend to the full height of the taller column next to it, forcing your background to look a little strange. For example, applying a background image to the navigation element will simply display the background behind the navigation list, rather than stretching it down the column to the end of the content, as shown in Figure 9.39. Figure 9.39. The gray background displaying only behind the navigation content Solution The solution to this problem is to apply the background image to a page element that does extend the full height of the longer column, but displays at the same width as our navigation, making it look as though the background is on the navigation column. In this case, we can apply the background image to wrapper, as Figure 9.40 illustrates: Download at WoweBook.Com The CSS Anthology346 chapter09/2col-fixedwidth-float.css (excerpt) #wrapper { position: relative; text-align: left; width: 760px; margin-right: auto; margin-left: auto; margin-bottom: 1em; background-image: url(sidebar.gif); background-repeat:repeat-y; border-right: 1px solid #888888; border-bottom: 1px solid #888888; } Figure 9.40. The background appearing to be attached to the navigation column Discussion This simple technique can be used to great effect in your layouts. In this example, I chose to apply the image to the wrapper block, as I want the background to extend right down to the end of the content; the solid image on my header background hides the sidebar background image as it extends all the way to the top of the page. You could also use this technique to have the background stop above the footer, or Download at WoweBook.Com [...]... 10px; Download at WoweBook.Com 356 The CSS Anthology padding: 70px 10px 10px 10px; ⋮ } The content block simply sits between the two absolutely positioned columns, with margins applied to the content to give the columns the room they need: chapter09/3col .css (excerpt) #content { margin: 66px 260px 0px 240px; padding: 10px; } Figure 9.45 shows what the page looks like with these initial positioning tasks... add the two images The first image, which I’ve named shadow-bg.jpg and can be seen in Figure 9.42, is a background image that we’ll apply to the div with an ID of wrapper This image is the left and right drop shadow, and it repeats down the page The second image, shadow-bottom.jpg, we’ll apply to the bottom of our layout Figure 9.42 The files used to create the drop shadow effect I’ve increased the. .. page contents away from the drop shadow: Download at WoweBook.Com 350 The CSS Anthology chapter09/2col-fixedwidth-shadow .css (excerpt) #wrapper2 { background-image: url(sidebar.gif); background-repeat:repeat-y; margin: 0 10px 0 10px; } Finally, I need to add the bottom of the drop shadow I add another div element with an id of btm to the code just before the closing of the outer wrapper: chapter09/2col-fixedwidth-shadow.html... width layout such as the one we worked with in the section called “How do I create a full-height column?” Solution We can add a drop shadow to the edges of this layout using two images: one for the background, and one to create the shadow effect at the bottom of the layout Fig­ ure 9.41 shows the effect we’re working to create Figure 9.41 A drop shadow Download at WoweBook.Com 348 The CSS Anthology To... start with the unstyled document shown in Figure 9.44, which has three divs: one with ID content, one with ID side1, and one with ID side2 Download at WoweBook.Com CSS Positioning and Layout 355 Figure 9.44 The unstyled XHTML document We create the three columns using the following CSS fragments We place both the left-hand and right-hand columns with absolute positioning: side1 is positioned from the left... drop shadow effect I’ve increased the width of my wrapper block by 20 pixels because I want the content area to stay the same width, but I need to allow room for the shadow on either side of the content I’ve also added the shadow image as a background image on this element: chapter09/2col-fixedwidth-shadow .css (excerpt) #wrapper { position: relative; text-align: left; width: 780px; margin-right: auto;.. .CSS Positioning and Layout 347 after a certain section of content: simply apply the background to an element that contains the section of content you want Creating Gradient Backgrounds I’ve used a repeating background image here as my image is the same all the way down the page You could also use a tall image with a gradient fading to... three-column layout developed in CSS Solution A three-column, liquid layout is easily created using a simple technique, similar to the one we used to build the two-column layout in “How do I create a liquid, twocolumn layout with the menu on the left and the content on the right?”: chapter09/3col.html ... href="#">Prepare the Dough Choose Your Toppings Pizza Ovens Side Salads © 2009 Recipe for success I add to this div the sidebar background image that I’ve moved from the outer wrapper I also add some padding to this div to push the page contents... rel="stylesheet" type="text /css" href="3col .css" /> Recipe for Success Lorem ipsum dolor sit amet, consectetuer adipiscing … Download at WoweBook.Com 352 The CSS Anthology Quisque sodales imperdiet enim Quisque cursus … Search the Recipes . </div> </form> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Recipes</a></li> <li><a. href="#">Articles</a></li> <li><a href="#">Buy Online</a></li> <li><a href="#">Contact Us</a></li>. Dough</a></li> <li class="cur"><a href="#">Choose Your Toppings</a></li> <li><a href="#">Pizza Ovens</a></li>