Why It s Bulletproof
Why It's Bulletproof
After all of the CSS sorcery we've applied to this example, we may have long forgotten why we went down this
You could also chalk this up as a big win for database-driven sites, where a uniform and more predictable markup structure could be reused more easily. Instead of worrying about whether the image comes before the title and description in the markup (when dealing with tables), the structure remains consistent and easily repeated in dynamic templates.
In choosing to use CSS to structure our grid-like layout, we've removed presentational code and graphic titles from the component, and in
|
Summary
By working through the construction of this example, my hope is that it'll help make a case for creatively using floats to achieve grid-like effects. By understanding how to clear floats, you gain access to a wide range of possibilities without having to add extra markup. There are
Here are a few points to consider:
|
Chapter 5. Indestructible BoxesPlan for the unknown when constructing styled boxes. Although the very nature of CSS tends to be rather boxy, that doesn't mean designs have to be constrained to square dimensions. The CSS box model defines rectangular boxes that are generated for elements within a document's structure (www.w3.org/TR/REC-CSS2/box.html)in other words, a rectangular box is the standard method for organizing elements when using CSS. The result can lead to square, boxy designs being the norm.
This is nothing new, of course. Even prior to the widespread use of CSS layouts, table-based designs were constrained to a box design as well, with each table
This chapter describes a method for creating rounded -corner boxes using background images in CSS. We rebuild an existing design from the Web, making it flexible and thus preparing for the worst-case scenario in terms of what could be placed inside the box. Later, we discuss an alternate method for creating a rounded-corner box that is flexible in every direction but that requires extra markup. |
A Common ApproachAs with the previous examples we've deconstructed thus far, we first take a traditional approach to building a rounded-cornered box and rebuild it using CSS. For this example, I've decided to use the box design found in the "My Account" section of the popular DVD subscription site Netflix (Figure 5.1). Figure 5.1. The "My Account" page on Netflix.com (from April 2005).
The rounded box is a common component on the Netflix site (and on many others), and rounded-off corners give that extra level of detail that would
Figure 5.2. The rounded boxes found on the Netflix site are common on many sites.
You can probably guess what I'm going to say
This section focuses on rebuilding one of these boxes, so let's zoom in and inspect the design details, noting what we need in a "materials checklist" for later. I've stripped away the content in Figure 5.3, so that you can clearly see, graphically, how the box is put together. Figure 5.3. With the box content removed, we can more easily inspect the design details.
If we focus on the top portion of the box, notice each end is rounded at the top, followed by a gradient fade down to a solid line as a background for the box's heading (Figure 5.4). Figure 5.4. A close-up of the background that sits behind the box's heading reveals a gradient fade down to a solid border.
Similarly, the bottom of the box has rounded corners on both ends, but without a gradient fade (Figure 5.5). Figure 5.5. The box's rounded bottom corner has no gradient fade.
|
