The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P18 ppsx

317 CSS Positioning and Layout The markup for this example is as follows. The top-left and bottom-left images are included in the document itself, within top and bottom divs: chapter09/corners2.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" lang="en-US"> <head> <title>Rounded corners</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="corners2.css" /> </head> <body> <div class="rndbox"> <div class="rndtop"><img src="topleft.gif" alt="" width="30" height="30" /></div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p> <div class="rndbottom"><img src="bottomleft.gif" alt="" width="30" height="30" /></div> </div> </body> </html> The top-right and bottom-right images are included as background images in the CSS for the divs, with the classes rndtop and rndbottom: chapter09/corners2.css (excerpt) .rndbox { background: #C6D9EA; width: 300px; font: 0.8em Verdana, Arial, Helvetica, sans-serif; color: #000033; } .rndtop { background: url(topright.gif) no-repeat right top; } .rndbottom { background: url(bottomright.gif) no-repeat right top; } .rndbottom img { Download at WoweBook.Com The CSS Anthology318 display:block; } .rndbox p { margin: 0 0.4em 0 0.4em; } Together, the images, markup, and CSS create a curved box like the one shown in Figure 9.24. Figure 9.24. A curved box created by using markup and images Solution 3: Using JavaScript Adding markup and images to your code can be an unattractive option, especially if you have a lot of boxes requiring rounded corners. To deal with this problem, many people have come up with solutions that use JavaScript to add the rounded corners to otherwise square boxes. The beauty of this is that even if users have JavaScript disabled, they see a perfectly usable site—it merely lacks the additional style of the curved edges. Various methods have been devised to achieve rounded corners using JavaScript, but here we’ll look at just one—NiftyCube—as it’s very easy to drop into your code and make a start. The script is included in the code archive for this book, but if you’d like the latest version, download NiftyCube from the NiftyCube web site, and unzip the zip file. 3 You’ll find lots of example pages in the zip archive, but all you need to implement this effect in your own pages is the JavaScript file niftycube.js and the CSS file niftyCorners.css. Copy these files into your site. Our starting point is a square-cornered box created by the following markup: 3 http://www.html.it/articoli/niftycube/ Download at WoweBook.Com 319 CSS Positioning and Layout chapter09/corners3-start.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" lang="en-US"> <head> <title>Rounded Corners</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="corners3.css" /> </head> <body> <div class="curvebox"> <p>Lorem ipsum dolor </p> </div> </body> </html> You have a reasonable amount of freedom in terms of the way you style your box, with one exception—the padding inside your box must be specified in pixels. If you use any other unit, such as ems, then your corners will fail to render properly in Internet Explorer. The result of our work is pictured in Figure 9.25. chapter09/corners3.css .curvebox { width: 250px; padding: 20px; background-color: #B0C4DE; color: #33527B; } Download at WoweBook.Com The CSS Anthology320 Figure 9.25. The square box To add rounded corners to this box using NiftyCube, link the JavaScript file to the head of your document, then write a simple function to tell the script that you wish to round the corners of the class curvebox: chapter09/corners3.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" lang="en-US"> <head> <title>Rounded Corners</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="corners3.css" /> <script type="text/javascript" src="niftycube.js"> </script> <script type="text/javascript"> window.onload=function(){ Nifty("div.curvebox"); } </script> </head> <body> <div class="curvebox"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing… </p> Download at WoweBook.Com 321 CSS Positioning and Layout </div> </body> </html> This markup produces the display shown in Figure 9.26. Figure 9.26. Rounded corners without images or extra markup Discussion While numerous solutions are available to help you create rounded corners without JavaScript, they all require you to insert additional markup or ensure that your markup is structured in a certain way. 4 If you only have a few boxes whose corners you want to round—perhaps a main layout container or a couple of larger boxes—the additional images and markup will only be a minor imposition. But if your layout includes many rounded corners, peppering your markup with extra divs and images may be an extremely undesirable option. The JavaScript method allows cleaner HTML code, but as with all JavaScript solutions, it only works when the user has JavaScript enabled. Personally, I feel that using JavaScript in this way—to plug the holes in CSS sup- port—is legitimate. As long as you’ve checked that your layout remains clear and easy to use without the rounded corners, those without JavaScript will continue to use your site. If you do use this JavaScript solution on a project, be sure to check the whole site with JavaScript turned off, to make sure that the users still have a positive experience on the site. 4 One attempt at generating rounded corners using semantic markup and no JavaScript is Spanky Corners [http://tools.sitepoint.com/spanky/], created by SitePoint’s Alex Walker. Download at WoweBook.Com The CSS Anthology322 How do I create a liquid, two-column layout with the menu on the left and the content on the right? Web page layouts like that shown in Figure 9.27, displaying a menu on the left and a large content area to the right, are extremely common. Let’ s discover how to build this layout using CSS. Figure 9.27. Building a liquid two-column layout using CSS Solution Here’s the markup and CSS that produces the display shown in Figure 9.27: Download at WoweBook.Com 323CSS Positioning and Layout chapter09/2col.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" lang="en-US"> <head> <title>Stage & Screen - theatre and film reviews</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="2col.css" /> </head> <body> <div id="header"> <img src="stage-logo.gif" width="187" height="29" alt="Stage & Screen" class="logo" /> <span class="strapline">theatre and film reviews</span> </div> <div id="content"> <h1>Welcome to Stage & Screen</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing … </p> ⋮ </div> <div id="nav"> <ul> <li><a href="#">Play Reviews</a></li> <li><a href="#">Film Reviews</a></li> <li><a href="#">Post a Review</a></li> <li><a href="#">About this site</a></li> <li><a href="#">Contact Us</a></li> </ul> <h2>Latest Reviews</h2> <ul> <li><a href="#">Angels & Demons</a></li> <li><a href="#">Star Trek</a></li> <li><a href="#">Up</a></li> <li><a href="#">Land of the Lost</a></li> </ul> </div> </body> </html> Download at WoweBook.Com The CSS Anthology324 chapter09/2col.css body { margin: 0; padding: 0; background-color: #FFFFFF; color: #000000; font-family: Arial, Helvetica, sans-serif; border-top: 2px solid #2A4F6F; } #header { border-top: 1px solid #778899; border-bottom: 1px dotted #B2BCC6; height: 3em; } #header .strapline { font: 120% Georgia, "Times New Roman", Times, serif; color: #778899; background-color: transparent; float: right; width: 300px; text-align: right; margin-right: 2em; margin-top: 0.5em; } #header .logo { float: left; width: 187px; margin-left: 1.5em; margin-top: 0.5em; } #nav { position: absolute; top: 5em; left: 1em; width: 14em; } #nav ul { list-style: none; margin: 0; padding: 0; } #nav li { font-size: 80%; Download at WoweBook.Com 325CSS Positioning and Layout border-bottom: 1px dotted #B2BCC6; margin-bottom: 0.3em; } #nav a:link, #nav a:visited { text-decoration: none; color: #2A4F6F; background-color: transparent; } #nav a:hover { color: #778899; } #nav h2 { font: 110% Georgia, "Times New Roman", Times, serif; color: #2A4F6F; background-color: transparent; border-bottom: 1px dotted #CCCCCC; } #content { margin-left: 16em; margin-right: 2em; } h1 { font: 150% Georgia, "Times New Roman", Times, serif; } #content p { font-size: 80%; line-height: 1.6em; } Discussion Our starting point for this layout is the header that we created in “How do I align a site’s logo and slogan to the left and right?”. We’ve added to that layout some content, which resides within a div whose ID is content. The navigation for the page comprises two unordered lists that are contained in a div with the ID nav. As you’d expect, without any positioning applied, these blocks will display below the heading in the order in which they appear in the document (as depicted in Fig- ure 9.28). Download at WoweBook.Com The CSS Anthology326 Figure 9.28. The content and navigation displaying without positioning information At this point, the CSS looks like this: chapter09/2col.css (excerpt) body { margin: 0; padding: 0; background-color: #FFFFFF; color: #000000; font-family: Arial, Helvetica, sans-serif; border-top: 2px solid #2A4F6F; } #header { border-top: 1px solid #778899; border-bottom: 1px dotted #B2BCC6; height: 3em; } Download at WoweBook.Com [...]... precise control over the elements’ locations on the page Download at WoweBook.Com 330 The CSS Anthology Can I reverse this layout and put the menu on the right? Can the technique presented in “How do I create a liquid, two-column layout with the menu on the left and the content on the right?” be used to create a layout in which the menu is positioned on the right? Solution Yes, exactly the same technique... WoweBook.Com CSS Positioning and Layout 329 Figure 9.30 Adding margins to the content Now that all the elements are laid out neatly, we can work on the styling of indi vidual elements, using CSS to create the layout we saw back in Figure 9.27 The completed CSS style sheet is given at the start of this solution Ems for Positioning Text Layouts I used ems to position the elements in this layout The em unit... your menu from the top and right, and give the content area a large right margin so that the menu has sufficient space in which to display The result is shown in Figure 9.31 Figure 9.31 Building a two-column layout so that the menu appears on the right Download at WoweBook.Com CSS Positioning and Layout 331 Discussion Positioning the menu on the right requires no change to the markup of the original... under the heading bar, and give it an appropriate width: chapter09/2col .css (excerpt) #nav { position: absolute; top: 5em; left: 1em; width: 14em; } As you can see in Figure 9.29, this code causes the menu to appear over the text content, as the absolute positioning we’ve applied has removed it from the flow of the document Download at WoweBook.Com 328 The CSS Anthology Figure 9.29 Positioning the menu... like on the page This can be of great benefit for accessibility purposes, as it allows us to place some of the less-important items (such as lists of links to other sites, advertising, and so on) right at the end of the document code This way, those who employ screen readers to use the site are saved from having to hear these unnecessary items read aloud each time they access a page Yet you, as the designer,... reference Download at WoweBook.Com 332 The CSS Anthology point from the left-hand or right-hand side of the viewport that you can use to pos ition the elements horizontally However, there are a couple of different ways in which we can deal with this complication in order to achieve the kind of layout shown below Whichever layout method you choose, the HTML is the same: chapter09/2col-fixedwidth.html... behind the content or a border wrapping the whole layout, will require a different method Download at WoweBook.Com CSS Positioning and Layout 335 Figure 9.32 The fixed-width, centered layout An alternative approach is to simply float the navigation and content against the left and right sides of the centered block, respectively Floating the elements will give you more flexibility if you need to add other... other elements to the layout, such as a footer, or if you want to add a border around the layout If you float the left and right columns, you can add a footer and apply clear: both to place it beneath the two columns, regardless of their heights This dynamic placement of the footer within the document flow is impossible if the columns are absolutely positioned We’ve also taken advantage of the floated layout... menu absolutely Positioning the Content As we’re aiming to maintain a liquid layout, it’s undesirable to assign a fixed width to the content and, in fact, it’s unnecessary anyway The problem with the content is that it appears where we want the menu to sit To solve this problem, we can simply apply a large left-hand margin to the content area to allow space for the menu The results are shown in Figure... change the positioning properties for nav, and the margins on content: chapter09/2col-reverse .css #nav { position: absolute; top: 5em; right: 1em; width: 14em; } #content { margin-left: 2em; margin-right: 16em; } The advantage of using absolute positioning can be seen clearly here It’s of no consequence where our menu appears in the markup: the use of absolute positioning means it will be removed from the . Trek</a></li> <li><a href="#">Up</a></li> <li><a href="#">Land of the Lost</a></li> </ul> </div> </body>. <ul> <li><a href="#">Play Reviews</a></li> <li><a href="#">Film Reviews</a></li> <li><a href="#">Post. href="#">Post a Review</a></li> <li><a href="#">About this site</a></li> <li><a href="#">Contact Us</a></li> </ul>

Định dạng
Số trang	20
Dung lượng	1,71 MB