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
Figure 3-56: The result of <body class=“ms”>: <div id=“main”> is on the left and <div
id=“sidebar”> is on the right.
Swap that around and assign a
class of sm to the body tag and the two divs swap places. Now the
sidebar (s) is on the left and the main
div (m) on the right (see Figure 3-57).
<body class=”sm”>
124
Chapter 3
05_588338 ch03.qxd 6/22/05 11:22 AM Page 124
Figure 3-57: The result of <body class=“sm”>: <div id=“sidebar”> is on the left and <div
id=“main”> is on the right.
Leave the
class attribute out entirely and the main div will expand to fill the full width of the body
div. The sidebar, if it exists, will be hidden (see Figure 3-58):
<body>
125
Blogger: Rollovers and Design Improvements
05_588338 ch03.qxd 6/22/05 11:22 AM Page 125
Figure 3-58: The result of setting no class attribute on <body>. Only <div id=“main”> displays.

See how easy that is? See how easy Bowman has made 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:
<body>
<div id=”header”>
</div>
<div id=”body”>
<div id=”main”>
</div>
<div id=”sidebar”>
</div>
</div>
</body>
126
Chapter 3
05_588338 ch03.qxd 6/22/05 11:22 AM Page 126
The CSS
The following is the CSS. (This is a simplified set of styles, dealing with layout only. Colors, borders, and
so on have been left out.)
div#body {
margin: auto;
width: 710px
}
div#sidebar {
display: none;
}
body.ms div#main,
body.sm div#main {

width: 490px;
}
body.ms div#sidebar,
body.sm div#sidebar {
display: block;
width: 200px;
}
body.ms div#main,
body.sm div#sidebar {
float: left;
}
body.sm div#main,
body.ms div#sidebar {
float: right;
}
What Does It All Mean?
Okay, let’s break that CSS down rule by rule.
First off, let’s look at the styling for the
body div. This div helps constrain everything and provides
room for the two
divs (main and sidebar) to sit side by side (when they need to). We set its width at
710px, and set margin-left and margin-right values to auto to center the content:
div#body {
margin: 0 auto;
width: 710px
}
Next 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
Blogger: Rollovers and Design Improvements
05_588338 ch03.qxd 6/22/05 11:22 AM Page 127
If a class has been specified, then the following rule will constrain the width of div#main to 490px
(from its browser default of 100 percent) to make room alongside it for the sidebar:
body.ms div#main,
body.sm div#main {
width: 490px;
}
If a class has been specified, we also must set some styles that will be applied to the sidebar div:
body.ms div#sidebar,
body.sm div#sidebar {
display: block;
width: 200px;
}
The display: block counteracts the display: none (which we set as our default style for the sidebar),
making it visible again. We also set the sidebar’s width at
200px.
Now that we’ve set up the display and widths of the main and sidebar
divs, it’s time to position them
on the left or right. We’ll do this by using floats, and to save space in our CSS file, we’re going to com-
bine 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 sm applied to it.
body.ms div#main,
body.sm div#sidebar {

float: left;
}
The second rule floats the divs right. For the main div, this rule will be applied when the body tag has
the class
sm applied to it. For the sidebar div, this rule will be applied when the body tag has class ms
applied to it.
body.ms div#sidebar {
float: right;
}
And that’s all there is to it. By simply altering the class of the body tag, members of the Blogger Team
can easily (and quickly) affect the layout of the page. This is yet another example of why CSS is so
darned good.
128
Chapter 3
05_588338 ch03.qxd 6/22/05 11:22 AM Page 128
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 only reliable way to achieve such an effect was by breaking out JavaScript and
writing something like this:
<html>
<head>
<title></title>
<script type=”text/javascript”>
<!
function SwapOut()
{
document.getElementById(‘picture’).src = ‘picture-rollover.jpg’;
return true;
}

function SwapBack()
{
document.getElementById(‘picture’).src = ‘picture.jpg’;
return true;
}
>
</script>
</head>
<body>
<p><a href=”” onmouseover=”SwapOut()” onmouseout=”SwapBack()”><img id=”picture”
src=”picture.jpg” width=”100” height=”150” /></a></p>
</body>
</html>
CSS, thank heavens, has given us a number of different ways to achieve the same goal, and they’re all
delightfully simple. Let’s take a look at them. . . .
Changing the Color and Background Color
of Links (Simple)
This is the simplest (and most common) of all CSS rollover techniques. It is used to alert the user that the
mouse is placed over a hyperlink.
Figure 3-59 shows some examples of the rollover in action.
129
Blogger: Rollovers and Design Improvements
05_588338 ch03.qxd 6/22/05 11:22 AM Page 129
Figure 3-59: Default and :hover link styling from stopdesign.com,
simplebits.com, 37signals.com, mezzoblue.com, sidesh0w.com, and
1976design.com
130
Chapter 3
05_588338 ch03.qxd 6/22/05 11:22 AM Page 130
Let’s look at that last example and see how it might be copied.

The XHTML
Following is the XHTML:
<p> If you’re interested then <a href=””>bung me an email</a> and we can talk about
what you want </p>
So, all that’s needed is a simple a tag. How about the CSS?
The CSS
Following is the CSS:
a {
border-bottom: 1px solid #eee;
color: #d17e62;
text-decoration: none;
}
a:visited {
border-bottom: 1px solid #eee;
color: #9d604c;
text-decoration: none;
}
a:hover {
background-color: #ffffda;
border-bottom: 1px solid #ddd;
color: #c30;
text-decoration: none;
}
It’s important to note the order in which those rules are written. The first rule, a{}, affects all links. The
second rule,
a:visited {}, affects those links that the user has already visited (this is determined by the
browser’s cache). The third rule,
a:hover {}, 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 how many people get those in the wrong order.
Changing the Color and Background Color of Links
(Complex)
This is a great trick for fast, low-bandwidth rollovers, and it’s something Bowman has used on the front
page of Blogger. It involves nothing more than altering the background color of an element, while keep-
ing the image on top of that background (be it an inline image or a CSS background image) the same.
To see it in action, Figure 3-60 shows four links on the front page of blogger.com.
131
Blogger: Rollovers and Design Improvements
05_588338 ch03.qxd 6/22/05 11:22 AM Page 131
Figure 3-60: Four links on the front page of blogger.com. (The rest of the page has been dimmed
so you can clearly identify the links.)
Figure 3-61 shows what happens when you move the mouse over one of those links.
Figure 3-61: One of the rollover links in action
132
Chapter 3
05_588338 ch03.qxd 6/22/05 11:22 AM Page 132
You’ll see that the background color has changed color and the word “thoughts” has become black. The
actual button image, however, hasn’t changed at all.
How has this been achieved? Well, first off, let’s look at the XHTML, CSS, and images that make up this
section.
The XHTML
Following is the XHTML:
<ul>
<li id=”publish”><a href=”tour_publish.g”><strong>Publish</strong> thoughts
</a></li>
<li id=”feedback”><a href=”tour_feedback.g”><strong>Get</strong> feedback</a></li>

<li id=”people”><a href=”tour_people.g”><strong>Find</strong> people</a></li>
<li id=”more”><a href=”tour_more.g”><strong>And</strong> more </a></li>
</ul>
The CSS
Following is the CSS:
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
float: left;
margin: 0;
padding: 0;
}
ul li a {
color: #777;
display: block;
padding: 80px 10px 5px;
text-align: center;
text-decoration: none;
width: 75px;
}
ul li#publish a {
background: #fff url(icon_publish.gif) no-repeat top left;
}
ul li#feedback a {
background: #fff url(icon_feedback.gif) no-repeat top left;
}
ul li#people a {

background: #fff url(icon_people.gif) no-repeat top left;
}
ul li#more a {
133
Blogger: Rollovers and Design Improvements
05_588338 ch03.qxd 6/22/05 11:22 AM Page 133
background: #fff url(icon_more.gif) no-repeat top left;
}
ul li#publish a:hover,
ul li#feedback a:hover,
ul li#people a:hover,
ul li#more a:hover {
background-color: #f8f2eb;
}
ul li a strong {
color: #000;
display: block;
font-size: larger;
}
ul li a:hover {
color: #000;
}
The Images
For this to work, the images being used must have transparent sections that let the background color of
the image (or of the parent element) show through. In each case, the images shown in Figure 3-62 have
had their transparent sections replaced with a checkered pattern, so you can see which bits are see-
through, and which aren’t.
Figure 3-62: The checkered pattern indicates transparent areas.
What Does It 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;
}
134
Chapter 3
05_588338 ch03.qxd 6/22/05 11:22 AM Page 134
Figure 3-64: Removing the bullets
Then we’ll remove any margin and padding the unordered list might have, as shown in Figure 3-65. We
do this so that when we come to position the finished list in the page, we’re not fighting against the
default browser settings for padding and margin on unordered lists.
ul {
list-style: none;
margin: 0;
padding: 0;
}
Figure 3-65: Removing margins and padding
Next, we style the list items. First, we float each item left, so that they no longer display vertically, and
instead line up next to each other, horizontally, as shown in Figure 3-66. We also remove their margin
and padding.
ul li {
float: left;
margin: 0;
padding: 0;
}
Figure 3-66: Floating each item in the list
Now we style the links. First we set a font color (see Figure 3-67):
ul li a {

color: #777;
}
Figure 3-67: Setting a font color
135
Blogger: Rollovers and Design Improvements
05_588338 ch03.qxd 6/22/05 11:22 AM Page 135
Next we set the links to display: block, and apply a width of 75px, as shown in Figure 3-68. (This is
equivalent to the width of the images we’ll be using.)
ul li a {
color: #777;
display: block;
width: 75px;
}
Figure 3-68: Blocking the elements
Now we must insert some white space so that our images (which we’ll be adding in a short while) will
have somewhere to sit, as shown in Figure 3-69. We do this by adding in 80px of padding at the top
(75px for the image, and 5px to make a gap between the image and the text).
ul li a {
color: #777;
display: block;
padding: 80px 0 0 0;
width: 75px;
}
Figure 3-69: Inserting white space for placement of the images
Next we add in 10px of padding on the left and padding on the right, and 5px of padding on the bottom
(see Figure 3-70):
ul li a {
color: #777;
display: block;
padding: 80px 10px 5px;

width: 75px;
}
Figure 3-70: Adding padding
136
Chapter 3
05_588338 ch03.qxd 6/22/05 11:22 AM Page 136
And, to finish off the generic link styling, we center align the link text and remove its underline (see
Figure 3-71):
ul li a {
color: #777;
display: block;
padding: 80px 10px 5px;
text-align: center;
text-decoration: none;
width: 75px;
}
Figure 3-71: Centering text and removing underlining
Now it’s time to add in the background images for each of the links, as shown in Figure 3-72:
ul li#publish a {
background: transparent url(icon_publish.gif) no-repeat top center;
}
ul li#feedback a {
background: transparent url(icon_feedback.gif) no-repeat top center;
}
ul li#people a {
background: transparent url(icon_people.gif) no-repeat top center;
}
ul li#more a {
background: transparent url(icon_more.gif) no-repeat top center;
}

Figure 3-72: Adding background images
137
Blogger: Rollovers and Design Improvements
05_588338 ch03.qxd 6/22/05 11:22 AM Page 137
Things are coming together nicely. Next, we’ll make the first word of each link darker and larger, as
shown in Figure 3-73:
ul li a strong {
color: #000;
font-size: larger;
}
Figure 3-73: Making the first word of the links 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 the user hovers the mouse over it (see Figure 3-75):
ul li#publish a:hover,
ul li#feedback a:hover,
ul li#people a:hover,
ul li#more a:hover {
background-color: #f8f2eb;
}
Figure 3-75: Altering the background color
138
Chapter 3

05_588338 ch03.qxd 6/22/05 11:22 AM Page 138