The Construction


Now that we've outlined the ways in which this one-page design is bulletproof, let's walk through the construction of the design. I'll note the necessary steps it took to ensure flexibility without compromising attractive visuals. We'll begin where we left off in Chapter 8 by first applying a flexible, two-column layout to a lean markup structure. Then we'll go through each component of the page piece by piece, refreshing our memory from previous chapters on how best to bulletproof these areas.

THE MARKUP STRUCTURE

Let's start by thinking about the very basic structure that we'll need in terms of markup to create the fluid, two-column layout. We'll employ the "Sliding Faux Columns" technique here that we described in Chapter 8 and use a tiled background image to create the illusion of a full-length sidebar.

Our markup structure for the header, promotional row, two columns, and footer looks like this:

 <div > <div >   <h1>Bulletproof Pretzel Company</h1> </div> <p >   <strong>Special:</strong> 30% off all week-old pretzels! Get 'em while they're... hot? </p> <div >   ... content goes here ... </div> <div >   ... sidebar goes here ... </div> <div >   <p>Copyright &copy; 2005 Bulletproof Pretzel Company.  All rights reserved.</p> </div> </div> <!-- end #wrap --> 

The markup choices I've made hereusing an <h1> for the site title and a simple paragraph for the message roware (I think) the most appropriate elements for the task at hand. Below that are <div>s separating what will be two columns, followed by the footer at the bottom of the page.

Right off the bat, I know that I want that extra level of control on the content and sidebar's guttersapplying a fixed amount in each column. Because of that, I'm going to add that extra <div> wrapper inside both columns for future use:

 <div > <div >   <h1>Bulletproof Pretzel Company</h1> </div> <p >   <strong>Special:</strong> 30% off all week-old pretzels! Get 'em while they're... hot?. </p> <div >   <div >     ... content goes here ...   </div> </div> <div >   <div >     ... sidebar goes here ...   </div> </div> <div >   <p>Copyright &copy; 2005 Bulletproof Pretzel Company.  All rights reserved.</p> </div> </div> <!-- end #wrap --> 

You'll notice that I've added a to these two extra <div>s so that later on, I can style these consistently as a pair, in a single declaration if I so choose. We'll talk more about that in just a bit.

BASIC STYLES

With the core markup structure in place, let's next add some basic styles to get the CSS off and running. We'll start by adding a declaration for the main <body> element, zeroing margins and padding for the entire page, and adding base font information:

 body {   margin: 0;   padding: 0;   font-family: Verdana, sans-serif;   font-size: small;   background: #fff;   } 

By applying the technique described in Chapter 1, we're assigning a base font-size with a keyword of small. Later, we'll adjust sizes from that keyword by using percentages in either direction.

LAYOUT STRUCTURE

Next, let's add the necessary rules that set up the two-column layout by floating the content and sidebar against each other and clearing the footer below:

 /* layout structure */ #content {   float: left;   width: 70%;   } #sidebar {   float: right;   width: 30%;   } #footer {   clear: both;   background: #828377;   } 

We're floating the content column left and giving it a width of 70%, while the sidebar is floated right with the remaining width of 30%. Below the columns sits the footer, which clears both columns and gets a background color (Figure 9.6).

Figure 9.6. The columns are floated against each other, each with a percentage specified for width.


You'll notice that thus far, we haven't specified any spacing within or between the columns. We'll save that for the extra <div > that we added inside each column. That will give us further precision in defining the gutters in between and allow us to use pixel values along with the percentages that we've just specified for the actual column widths.

SIDEBAR BACKGROUND

We'll use the same technique described in Chapter 8 to achieve the "Sliding Faux Columns"specifically the khaki background that sits behind the sidebar.

Since we've specified the sidebar to be 30% in width, we'll create a 2000-pixel-wide image (wrap-bg.gif) that has a 600-pixel-wide area on the right with the sidebar's background color and shadowed edge (Figure 9.7). This will allow us to position this image 70% from the left, enabling it to slide behind the column to show only the amount of sidebar background necessary.

Figure 9.7. The image wrap-bg.gif is 2000 pixels wide and will be tiled vertically behind the columns.


Let's now add the styles necessary to position wrap-bg.gif as a background of the <div > that surrounds the entire layout of the page:

 /* layout structure */ #wrap {   min-width: 500px;   max-width: 1400px;   background: url(img/wrap-bg.gif) repeat-y 70% 0;   } #content {   float: left;   width: 70%;   font-size: 95%;   line-height: 1.5em;   color: #333;   } #sidebar {   float: right;   width: 30%;  } #footer {   clear: both;   background: #828377;   } 

We've added a #wrap declaration that positions wrap-bg.gif 70% from the left, repeating it vertically from the top. You'll also notice that I've added min and max-width rules for the browsers that recognize those rules. Remember that these values give a fluid layout "extreme parameters" in which to expand and contract. Users of browsers other than Internet Explorer will benefit from these.

Also included are some basic font styles for the content column; we're shaving off a little size from the base keyword previously specified on the <body> element and adding some increased space between lines as well as a dark gray color.

Figure 9.8 shows the results of adding those rules to our style sheet, with the tiled background image now properly tiled on the sidebar.

Figure 9.8. The correct amount of khaki is revealed when the tiled image is positioned 70% from the left.


THE HEADER

Starting from the top down, we'll apply styles to each component of the page, beginning with the header. We're going to keep "Bulletproof Pretzel Company" in text enabling the reader to adjust its size at will without breaking the design of this particular piece. It will also allow extra long titles to be placed in this row, with the design details always remaining intact.

We'll need two small images for this component: the bull's-eye that sits behind and to the left of the site title, as well as a tillable gradient fade that adds the "sheen" to the row.

Figure 9.9 shows header-bg.gif, the image that will tile horizontally across the header row, a gradient fade into a solid green. That solid green has been knocked out in favor of transparency (shown by the checkerboard pattern in Photoshop). This transparent area will be filled in by a background color in the CSS. Aligning this image at the top will allow the solid color to grow or shrink depending on the size of the text within the header.

Figure 9.9. The image header-bg.gif contains a gradient fade into a solid green, where the green has been "knocked out" for transparency.


Figure 9.10 shows bulls-eye.gif, the image that will sit to the left and behind the site title but on top of the header's tiled image and background color. I've created this image to be larger than I think I need it to be, with more or less of the bull's-eye artistically cropped by varying text size.

Figure 9.10. The image bulls-eye.gif includes the gradient in the upper portion, then fades into transparency, which will be filled in later by a background color.


You'll notice that part of the image is transparent as well. The upper portion duplicates the gradient fade found in header-bg.gif so that when the images are stacked on top of each other, they will blend properly.

With images created, let's now add the CSS necessary to make it all work together:

 /* header */ #header {   border-bottom: 3px solid #87B825;   background: #B4E637 url(img/header-bg.gif) repeat-x top left;   } #header h1 {   margin: 0;   padding: 25px;   font-family: Georgia, serif;   font-size: 150%;   color: #374C0E;   background: url(img/bulls-eye.gif) no-repeat top left;   } 

We've added a three-pixel solid border to the bottom of the entire row, thus ensuring that the border will always sit at the very bottom regardless of the size or amount of text that's above it. Also, we've added the solid background color and the horizontally tiled image (header-bg.gif) that will add the gradient fade to the row.

As for the <h1> that sits inside <div >, we've adjusted its margins and padding, changed its typeface to the serif Georgia, and increased its size from the base by a percentage. We've also positioned the bull's-eye background behind it. Giving that padding of 25 pixels all the way around the heading will ensure that enough of the bull's-eye image is revealed on the left (Figure 9.11).

Figure 9.11. In the finished header, the bull's-eye is layered on top of the header's gradient and green background color.


As a quick test, let's bump up the text size a few notches. As you can see in Figure 9.12, more of the bull's-eye is revealed and the overall background of the header row remains perfect.

Figure 9.12. Increasing the text size pushes the three-pixel border down and reveals more of the bull's-eye image that was previously cropped higher.


THE MESSAGE ROW

Moving on down the page, let's next tackle the message row that sits just below the header that we just finished. The message row is simply a paragraph element that we've uniquely identified:

 <p >   <strong>Special:</strong> 30% off all week-old pretzels! Get 'em while they're... hot?. </p> 

We'll need just one small image that will tile across the top of the row, which blends into the background color that we'll also specify behind it in the CSS (Figure 9.13). This image consists of one-pixel vertical lines that fade into the dark-green background.

Figure 9.13. We've zoomed in to show the detail of the "comb" pattern that spans across the message row.


Figure 9.14 shows a zoomed-in message-bg.gif. The image tiles horizontally, and a solid color fills in its transparent areas.

Figure 9.14. The message-bg.gif image will tile horizontally, and the transparent areas will be filled in by a background color in the CSS.


Let's next add the CSS necessary to style the row: assigning padding around the text, changing its color and size, as well as tiling the background image on top of the dark-green background color.

 /* message row */ #message {   margin: 0;   padding: 10px;   font-size: 90%;   color: #cc9;   text-align: center;   background: #404530 url(img/message-bg.gif) repeat-x top left;   } 

We also want to attach the small pretzel icon to the left of the text. We can take advantage of the <strong> element that wraps around the first word "Special" and add the pretzel as a background image by adding left padding to the text.

 #message strong {   padding: 0 0 0 28px;   background: url(img/pretzel.gif) no-repeat 0 50%;   } 

So the <strong> element within the message row gets 28 pixels of padding on the leftjust enough to accommodate the pretzel icon, which is centered vertically as a background image.

Figure 9.15 shows the results of styling the message row completely. The figure also demonstrates that when a larger-sized text (or a greater amount of text) is placed within the row, the row will expand without any problems. Because we chose a repeating pattern that sits flush to the top of the row and blends vertically into the background, we ensure that the design details will remain intact regardless of what's contained inside the row.

Figure 9.15. In the completed message row, an increase in text size does nothing to harm the "comb" pattern and background.


tip

This is a nice example of how you can creatively make bulletproofing components easierby creating graphics that have a start point but that fade into a solid color. We allow that solid color to expand or contract, while the graphic portion stays anchored. It's the mixture of CSS-generated visuals (background colors and borders) with graphics that enable us to present adaptable designs.


GUTTERS

In order to give the content and sidebar columns a fixed amount of padding on all sides, let's next add styles for the <div > that we added inside both columns:

 /* gutters */ #content .gutter {   padding: 25px;   background: url(img/content-bg.gif) repeat-x top left;   } #sidebar .gutter {   padding: 15px;   } 

To give the content and sidebar columns different values in terms of padding, we've added two declarations here. On the content column, we've added 25 pixels of padding all the way around, while in the sidebar column we've added 15 pixels of padding. We've also added that yellow gradient fade that repeats horizontally across the top, above "Our Company History." Figure 9.16 shows the image, which, when tiled, fills out the entire top of the content column.

Figure 9.16. The image content-bg.gif will tile horizontally across the top of the content column.


Figure 9.17 shows our progress thus far, with the columns now sporting room to breathe between thema fixed amount, regardless of screen width.

Figure 9.17. The gutters now add breathing room to each column.


CONTENT COLUMN

For the content column, we'll style the image/title/description combination that sits in the middle of the page, but first, let's add a declaration for the "Our Company History" heading that lives at the top.

tip

I often like to use ems for margins and padding on text elements that stack on top of each other (headings, paragraphs, lists, etc. in body sections of a page), where the margins and padding will increase proportionately along with the element's text size. Unlike a pixel unit, that would remain constant, regardless of text size, ems are relative units that correspond to the element's "current font-size." For instance, as the text size of the page is increased, our bottom margin of 1em on the <h2> will increase proportionately as well.


Since we're using an <h1> for the site's title already, for the page's title, we'll use the next heading level in line:

 <h2>Our Company History</h2> 

And then add the simple and straightforward CSS that styles the heading:

 /* content */ #content h2 {   margin: 0 0 1em 0;   padding: 0;   font-family: Georgia, serif;   font-size: 150%;   font-weight: normal;   color: #663;  } 

In the previous declaration, we've specified styles for any <h2> elements that live within the content column. These headings will have only a bottom margin of 1em (or the height of one character at whatever text size the heading happens to be). Zeroing the top margin that headings have by default will tighten up the top of the content area, ensuring an even 25 pixels of padding on all sides (as we declared on the extra <div> used for gutters earlier).

For more interesting examples that utilize ems for sizing images or even complete layouts, see Patrick Griffith's "Elastic Design Demonstration" (www.htmldog.com/articles/elasticdesign/demo/).

In addition, we've changed the typeface to Georgia, increased it to 150% of the base size, and assigned it an olive-green color. By default, heading elements are bold, and we've reversed that by specifying font-weight: normal; (because I happen to think it looks best this way on screen for this particular font).

Figure 9.18 shows the results of that simple declaration, with the title of the content column styled nicely.

Figure 9.18. The title of the page is now styled in Georgia in a lovely shade of olive green.


With the heading now styled, let's turn our attention to the image/title/description further down the page. Recall how we handled this back in Chapter 4, "Creative Floating"; instead of using a table to lay these elements out in a grid-like fashion, we'll use a simple definition list and utilize the float property in CSS to position things as we'd like.

Remember that in the example in Chapter 4, we used the "Opposing Floats" method for positioning the title to the right of the image, while keeping the markup in an optimal order. In that example, we were dealing with a fixed-width container, which made it a bit easier to apply margins and widths to the elements to ensure they'd line up properly. This time around, since we're working with a fluid-width layout, we don't have that luxury. Instead, we'll place the image before the title in the markup, thus trading optimal markup order for flexibility.

So, in our markup (within the <div > of the content column) we'll stick the image just before the title within the <dt> element like this:

 <dl >   <dt><img src="/books/2/68/1/html/2/img/bldg.jpg" width="150" height="113" alt="building" />Where it all began</dt>   <dd>Vestibulum risus. Nullam adipiscing. Etiam fringilla...</dd> </dl> 

In a moment, we'll position that image using the float property to sit to the left of both the title and description. The image is just sort of jammed in there, and it may seem odd for it to be placed this way. As I mentioned before, the placement in the markup is somewhat of a trade-off because of the fluid-width layout that we're working with. Looking back at Figure 9.5, unstyled, things look pretty reasonable, with the image not really getting in the way of the title and description.

Let's start adding the styles for this component, beginning with a general declaration for the <dl> element itself, adding dotted lines on the top and bottom, as well as margins and padding:

 dl.feature {   margin: 15px 0;   padding: 15px;   border-top: 1px dotted #ccc;   border-bottom: 1px dotted #ccc;   } 

Figure 9.19 shows the results of that single declaration. We'll tackle the positioning of the image next.

Figure 9.19. We're using a dotted border on the top and bottom, with margins and padding set for the <dl>.


Now we want to float the image to the left, and also give a left margin to the <dd> element, so that regardless of the amount of text, the description won't wrap around the image:

 dl.feature {   margin: 15px 0;   padding: 15px;   border-top: 1px dotted #ccc;   border-bottom: 1px dotted #ccc;   } dl.feature dt img {   float: left;   margin: 0 15px 0 0;   padding: 0 4px 4px 0;   background: url(img/photo-frame.gif) no-repeat bottom right;   } dl.feature dd {   margin-left: 169px;   font-size: 90%;   line-height: 1.5em;   color: #666;   } 

In addition to floating the image, we've added a small shadow to the bottom-right corner of the image that acts as a subtle frame (Figure 9.20). We've added the appropriate amount of padding around that portion of the image so that it will be visible. Because this image fades to white, it could be reused on a variety of image sizes.

Figure 9.20. The image photo-frame.gif will sit to the bottom right of the image, giving it a shadow effect.


Figure 9.21 shows the results so far, where you'll notice that because we applied a left -margin to the <dd> element, the text won't wrap around the image should it become longer than the image is tall. This maintains the column-like effect of the two objects sitting side by side.

Figure 9.21. With a left margin greater than the width of the image, the two elements will stay in their respective "columns."


Next, let's style the <dt> element and give the title text a different font, size, and color:

 dl.feature {   margin: 15px 0;   padding: 15px;   border-top: 1px dotted #ccc;   border-bottom: 1px dotted #ccc;   } dl.feature dt {   margin: 0 0 .5em 0;   font-family: Georgia, serif;   font-size: 140%;   color: #693;   } dl.feature dt img {   float: left;   margin: 0 15px 0 0;   padding: 0 4px 4px 0;   background: url(img/photo-frame.gif) no-repeat bottom right;   } dl.feature dd {   margin-left: 169px;   font-size: 90%;   line-height: 1.5em;   color: #666;   } 

Figure 9.22 shows the results of turning the <dt> larger and bright green, with a small margin underneath to set a little spacing between it and the description.

Figure 9.22. Styling the title is made simple by adding a few rules for the <dt> element.


Self-clearing

Without clearing the floated image, we run the risk of it getting in the way of text that follows. For instance, notice in Figure 9.23 that stretching the layout wide reduces the number of description lines and bumps the image down into the rest of the page. You'll remember from Chapter 4 that we solved this with the "Float to Fix" methodthat is, also floating the container that the holds the floating image within. This works especially well for fixed-width layouts, where a predictable width can be assigned to that outer container. In this case, however, we're utilizing a fluid-width layout, where the description's length can vary drastically depending on the width of the browser window. What we need is a way to "self-close" the float.

Figure 9.23. With description text that is shorter than the floated image, overlap occurs.


There are a few ways to accomplish this, as discussed in Chapter 4. I'm going to use the "Clearing a Float Container Without Structural Markup" method described at Position Is Everything (http://positioniseverything.net/easyclearing.html).

The technique involves using the :after pseudo-class to insert (but also hide) a character after the container that clears any previous floats. The :after pseudo-class isn't supported by Internet Explorer, so we'll need to add a fix for those browsers, which we'll do later on.

So to add the self-clearing CSS to our existing image/title/description, insert the following:

 dl.feature {   margin: 15px 0;   padding: 15px;   border-top: 1px dotted #ccc;   border-bottom: 1px dotted #ccc;   } dl.feature:after {   content: ".";   display: block;   height: 0;   clear: both;   visibility: hidden;   } dl.feature dt {   margin: 0 0 .5em 0;   font-family: Georgia, serif;   font-size: 140%;   color: #693;   } dl.feature dt img {   float: left;   margin: 0 15px 0 0;   padding: 0 4px 4px 0;   background: url(img/photo-frame.gif) no-repeat bottom right;   } dl.feature dd {   margin-left: 169px;   font-size: 90%;   line-height: 1.5em;   color: #666;   } 

You'll notice that the declaration inserts a period after the <dl> element that clears all floats that precede it but that is subsequently hidden from view. It's a neat little trick. Again, later, we'll want to address IE in a different wayand we'll do so later on in the chapter.

Figure 9.24 shows the results of the self-clearing fix, where you can see that even though the description is shorter than the image, the entire <dl> is cleared for the text that follows it.

Figure 9.24. With the "self-clearing" fix in place, any overlap is avoided.


SIDEBAR COLUMN

With the styling of the content column complete, let's move on to the sidebar, where we want to customize the text and lists that live there. As with the "indestructible boxes" from Chapter 5, we'll attach the rounded corners that appear on the top left and bottom right of each box (Figure 9.25). I've made it a bit easier for myself by only rounding two of the four corners, but I like the design effect here as well.

Figure 9.25. We'll create these sidebar styles.


First, let's talk about how each box will be marked up. As we did with the example in Chapter 5, we'll use a single <div> to wrap the headings, lists, and paragraphs into separate, independent chunks. This will also give us just enough elements to complete the design of the boxes.

 <div >   <div >     <div >       <h3>What Are Pretzels?</h3>       <p>Pretzels are delicious baked snacks made from dough that's twisted into shape.</p>     </div>     <div >       <h3>Our Pretzels</h3>       <ul>         <li><a href="#">Plain</a></li>         <li><a href="#">Salted</a></li>         <li><a href="#">Chocolate covered</a></li>         <li><a href="#">Yogurt covered</a></li>         <li><a href="#">BBQ</a></li>       </ul>     </div>     <div >       <h3>About Us</h3>       <ul>         <li><a href="#">History</a></li>         <li><a href="#">Jobs</a></li>         <li><a href="#">Contact Us</a></li>         <li><a href="#">Directions</a></li>       </ul>     </div>   </div> <!-- end .gutter --> </div> <!-- end #sidebar --> 

As you can see, the structure is rather straightforward, with a <div > wrapping each segment. Heading level 3 elements are used for each box's title, followed by a paragraph or list of links.

We need just two, tiny images to achieve the rounded effect on each box. The image is the rounded portion only of the top-left and bottom-right corners. Each image is transparent with the sidebar's background around it.

Figure 9.26 shows the two rounded-corner images, zoomed in so that we can see the detail. The transparent areas of the images will be filled in by the white background color of each box.

Figure 9.26. The images box-t.gif and box-b.gif will be aligned to the top-left and bottom-right corners of each box.


Now we're ready to start adding CSS to complete the sidebar's design. First, let's adjust margins and padding on the box itself, decreasing the text size and adding a white background. Let's also style the <h3> elements within each box; we'll give them even padding, and change their font, size, weight, and color.

 /* sidebars */ .box {   margin: 0 0 20px 0;   padding: 0 0 12px 0;   font-size: 85%;   line-height: 1.5em;   color: #666;   background: #fff;   } .box h3 {   margin: 0;   padding: 12px;   font-family: Georgia, serif;   font-size: 140%;   font-weight: normal;   color: #693;   } 

Figure 9.27 shows the results of the previous two declarations.

Figure 9.27. Giving the <div>s a white background and styling each <h3> element gives the boxes some shape.


Next, let's add the rounded-corner images in, by assigning one as a background of the box itself (bottom-right corner) and the other as a background of the heading that always sits on top (top-left corner). By attaching the two images to these two elements, we can ensure that they'll remain in their correct positions, regardless of how the box is expanded or contracted by either window width or text size adjustment.

 /* sidebars */ .box {   margin: 0 0 20px 0;   padding: 0 0 12px 0;   font-size: 85%;   line-height: 1.5em;   color: #666;   background: #fff url(img/box-b.gif) no-repeat bottom right;   } .box h3 {   margin: 0;   padding: 12px;   font-family: Georgia, serif;   font-size: 140%;   font-weight: normal;   color: #693;   background: url(img/box-t.gif) no-repeat top left;   } 

Figure 9.28 shows the two rounded corners in place now, with just some minor spacing issues to resolve involving the contents of the boxes.

Figure 9.28. The two small corner graphics are now in place, anchored regardless of box size.


To finish the design of the boxes, I'll add a declaration that assigns even padding on both sides of any paragraph or list items contained within, as well as a custom bullet that I've createda mini bull's-eye:

 /* sidebars */ .box {   margin: 0 0 20px 0;   padding: 0 0 12px 0;   font-size: 85%;   line-height: 1.5em;   color: #666;   background: #fff url(img/box-b.gif) no-repeat bottom right;   } .box h3 {   margin: 0;   padding: 12px;   font-family: Georgia, serif;   font-size: 140%;   font-weight: normal;   color: #693;   background: url(img/box-t.gif) no-repeat top left;   } .box p, .box ul {   margin: 0;   padding: 0 12px;   } .box ul li {   margin: 0 0 0 12px;   padding: 0 0 0 18px;   list-style: none;   background: url(img/li-bullet.gif) no-repeat 0 3px;   } 

Figure 9.29 shows the completed sidebar with the left and right padding we've placed on paragraphs and lists in the sidebar, as well as the mini bull's-eye bullet that we've added as a background image to the left of each list item.

Figure 9.29. The completed sidebar has everything in place.


FOOTER

Finding ourselves now at the very bottom of the page, we just have a few simple adjustments to the footer to make. First, we'll add a tiling gradient fade that blends vertically into the solid background color. This is exactly what we've done in the header and message row areas as well. Second, we'll add padding and text styles to the paragraph that sits inside the footer to complete this portion of the page.

 #footer {   clear: both;   background: #828377 url(img/footer-bg.gif) repeat-x top left;   } #footer p {   margin: 0;   padding: 15px;   font-size: 85%;   color: #333;   } 

Figure 9.30 shows a close-up of the footer, with the text now styled with room to breathe, as well as the subtle gradient fade that tiles horizontally across the top.

Figure 9.30. The finished footer features padding and a shadow fade across the top tiling extends horizontally; gradient fade goes from top to bottom.


Just as with the header and message row, because that gradient fades into a solid color that we've specified in the CSS, the entire footer area's background will scale gracefully as the text grows larger or more content is added (Figure 9.31).

Figure 9.31. Both the increased text size and additional line of text do nothing to harm the footer's appearance.




Bulletproof Web Design(c) Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
Bulletproof Web Design(c) Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
ISBN: N/A
EAN: N/A
Year: 2006
Pages: 97

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net