Rebuilding the Design


Because our goal is to re-create the original design using CSS for both content styling and layout, we'll want to refer to the table-driven design throughout the rest of the project. Although we won't worry about exact to-the-pixel reproduction, we'll do our best to get as close as possible to the original, starting with some basic styles and working our way through the document, styling each piece as we come to it.

Basic Styles

Before we start reconstructing the overall layout, let's set some "global" styles (that is, styles that apply to the document as a whole). The first thing to do is bring the font size back in line with how it looked in the original HTML-driven design. The HTML approach used <font size="-2"> to set most of the font sizes, and the closet CSS equivalent is the keyword x-small. Thus, we'll change the property font-family to font and drop in the size value.

 <style type="text/css"> body {font: x-small Verdana, Arial, Helvetica, sans-serif;} a.navlink {text-decoration: none;} </style> 

Extra Small

graphics/warning_icon.jpg

Because the original HTML presentation called for the body text to be a font size of -2, we're using x-small, which is two steps below medium on the list of absolute keywords. Note that IE5 got this wrong and treated x-small the same as it would a font size of -1. IE6 fixed this bug.


As part of our conversion process, we got rid of body element attributes like marginheight and topmargin. These were used to remove the "gutter" around the document content. To get the same effect in CSS, we'll need to zero out both the margin and padding of the body.

 <style type="text/css"> body {font: x-small Verdana, Arial, Helvetica, sans-serif;   margin: 0; padding: 0;} a.navlink {text-decoration: none;} </style> 

We styled both margin and padding because some browsers enforce the gutter with one and some with the other. Setting both covers our bases, with the result shown in Figure 1.4.

Figure 1.4. Starting out with a few global styles.

graphics/01fig04.jpg

Tightening Up the Top

We are still using a table for the masthead, and since we took out the cellpadding and width attributes, we'll need to re-create them in the CSS. We'll just assume that all table cells should have no padding and that all tables should have a width of 100%. If we need to override either of those later, we'll do so.

 body {font: x-small Verdana, Arial, Helvetica, sans-serif;   margin: 0; padding: 0;} table {width: 100%;} th, td {padding: 0;} a.navlink {text-decoration: none;} 

Now we'll start on the navbar. It used to be that the links in the navbar were marked up like this:

 <td nowrap><font size="-2">&nbsp;<a href="/myprofile"   ><font color="#000000">my   profile</font></a>&nbsp;</font></td> 

This prevented line wrapping within the cell, reduced the font size for both the link and the whitespace around it, and set the text color of the link to black. In addition, each link had a class of navlink, which made it possible to remove the underlines with the rule a.navlink {text-decoration: none;}.

We stripped out those classes during the markup conversion because they aren't necessary. Now that the links are enclosed in a div with an id of navbar, we can just alter the rule's selector to target the links in their new location.

 th, td {padding: 0;} #navbar a {text-decoration: none;} </style> 

Now all we need is to set the color of the links and to prevent wrapping within the navbar. See Figure 1.5 for a summary of our progress to date.

 th, td {padding: 0;} #navbar {white-space: nowrap; background: #F0DFB4;} #navbar a {text-decoration: none; color: #000;} 
Figure 1.5. Fixing up the masthead and starting to style the navbar.

graphics/01fig05.jpg

Filling Out the Navbar

Now it's time to actually place the navbar where it needs to go. To accomplish this particular task, we'll be positioning the div. Since none of the navbar's ancestor elements are positioned, the navbar will be positioned with respect to the initial containing block, which is generally regarded in HTML to be defined by the html element.

We know that the navbar will be up against the right edge of the document, so all we have to do is figure out how far down to place it. By counting pixels, we discover that the first pixel below the separator line is 44 down from the top of the document. So:

 #navbar {position: absolute; top: 44px; right: 0;   white-space: nowrap; background: #F0DFB4;} 

Now we need to get the curve image back into place. In the original design, it was slotted into a table cell using an img element, but we stripped that out when converting the markup. We can reproduce the visual effect by placing the same image into the background of the navbar.

 #navbar {position: absolute; top: 44px; right: 0;   white-space: nowrap;   background: #F0DFB4 url(tab-curve.gif) bottom left no-repeat;} 

This sounds like a great idea until you realize that the image will be placed underneath the links, not to their left. To prevent that kind of overlap, we'll need some padding. The image is 32 pixels wide, so we'll set just that amount of padding for the moment (see Figure 1.6).

 #navbar {position: absolute; top: 44px; right: 0;   padding: 0 0 0 32px; white-space: nowrap;   background: #F0DFB4 url(tab-curve.gif) bottom left no-repeat;} 
Figure 1.6. Positioning the navbar and adding an image to the background.

graphics/01fig06.jpg

That's starting to look pretty darned good, although the text is still quite cramped. We'll add some extra top and bottom padding to spread things out vertically.

 #navbar {position: absolute; top: 44px; right: 0;   padding: 2px 0 2px 32px; white-space: nowrap;   background: #F0DFB4 url(tab-curve.gif) bottom left no-repeat;} 

Now we need to do something about the vertical-bar characters. Since we don't actually want them to appear, we can use the boldface elements to make them go away completely.

 #navbar {position: absolute; top: 44px; right: 0;   padding: 2px 0 2px 32px; white-space: nowrap;   background: #F0DFB4 url(tab-curve.gif) bottom left no-repeat;} #navbar b {display: none;} #navbar a {text-decoration: none; color: #000;} 

With this, the elements never appear in a styled document. If a browser doesn't get the CSS or the page is viewed using a CSS-incapable browser, the characters will be there to keep the links separated.

This means, of course, that in a CSS-aware browser, the links will be right up against each other. We can push them apart using margins or padding, so let's use padding. (We'll see why in a moment.)

 #navbar a {text-decoration: none; color: #000;   padding: 0 1em 0 0;} 

Now all we really need to do is add in the border along the bottom of the navbar. Here's where things get a little tricky because we can't just add a bottom border to the div. If we did that, the border would stick out below the background image, and there's no way to make a background image overlap a border on the same element. So instead we'll add bottom borders to the links themselves.

 #navbar a {text-decoration: none; color: #000;   border-bottom: 1px solid gray;   padding: 0 1em 0 0;} 

That's why we used padding to push the links apart. If we'd used margins, the borders wouldn't have touched each other, destroying the illusion of a single border.

Inline Padding

graphics/note_icon.jpg

Adding bottom padding to the links doesn't actually change the height of the div in CSS-conformant browsers. That's because padding on non-replaced inline elements (which the links are) doesn't alter height calculations. With enough padding, we could actually push the link borders outside the div at least in browsers other than Explorer.


Now, because the div has two pixels of bottom padding, the borders we just added to the links will sit a pixel above the bottom of the tan background area. We'll need to push them down with some padding.

 #navbar a {text-decoration: none; color: #000;   border-bottom: 1px solid gray;   padding: 0 1em 1px 0;} 

This will actually bring the borders in line with the bottom of the background image, which is something the table layout didn't quite manage. If we wanted to push the borders down so that they precisely matched the effect seen in the original design, we would only have to increase that 1px to 2px, but we'll leave things as shown in Figure 1.7.

Figure 1.7. Making the navbar complete.

graphics/01fig07.jpg

The big advantage in positioning the navbar is that it's easy to move around. Suppose we wanted to put it above that separator line instead of below it. Basically, we'd just have to adjust the value of top as needed and change the background image. For that matter, making the navbar straddle the separator line is a breeze with positioning. That kind of flexibility is what makes positioning so compelling as a layout tool.

Padding and Inline Elements

It might not be immediately obvious that increasing the padding of the links would cause them to "stick out" of the div that encloses them. Because of the way line layout is handled in CSS, that's exactly what should happen. As CSS says, top and bottom padding on inline non-replaced elements (like hyperlinks) has no affect on line height. Therefore, although the padding might be visible, it won't make a line of text taller, and thus won't affect the height of any containing elements, like a div.

On the other hand, CSS also says that browsers don't have to render top and bottom padding on inline elements, and that's sort of what happens in IE/Win. In that browser, the borders and background get clipped by the edge of the div. Thus, in order to get the same effect, you'd probably want to increase the padding on the div. The rest of the project will be written assuming that this isn't necessary, but it's something to keep in mind if you're having trouble.

For those of you using IE/Win to work through the project, try adding a pixel or two of top and bottom padding to the navbar div and see if that looks any better.


Title and Summary Styles

With our masthead complete (at least until we go back and remove the table), let's take a look at the top of the review itself. Here we find some pretty simple markup.

 <h2>Matsu</h2> <p ><strong>Bottom Line:</strong>  Friendly, cozy, and oh so tasty</p> 

Re-creating the look of the review title is simple enough; we just need to get the size and color to mimic the original design.

Extra Large

graphics/note_icon.jpg

Because the original HTML presentation called for the title to be a font size of +2, we're using x-large, which is two steps above medium on the list of absolute keywords.


 #navbar a {text-decoration: none; color: #000;   border-bottom: 1px solid gray;   padding: 0 1em 1px 0;} #review h2 {color: #600; font-size: x-large;} </style> 

We'll also need to re-create the blank spaces, or lack thereof, above and below the title. In the original design, there were some spacer GIFs above the title, but below there was just a cell containing a dotted-line background. Rather than go with pixels, we'll take an initial stab at some em-based values and come back later to make any necessary adjustments.

 #review h2 {color: #600; font-size: x-large;   margin: 1em 0 0;} 

And now for the summary line. This short line of text was a little bit larger than the main review text, so we'll need to change its font size. There was also a dotted line separating the summary from the title, so let's put that in as well. We can see the progress so far in Figure 1.8.

 #review h2 {color: #600; font-size: x-large;   margin: 1em 0 0;} #review #summary {font-size: small; border-top: 1px dotted #600;} </style> 
Figure 1.8. The title and summary begin to come into focus.

graphics/01fig08.jpg

There are two problems here. The first is that there's space between the dotted line and the title; that's the top margin on the summary paragraph. The other problem is not necessarily a bad thing: The top border goes all the way across the page. In the original design, it was limited to the extent of the summary.

Now, we might decide, once the layout is completely done, that having a border that runs from one side of the main column to the other is not such a bad thing. To get as close to the original as possible, though, let's try an approach that will get rid of that top margin and limit the border to the summary text's width.

 #review #summary {font-size: small; border-top: 1px dotted #600;   display: inline;} 

With this, we've changed the way the paragraph is laid out. Now it generates an inline box, the same as a hyperlink or a span element would. The paragraph itself is still a block-level element, but on the screen it generates an inline box. So the border will run along the top of the text, however long or short that might be.

There are potential drawbacks to having done this. If the summary text wraps to a second line, that second line will also have a top dotted border. There isn't a way to only apply a border to the first line of an inline element. Thus, if there's a chance that the summary could wrap to two lines, this is probably not a good approach.

The other possible drawback is a case in which the title is actually longer than the summary. In that case, the border will stop before the end of the title. A long restaurant name with a bottom line of "Yum!" would be an example. There isn't an easy way around this without using a table, which is unique in the HTML world in that it permits the width of one element to affect the width of several others.

Line Expansion

graphics/note_icon.jpg

It actually is possible to fake the effect of having a dividing border be as long as the length of two elements using negative margins, although it can get tricky. This technique is discussed in Project 8.


With those caveats in mind, take a look at Figure 1.9, which shows that, in this particular case, the use of inline works out quite nicely. The separation between the title and summary has disappeared because top and bottom margins on inline elements have no effect on layout.

Figure 1.9. Making the summary generate an inline box.

graphics/01fig09.jpg

Information on the Side

As we work our way through the document, we come to the "info" div. This was laid out in the original design as a box over to the left, and we're going to do exactly the same thing here. The advantage is that, before, the sidebar was split across two rows and constructed out of a complex series of cells, whereas now we only have to style a single div.

To get the sidebar into place, we'll position it. Because none of the sidebar's ancestor elements is positioned, it will (like the navbar) be positioned with respect to the initial containing block. So we're working from the upper-left corner of the document this time. The masthead images total 72 pixels tall, so all we need to do is place the sidebar just below that point.

 #navbar a {text-decoration: none; color: #000;   border-bottom: 1px solid gray;   padding: 0 1em 1px 0;} #info {position: absolute; top: 73px; left: 0;} #review h2 {color: #600; font-size: x-large;   margin: 1em 0 0;} 

Now, just that change means that the "info" div will be taken completely out of the document flow and placed as requested, 73 pixels from the top of the initial containing block and up against its left edge. That means the sidebar will now be completely overlapping the main text of the review. In fact, the sidebar is defaulting to a width of 100%, which means that if we gave it a background, it would stretch from one side of the document to the other.

Measuring Width

graphics/note_icon.jpg

We've used a pixel width because the original design used pixel widths for the sidebar, but of course any measure could be employed instead. Percentages and ems are both popular choices in positioning-based layout.


This is, of course, not a permanent state of affairs, but it's what you'll discover if you preview the page right now. Let's add in a background for the sidebar and also set an explicit width, as shown in Figure 1.10.

 #info {position: absolute; top: 73px; left: 0; width: 140px;   background: #F0DFB4;} 
Figure 1.10. We've placed and sized the sidebar, but there is still work to be done.

graphics/01fig10.jpg

Yes, the content is overlapping! We'll fix that after a bit, but first let's fill out the sidebar a bit more. We need to add in a border and also re-create the separation between the edge of the box and the content within.

 #info {position: absolute; top: 73px; left: 0; width: 140px;   background: #F0DFB4; padding: 0.75em 0;   border: 1px solid #600; border-width: 2px 1px 2px 0;} 

Just like that, we re-create the border effect that took so many cells to set up using the table layout. As for the padding, we're using ems to let the padding scale with any changes in text size and also to help ensure that we can get the same kind of vertical alignment seen in the original design.

Side Padding Issues

graphics/note_icon.jpg

We zeroed out the side padding because it would be added to the width value, as CSS requires. It's easier to set margins or padding on elements inside the sidebar than it is to try to set it for the div itself.


The lists definitely need to be made more like the original design, which had no bullets in it. We can strip off the bullets and balance the indentation in one quick rule.

 #info {position: absolute; top: 73px; left: 0; width: 140px;   background: #F0DFB4; padding: 0.75em 0;   border: 1px solid #600; border-width: 2px 1px 2px 0;} #info ul {list-style: none; margin: 1em; padding: 0;} #review h2 {color: #600; font-size: x-large;   margin: 1em 0 0;} 

By giving the lists an em of margin all the way around, they separate from each other and push inward from the edges of the sidebar, which is exactly what we want. Now all we really have left to do is make sure the table at the top of the sidebar is laid out properly. We need to right-align the labels, which are now th elements, so that's easy.

 #info {position: absolute; top: 73px; left: 0; width: 140px;   background: #F0DFB4; padding: 0.75em 0;   border: 1px solid #600; border-width: 2px 1px 2px 0;} #info th {text-align: right;} #info ul {list-style: none; margin: 1em; padding: 0;} 

A Table!

graphics/note_icon.jpg

The information contained in the table is well-suited to such a structure, so we're going to leave it as is. We could convert it to a nontable structure that makes heavy use of floats, but there would be little point.


A little padding on the table cells would also help keep the contents from crowding together too closely, so we'll add that in.

 #info th {text-align: right;} #info td {padding: 0.125em;} #info ul {list-style: none; margin: 1em; padding: 0;} 

There's just one more thing to do: adjust the font for the table. The original design had it a bit larger than everything else but also in a different font face. We'll just style the table directly, as illustrated in Figure 1.11.

 #info {position: absolute; top: 73px; left: 0; width: 140px;   background: #F0DFB4; padding: 0.75em 0;   border: 1px solid #600; border-width: 2px 1px 2px 0;} #info table {font: small Arial, Verdana, Helvetica, sans-serif;} #info th {text-align: right;} 
Figure 1.11. Now the sidebar looks as good as ever, even if it is overlapping the review.

graphics/01fig11.jpg

As with the navbar, the positioning of the sidebar gives us a great deal of flexibility. We could move it up or down a bit just by altering the top value, expand or contract its width, or even flip it to the other side of the page simply by changing the property left to right. In the same manner, changing the thickness and styles of the borders around the sidebar is a snap.

A Review with Style

The sidebar may be done with its style, but it's still sitting on top of the review itself, which is clearly not a good design choice for this project. We need to push the review text over a bit, but before we do that, let's take a look back at our original design. There we had a 40-pixel spacer GIF between the sidebar and the main content, and an 80-pixel spacer on the right side. We can roll both effects up into a single rule by styling the "review" div.

 #info ul {list-style: none; margin: 1em; padding: 0;} #review {margin: 0 80px 2em 180px;} #review h2 {color: #600; font-size: x-large;   margin: 1em 0 0;} 

By adding 40 pixels to the sidebar's 140px width, we got 180px for the left margin, and of course the right margin was a straightforward 80px. The 2em bottom margin was thrown in to create a little extra space underneath the end of the review.

With the overlap problems solved, we can concentrate on the text itself. If you look closely at Figure 1.12, you can see that the summary line doesn't quite line up with the "Region" line in the sidebar. This alignment is why the original design used such a complicated cell arrangement. Here, all that's required is an adjustment to the top margin of the title. Some experimentation reveals the following values make for a decent effect.

 #review h2 {color: #600; font-size: x-large;   margin: 1em 0 0; padding: 0 0 0.2em; line-height: 1em;} 
Figure 1.12. The columns emerge, and the review can be read.

graphics/01fig12.jpg

Why the line-height value? Because although that's close to the default for all browsers, there's no guarantee that it will actually be the default: One browser might use 1.2, another 1.25, and yet another 1.175. CSS doesn't require one specific value as the default, so browsers are allowed to do whatever they think is best. By explicitly declaring a line-height value, we overcome any potential problems from differing defaults.

Platform Jumps

graphics/warning_icon.jpg

Actually, the text is not fully accurate. The values used give the desired result in Windows browsers, but on Macintosh browsers, the alignment is off a bit. This seems to be due to differences in font handling in the two operating systems, and it's likely that other systems will have similar variances. This illustrates an excellent point about CSS-driven design: Alignments of this kind shouldn't be relied upon, if at all possible.


Now it's time to look at the actual paragraphs in the review. The original design used a series of nonbreaking space entities to indent all paragraphs but the first one. We removed those entities, but they aren't needed; text-indent will do the job for us.

 #review #summary {font-size: small; border-top: 1px dotted #600;   display: inline;} #review p {text-indent: 2em;} </style> 

This will indent the first line of all p elements in the review, including the first one and the summary. (Remember, it's contained in a p element.) Fortunately, we added a class to the first paragraph of the review:

 <p > If there's one Asian food we truly love, it's sushi (although dim sum comes a close second). 

We can use that and the rule we wrote earlier for the summary to turn off first-line indenting in those two elements, as can be seen in Figure 1.13.

 #review #summary {font-size: small; border-top: 1px dotted #600;   display: inline; text-indent: 0;} #review p {text-indent: 2em;} #review .lead {text-indent: 0;} </style> 
Figure 1.13. Indenting the first line of most, but not all, of the paragraphs in the review.

graphics/01fig13.jpg

Pulling the Quote and Enhancing the Design

At this point, we're almost done. The only thing we really have to do is get the pullquote to actually look like a pullquote. Right now, it's just a blockquote sitting between a couple of paragraphs. Fortunately, it's easy to do. All we need is to float it to the right, bump up the font size and weight, and throw in some padding to make sure text doesn't get too close.

 #review .lead {text-indent: 0;} blockquote.pull {float: right; width: 40%;   padding: 1em 0 1em 5%; margin: 0;   font-size: medium; font-weight: bold;} </style> 

If you compare these styles to the original HTML design, you'll notice some differences. One is that we've converted the pixel-size spacer GIFs into 1em padding. We could have used 10px instead, but since we don't have to use pixels, why not try something more flexible?

As for the left padding of 5%, this would seem to have almost nothing to do with the original spacer-cell width of 15%. For that matter, the original table was 45% wide, whereas the styles we just wrote call for a 40% width.

The difference is the nature of tables versus CSS-styled elements. When we set up that 15%-wide cell, it was 15% of the width of the table, which was itself 45% of the width of the cell in which it sat. Percentages in padding (as well as margins and width itself) refer to the width of the containing element in this case, the "review" div. Furthermore, padding is added to width, so if we want the pull quote to add up to 45% of the width of the containing element, we have to take into account the addition. So 40% width plus 5% left padding equals 45% overall width. The result is shown in Figure 1.14.

Figure 1.14. Floating and styling the pull quote to mimic the original design.

graphics/01fig14.jpg

Having arrived back where we started, let's try enhancing the original design just a bit. The small text may pack a lot of information onto the screen, but it also makes the text a bit harder to read. In HTML design, there's not much you can do about that, but with CSS, spreading the lines apart is simple. All we have to do is alter the line-height of the paragraphs.

 #review p {text-indent: 2em; line-height: 1.3;} 

However, this has the potential to throw off the summary paragraph's layout a bit, so we'll reset it to the default.

 #review #summary {font-size: small; border-top: 1px dotted #600;   display: inline; text-indent: 0; line-height: normal;} 

For an extra touch of interactivity, let's define a hover style for the navbar links. We'll generate a starting point for this effort by making any hovered navbar link appear as white text on a dark blue background (to match the text color in the masthead) and widen the bottom border.

 #navbar a {text-decoration: none; color: #000;   border-bottom: 1px solid gray;   padding: 2px 1em 1px 0;} #navbar a:hover {color: white; background: #336;   border-bottom-width: 3px;} #info {position: absolute; top: 73px; left: 0; width: 140px;   background: #F0DFB4; padding: 0.75em 0;   border: 1px solid #600; border-width: 2px 1px 2px 0;} 

Missing Effects

graphics/warning_icon.jpg

Bugs in IE/Win often prevent elements from exceeding the boundaries of their parents, so the three-pixel border effect probably won't show up. The technique was shown anyway because it's a good example of design that still works in less-capable browsers, but looks better in more advanced browsers.


Doing this reveals a slight imbalance in our basic navlink styles. Notice in the preceding code that the padding on the links is 1em on the right and 0 on the left. This means that the hover effect will be offset with regard to the text. We need to balance those out so that the text will be centered within each link, as shown in Figure 1.15.

 #navbar a {text-decoration: none; color: #000;   border-bottom: 1px solid gray;   padding: 2px 0.5em 1px;} 
Figure 1.15. Spreading out the text and punching up the navigation links.

graphics/01fig15.jpg

The Masthead Revisited

Okay, so we've re-created the layout and even improved a bit on the original, but what about that masthead? It's still sitting in a three-cell table, and the graphics are all sliced up. Let's see if we can improve on that.

We could bring all three slices back together into a single image, but it would be a lot more useful to merge the chef and page title into one image and put the subtitle ("A Guide to Fine Northeast Ohio Dining") in another. By having the subtitle separate, we can place it wherever we want through positioning. So we end up with the images shown in Figure 1.16.

Figure 1.16. By combining the image and splitting out the subhead, we give ourselves a lot of layout options.

graphics/01fig16.jpg

Now we just need to rework the HTML so that the images are still present but with much less markup. Just wrapping both in a div with some appropriate id attributes should suffice for the moment.

 <body> <div > <img src="/books/2/884/1/html/2/masthead.gif" alt="Cleveland Eats"> <img src="/books/2/884/1/html/2/subhead.gif" alt="A Guide to Fine Northeast Ohio  Dining" > </div> <div > 

The first order of business is to place the subtitle where it needs to be. Counting pixels in the original design works pretty well to determine the proper placement.

 th, td {padding: 0;} #subhead {position: absolute; top: 46px; left: 151px;} #navbar {position: absolute; top: 44px; right: 0;   padding: 2px 0 2px 32px; white-space: nowrap;   background: #F0DFB4 url(tab-curve.gif) bottom left no-repeat;} 

This places the top-left corner of the subhead graphic right where we want it. Of course, if we decide that it should be shifted around a bit say, up a pixel or two to the left we can move it just by fiddling with the values of top and left. For that matter, we could really move it, perhaps to the top-right corner of the page or right over the navbar. We won't do that here, although you can certainly experiment later on.

While we're here, we'll also set the images in the masthead to generate block-level boxes. Doing so eliminates the chance of some minor layout changes happening in Gecko-based browsers (like Mozilla), which treat image layout a little more strictly than most other browsers. Making their layout boxes block-level will eliminate the differences and give us the layout shown in Figure 1.17.

Figure 1.17. The subhead has been placed as before, although we could move it in a jiffy.

graphics/01fig17.jpg

Absolutely Blocked

graphics/note_icon.jpg

The absolutely positioned subhead image actually already generates a block-level box. All absolutely positioned elements do so, no matter what kind of box they would have generated if they weren't positioned.


 th, td {padding: 0;} #masthead img {display: block;} #subhead {position: absolute; top: 46px; left: 151px;} 

There's one thing missing: that dratted separator line. We know it should be 43 pixels from the top of the masthead, and that leads to a certain temptation. We could theoretically define an explicit height for the masthead of 43px, give it a bottom border, and let the image masthead.gif overflow the div. The CSS to accomplish this would be:

 #masthead {height: 42px; border-bottom: 1px solid #666;} 

If we did that, though, we'd have to adjust the "review" div's styles. Why? Because the masthead would now be 44 pixels tall (the height plus the bottom border) instead of the 73 pixels tall it is now. Thus, the review div would move upward by 29 pixels. Fixing it would be simple enough: A top padding of 29 pixels would counteract the effect.

Unfortunately, the obstacle to using that exact technique is Internet Explorer for Windows, which would ignore the 43px height and expand the masthead div to enclose the image. In effect, Explorer treats height as though it were min-height. So we have two options. One is to position masthead.gif, which would take it out of the normal flow and let Explorer do the right thing with regard to the height of the masthead div. The CSS to accomplish that would be:

 #masthead {height: 43px; border-bottom: 1px solid #666;} #masthead img {position: absolute; top: 0; left: 0;} #masthead #subhead {top: 46px; left: 151px;} #review {margin: 0 80px 2em 180px; padding-top: 30px;} 

The other possibility is to leave things as they were in Figure 1.17 and just put a one-pixel image into the masthead's background, repeated horizontally, like this:

 #masthead {background: white url(stripe.gif) 0 43px repeat-x;} 

The benefit here is that it only requires one new rule to get the separator line to appear and any horizontally repeating pattern could be used, but the drawback is that it requires loading an extra image to make the effect work. Which you prefer is up to you; either way, you should get the result shown in Figure 1.18.

Figure 1.18. Fully re-creating the masthead without tables.

graphics/01fig18.jpg

Since New Riders is already springing for a lot of money in nice heavy paper and color inks, we'll list the background-image version of the final style sheet it's shorter than the other one.

Telling the Difference

graphics/note_icon.jpg

So which technique was used to create Figure 1.18? It shouldn't actually matter, but if you must know, check the file ch0118.html.


Listing 1.2. The Background-Image Approach
 body {font: x-small Verdana, Arial, Helvetica, sans-serif;   margin: 0; padding: 0;} table {width: 100%;} th, td {padding: 0;} #masthead {background: white url(stripe.gif) 0 43px repeat-x;} #masthead img {display: block;} #subhead {position: absolute; top: 46px; left: 151px;} #navbar {position: absolute; top: 44px; right: 0;   padding: 2px 0 2px 32px; white-space: nowrap;   background: #F0DFB4 url(tab-curve.gif) bottom left no-repeat;} #navbar b {display: none;} #navbar a {text-decoration: none; color: #000;   border-bottom: 1px solid gray;   padding: 2px 0.5em 1px;} #navbar a:hover {color: white; background: #336;   border-bottom-width: 3px;} #info {position: absolute; top: 73px; left: 0; width: 140px;   background: #F0DFB4; padding: 0.75em 0;   border: 1px solid #600; border-width: 2px 1px 2px 0;} #info table {font: small Arial, Verdana, Helvetica, sans-serif;} #info th {text-align: right;} #info td {padding: 0.125em;} #info ul {list-style: none; margin: 1em; padding: 0;} #review {margin: 0 80px 2em 180px;} #review h2 {color: #600; font-size: x-large; margin: 1em 0 0; padding: 0 0 0.2em; line-height: 1em;} #review #summary {font-size: small; border-top: 1px dotted #600;   display: inline; text-indent: 0; line-height: normal;} #review p {text-indent: 2em; line-height: 1.3;} #review .lead {text-indent: 0;} blockquote.pull {float: right; width: 40%;   padding: 1em 0 1em 5%; margin: 0;   font-size: medium; font-weight: bold;}  


More Eric Meyer on CSS
More Eric Meyer on CSS (Voices That Matter)
ISBN: 0735714258
EAN: 2147483647
Year: 2006
Pages: 109
Authors: Eric Meyer

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