Wrox Professional CSS Cascading Style Sheets for Web Design phần 4 doc

Figure 3-42: Rounded corners at the top of a fluid-width box What’s neat about this method is that by using both the background-image and content properties, we’ve managed to insert two images into a single pseudo-element. Without that ability this fluid layout would be beyond our “minimalist markup” approach, and we’d have to resort to hacky CSS or even adding in extra divs. Now, having mastered the top of the box, let’s do the same for the bottom corners. Rounding the Bottom of the Box First, we create our :after pseudo-element: .box:after { } Next we’ll insert our bottom-left rounded-corner image into the pseudo-element, via the content property (see Figure 3-43): .box: after { content: url(box-bl.gif); } Figure 3-43: Inserting the bottom-left rounded-corner image Now we’ll add in the bottom-right rounded-corner image. We do this by setting a background-image on the pseudo-element and making the whole thing block-level, as shown in Figure 3-44: .box: after { background: transparent url(box-br.gif) no-repeat bottom right; content: url(box-bl.gif); display: block; } 114 Chapter 3 05_588338 ch03.qxd 6/22/05 11:22 AM Page 114 Figure 3-44: Inserting the bottom-right rounded-corner image We must counteract the 8px of padding and 2px of border we applied to the box. We do this by applying negative bottom, right, and left margins to the pseudo-element, pulling it into place. We also add in 4px of top margin to make the gap between the text and bottom border a bit nicer (see Figure 3-45). .box:after { background: transparent url(box-br.gif) no-repeat bottom right; content: url(box-bl.gif); display: block; margin: 4px -10px -10px -10px; } Figure 3-45: Counteracting the padding and border The right-hand side looks fine, but what’s happening on the left side of Figure 3-46? Ah, it’s line-height at work again. Figure 3-46: Line-height can cause vertical spacing problems. 115 Blogger: Rollovers and Design Improvements 05_588338 ch03.qxd 6/22/05 11:22 AM Page 115 Let’s set a value of 0.1 and fix it (see Figure 3-47): .box:after { background: transparent url(box-br.gif) no-repeat bottom right; content: url(box-bl.gif); display: block; line-height: 0.1; margin: 4px -10px -10px -10px; } Figure 3-47: Fixing the rounded corners on the left side To finish up, we simply add in a clearing declaration, as we did in the fixed-width example, and that’s it (see Figure 3-48). .box:after { background: transparent url(box-br.gif) no-repeat bottom right; clear: both; content: url(box-bl.gif); display: block; line-height: 0.1; margin: 4px -10px -10px -10px; } 116 Chapter 3 05_588338 ch03.qxd 6/22/05 11:22 AM Page 116 Figure 3-48: The finished article as seen in Firefox, Opera, and Safari 117 Blogger: Rollovers and Design Improvements 05_588338 ch03.qxd 6/22/05 11:22 AM Page 117 Dealing with Internet Explorer Unfortunately, and unlike in the previous section, there’s no wonderfully easy way to give IE users a taste of what we’ve done here (see Figure 3-49). After a bit of margin-tweaking to remove the gaps at the top and bottom of the box, IE users will have to be satisfied with the carefully thought-out color scheme, the excellent use of white space, and the overall feeling of calm that blogger.com’s layout brings. Figure 3-49: No lovely styling for IE Of course, if it’s vital that IE users see your rounded corners, then you can’t use this technique. You’ll have to resort to the slightly less elegant method of inserting a series of extra divs in your XHTML. Better Thinking Through Pseudo-Elements You should now have a fair understanding of the capabilities of the :before and :after pseudo-elements. They really are wonderfully powerful tools. One of their main benefits is that they allow you to change your markup mindset. No longer should your first thought be “Well, I’ll have to add in a whole bunch of extra divs to build this layout.” You now have a set of tools that let you say, “Can I build this layout without altering the XHTML markup in any way?” As CSS grows more powerful, and as browsers become better at interpreting it, this thought process will become second nature to all of us. 118 Chapter 3 05_588338 ch03.qxd 6/22/05 11:22 AM Page 118 Implied Boxes If rounded corners go a long way toward mellowing out Blogger’s boxy design, then Bowman’s second idea, the implied box, finishes the job. There’s really no easier way to explain what an implied box is than to show you one of them in situ. Figure 3-50 shows one in use on the front page of blogger.com. Figure 3-50: An implied box (top right) on blogger.com See it? It’s the bit in the top-right corner of the page. Figure 3-51 shows it close-up. Figure 3-51: An implied box in action in the Sign In form There’s nothing super-clever about the CSS here. It’s just the application of a simple background-image to a form or div, but the effect is very soothing and allows the design to retain a level of openness while still providing a way for visually demarcating sections of the document. In essence, it removes visual clutter and lets our brains fill in the blanks. It’s a very clever move in such a busy site. 119 Blogger: Rollovers and Design Improvements 05_588338 ch03.qxd 6/22/05 11:22 AM Page 119 Here’s the relevant CSS for that example: #header form { background: url(ibox-login.jpg) no-repeat left top; padding: 12px 15px 0; width: 290px; } Figure 3-52 shows the image being used. Figure 3-52: The ibox_login.jpg image at 320 × 290px So, you don’t always have to use advanced CSS to implement a nice piece of design. This is about as simple as it gets, and it does the job admirably. Writing CSS That Benefits Your Site Maintainers There’s something rather clever going on at blogger.com, although at first glance you won’t be able to tell what it is. In fact, the only people who really appreciate this cleverness are the people who have to maintain the site, the Blogger Team. This section looks at the styling of Blogger’s content divs and shows how, with the addition of a simple class, the Blogger Team can quickly (and easily) change the layout of their site by moving from one col- umn to two, or from sidebar positioned on the left to a sidebar positioned on the right. To find out how this style-swapping works, we must first understand the basic structure of Blogger’s pages. Basic Page Structure Each of the pages on blogger.com is divided into two mains sections: a “header” (<div id=”header”>) containing the logo and tagline, and a “body” ( <div id=”body”>) containing everything else. (Don’t get that “body” div confused with the body tag (<body>); they’re two separate things.) To put this in perspective, here’s a quick outline of a Blogger page: <html> <head> <title></title> </head> <body> <div id=”header”> 120 Chapter 3 05_588338 ch03.qxd 6/22/05 11:22 AM Page 120 </div> <div id=”body”> <div id=”main”> </div> <div id=”sidebar”> </div> </div> </body> </html> We’re going to be looking closely at <div id=”body”> and its descendants. Inside the body div Almost every page on blogger.com contains a “body:” div (<div id=”body”>). Its sole purpose is to constrain the site contents to a width of 710px, and center it horizontally, as shown in Figure 3-53. Figure 3-53: The <div id=“body”> <div id=“body”> 121 Blogger: Rollovers and Design Improvements 05_588338 ch03.qxd 6/22/05 11:22 AM Page 121 Almost every page on blogger.com also contains a “main” div (<div id=”main”>), which sits inside the body div and holds the main content of the page, as shown in Figure 3-54. Figure 3-54: The <div id=“main”> This main div can either be presented on its own (as in Figure 3-54), taking up all the available width, or it can be narrowed and displayed in conjunction with a “sidebar” div (<div id=”sidebar”>), which can appear on the left or on the right of the page, as shown in Figure 3-55. <div id=“main”> 122 Chapter 3 05_588338 ch03.qxd 6/22/05 11:22 AM Page 122 Figure 3-55: The <div id=“sidebar”> and <div id=“main”> Providing alternate layouts is nothing terribly clever, but what is rather nice is the way that Bowman triggers such layout changes: by altering the value of a class applied to the body tag. Assign a class of “ms” to the body tag and the main div (m) and sidebar div (s) will display alongside each other — main on the left, sidebar on the right (see Figure 3-56). <body class=”ms”> <div id=“sidebar”> <div id=“main”> 123 Blogger: Rollovers and Design Improvements 05_588338 ch03.qxd 6/22/05 11:22 AM Page 123 [...]... All Mean? Figure 3-63 shows our starting display Figure 3-63: The unstyled display Now, let’s go through the CSS line by line and see what effect each part has First off, we’ll remove the bullets (dots) that precede each list item, as shown in Figure 3- 64: ul { list -style: none; } 1 34 Blogger: Rollovers and Design Improvements Figure 3- 64: Removing the bullets Then we’ll remove any margin and padding... 141 Chapter 3 The CSS Most of the following CSS is needed to style the table The rules that actually do the hover effect have been boldfaced for you table { background-color: #fff; border: 1px solid #ddd; empty-cells: show; font-size: 90%; margin: 0 0 20px 0; padding: 4px; text-align: left; width: 300px; } table caption { color: #777; margin: 0 0 5px 0; padding: 0; text-align: center; text-transform:... it for the Blogger Team to mix and match the layout of their pages? Let’s see the XHTML and CSS that enables this layout swapping to occur The XHTML The following is the XHTML: 126 Blogger: Rollovers and Design Improvements The CSS The following is the CSS (This is a simplified set of styles,... can easily (and quickly) affect the layout of the page This is yet another example of why CSS is so darned good 128 Blogger: Rollovers and Design Improvements CSS- Enabled Rollovers If there’s one thing that CSS has helped to simplify on the Web, it’s the humble rollover — the act of swapping one image (or color) for another when the user moves the mouse over a section of the page Until about 2001, the... tbody tr:hover { background-color: #ffe08e; } table tbody td { color: #888; padding: 2px; border: 0; } table tbody tr:hover td { color: #44 4; } 142 Blogger: Rollovers and Design Improvements What Does It All Mean? We’re not going to go through each and every line of that CSS because it’s not all relevant to this rollover section However, let’s look at the last few rules in detail The first thing to note... tips for Mac owners running Panther. Ming Jung, Anil Dash, and I get interviewed for HBO’s Real Sex. The CSS Following is the CSS: div#links { color: #333; border: 2px solid #ddd; padding: 10px; width: 240 px; } html > body div#links { width: 220px; } div#links ul { margin: 0 0 0 19px; padding: 0; } div#links ul li { list -style- image:... darker and larger We’ll also add in a rule to ensure that the second word of each link is forced onto a new line (see Figure 3- 74) : ul li a strong { color: #000; display: block; font-size: larger; } Figure 3- 74: Forcing the second word of the link to a new line That’s all looking very nice, so let’s add in the CSS that will make the rollovers work This rule alters the background color of each link as... is the default style for div#sidebar Unless some kind of class is specified in the body tag, the sidebar div will not be displayed and will be removed from the document flow div#sidebar { display: none; } 127 Chapter 3 If a class has been specified, then the following rule will constrain the width of div#main to 49 0px (from its browser default of 100 percent) to make room alongside it for the sidebar:... affects those links that the mouse is currently hovering over Following the logic of the CSS Cascade (www.htmlhelp.com/reference /css/ structure.html# cascade) each of those rules has precedence over the one before it So, a normal link will have its styles overwritten by a visited link, and a visited link will have its styles overwritten when the user hovers over it Simple, really, but you’d be surprised... the left or right We’ll do this by using floats, and to save space in our CSS file, we’re going to combine what should be four rules (two for the main div, and two for sidebar div) into just two rules The first rule floats the divs left For the main div, this rule will be applied when the body tag has the class ms applied to it For the sidebar div, this rule will be applied when the body tag has class . Figure 3 -44 : .box: after { background: transparent url(box-br.gif) no-repeat bottom right; content: url(box-bl.gif); display: block; } 1 14 Chapter 3 05_588338 ch03.qxd 6/22/05 11:22 AM Page 1 14 Figure. Sign In form There’s nothing super-clever about the CSS here. It’s just the application of a simple background-image to a form or div, but the effect is very soothing and allows the design to. busy site. 119 Blogger: Rollovers and Design Improvements 05_588338 ch03.qxd 6/22/05 11:22 AM Page 119 Here’s the relevant CSS for that example: #header form { background: url(ibox-login.jpg)