HTML and CSS Reference
In-Depth Information
We've already included the “module” class in our markup so now it's time to decide what a sidebar module
looks like. It doesn't need to be too fancy, just some padding, a border, and a background color. A bottom
margin separates modules when they stack up in the sidebar. Listing 10-19 presents the CSS rule for
sidebar modules (actually any element in the “module” class, wherever it might occur).
Listing 10-19. A common style for modular boxes
.module {
padding: 15px 20px 10px;
margin: 0 0 20px;
background: rgba(255,255,255,0.5);
border: 2px solid #e1dcca;
border-color: rgba(150,150,150,0.25);
Once again we're using an RGBA color—pure white at 50% opacity—so the box allows some of the
background behind it to show through, but here we haven't bothered to include an opaque color for older
browsers. We could certainly do that, but it's not really necessary in this case. The translucent background
is an added enhancement for the browsers that support RGBA; other browsers can simply live without it.
Web pages don't need to look exactly the same in every browser ever made. However, we do still want the
module's edges to be visible so we'll include a solid fallback color for the border and more advanced
browsers can display the RGBA border instead.
In addition to the generic module box we've also established product boxes as a markup pattern, and we
can create some basic styles for those boxes wherever they may occur. We planned ahead when we were
constructing our document so we have plenty of meaningful classes to use as style hooks, starting with the
product image.
The img element is a replaced element , meaning it has no content and the element itself isn't rendered on
the page, it's merely replaced by the source image file. Even so, some aspects of the img element's
presentation are still susceptible to CSS; width and height, naturally, but also margins, padding, borders,
and even backgrounds. We can create a frame effect around product images by padding the img element
(selected by its “product-img” class) and adding an opaque white background:
.product .product-img {
background-color: #fff;
padding: 4px;
We'll add a thin white border as well, making the “frame” appear to be five pixels wide; 4px of padding plus
1px of border, merging seamlessly because they're the same color. When a user hovers her mouse over
the link or gives it focus—remember, the product image is inside a link—we'll change the border color to
offer some hint that the image is clickable.
You can see our final product image rules in Listing 10-20, including a rule for the image in hovered,
focused, and active link states. We've declared display:block so the image will rest on its own line, and
a bottom margin adds some space between the image and the text that follows it.
Search WWH ::

Custom Search