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

.box:after {background: transparent urlbox-br.gif no-repeat bottom right; content: urlbox-bl.gif; display: block; margin: 4px -10px -10px -10px; } Figure 3-45: Counteracting the padding

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-imageand contentproperties,we’ve managed to insert two images into a single pseudo-element Without that ability this fluid layoutwould be beyond our “minimalist markup” approach, and we’d have to resort to hacky CSS or evenadding 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 :afterpseudo-element:

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:

Figure 3-44: Inserting the bottom-right rounded-corner image

We must counteract the 8pxof paddingand 2pxof borderwe applied to the box We do this by applyingnegative bottom, right, and left margins to the pseudo-element, pulling it into place We also add in 4pxoftop 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-heightat work again

Figure 3-46: Line-height can cause vertical spacing problems

Let’s set a value of 0.1and fix it (see Figure 3-47):

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)

Figure 3-48: The finished article as seen in Firefox, Opera, and Safari

Dealing with Internet Explorer

Unfortunately, and unlike in the previous section, there’s no wonderfully easy way to give IE users ataste of what we’ve done here (see Figure 3-49) After a bit of margin-tweaking to remove the gaps at thetop 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’llhave 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 :beforeand :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 yourfirst 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 willbecome second nature to all of us

Implied Boxes

If rounded corners go a long way toward mellowing out Blogger’s boxy design, then Bowman’s secondidea, 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 formor div, but the effect is very soothing and allows the design to retain a level of openness whilestill providing a way for visually demarcating sections of the document In essence, it removes visualclutter and lets our brains fill in the blanks It’s a very clever move in such a busy site

Here’s the relevant CSS for that example:

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 assimple 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 totell what it is In fact, the only people who really appreciate this cleverness are the people who have tomaintain the site, the Blogger Team

This section looks at the styling of Blogger’s content divs and shows how, with the addition of a simpleclass, 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 getthat “body” divconfused with the bodytag (<body>); they’re two separate things.)

To put this in perspective, here’s a quick outline of a Blogger page:

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 toconstrain 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”>

Almost every page on blogger.com also contains a “main” div(<div id=”main”>), which sits inside thebody divand holds the main content of the page, as shown in Figure 3-54.

Figure 3-54: The <div id=“main”>

This main divcan 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”>), whichcan appear on the left or on the right of the page, as shown in Figure 3-55

<div id=“main”>

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 Bowmantriggers such layout changes: by altering the value of a classapplied to the bodytag

Assign a classof “ms”to the bodytag and the main div(m) and sidebar div(s) will display alongsideeach other — main on the left, sidebar on the right (see Figure 3-56)

<body class=”ms”>

Figure 3-56: The result of <body class=“ms”>: <div id=“main”> is on the left and <divid=“sidebar”> is on the right.

Swap that around and assign a classof smto the bodytag and the two divs swap places Now thesidebar (s) is on the left and the main div(m) on the right (see Figure 3-57)

<body class=”sm”>

Figure 3-57: The result of <body class=“sm”>: <div id=“sidebar”> is on the left and <divid=“main”> is on the right.

Leave the classattribute out entirely and the main divwill expand to fill the full width of the bodydiv The sidebar, if it exists, will be hidden (see Figure 3-58):

<body>

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 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 divhelps constrain everything and providesroom for the two divs (main and sidebar) to sit side by side (when they need to) We set its widthat710px, and set margin-leftand margin-rightvalues to autoto 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 bodytag, thesidebar divwill not be displayed and will be removed from the document flow

div#sidebar {display: none;

}

If a class has been specified, then the following rule will constrain the width of div#mainto 490px(from its browser default of 100 percent) to make room alongside it for the sidebar:

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 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 bodytag has the class

com-msapplied to it For the sidebar div, this rule will be applied when the body tag has class smapplied to it.body.ms div#main,

CSS-Enabled Rollovers

If there’s one thing that CSS has helped to simplify on the Web, it’s the humble rollover — the act ofswapping 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 andwriting something like this:

<! document.getElementById(‘picture’).src = ‘picture-rollover.jpg’;

return true;

}function SwapBack(){

document.getElementById(‘picture’).src = ‘picture.jpg’;

return true;

} >

Figure 3-59: Default and :hover link styling from stopdesign.com,simplebits.com, 37signals.com, mezzoblue.com, sidesh0w.com, and1976design.com

Let’s look at that last example and see how it might be copied.

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 Thesecond rule, a:visited {}, affects those links that the user has already visited (this is determined by thebrowser’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 stylesoverwritten by a visited link, and a visited link will have its styles overwritten when the user hoversover 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 frontpage 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

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

You’ll see that the background color has changed color and the word “thoughts” has become black Theactual 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 thissection

<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;

}

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 {

background: #fff url(icon_more.gif) no-repeat top left;

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 thebullets (dots) that precede each list item, as shown in Figure 3-64:

ul {

list-style: none;

}

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 thedefault 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, andinstead line up next to each other, horizontally, as shown in Figure 3-66 We also remove their marginand 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

Next we set the links to display: block, and apply a widthof 75px, as shown in Figure 3-68 (This isequivalent to the width of the images we’ll be using.)

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) willhave 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)

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):

And, to finish off the generic link styling, we center align the link text and remove its underline (seeFigure 3-71):

ul li a {color: #777;

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

Things are coming together nicely Next, we’ll make the first word of each link darker and larger, asshown 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):

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):