Ïðèãëàøàåì ïîñåòèòü
ßçûêîâ (yazykov.lit-info.ru)

Cleanup Time

Previous Page
Table of Contents
Next Page

Cleanup Time

With the main elements styled, it's time to provide the finishing touches. The header and the page color are too similar; as a result, it's a good idea to either insert a dividing line or change the background color of the page. The same could be said for the footer. There is too much space around the navigation on the left side; let's look at closing that up. The right column still has blue lines at the top and bottomyou need to either change or lose themand the news items are too close together. There are two minor markup changes we need to make: we need to place quotes around the book title in the block quote and add a period at the end of the picture caption.

You can imagine what the markup changes look like, but it's worth looking closer at the other issues. Let's start with the left column (Figure 8.23)


div#nav {position:absolute; left:0px; top:60px; width:150px;
padding:.5em 0 0 0; margin:22px 0 0 0;}
div#nav ul {border:0; margin:12px 1.25em 12px 1.25em; padding:0; list-style-type:none;
Cleanup Time font-weight:bold; font-size:.75em;}
div#content {margin:20px 156px 0 150px; padding: 0 1em;}

Figure 8.23. With the margins adjusted, the navigation element is centered in the left column and the center column's margin is closer to the left column.

Cleanup Time


Now we need to clean up on the right side by recoloring those top and bottom lines of the content


div#rightcolumn {position:absolute; width:156px; top:60px; right:0px;  
      margin:20px 0 0 0; padding:1em  0; border-top:2px solid #069; border-bottom:1px
Cleanup Time solid #069000;}

and by adding some lines to define the header and footer to give them a little more definition


div#header {height:60px; background-color:#FFC; text-align:center; border-bottom: 1px #960
Cleanup Time solid;}
div#footer {width:100%; padding:4px 0; font-size:.9em; text-align:center; background-color
Cleanup Time:#DEE7B6; border-top:1px solid #960; border-bottom:2px solid #960;}

When thinking about styling the headline, you might realize its text redundant; right now, the title of the book appears three times at the top of the page. Let's do something a little more creative with the headline, and as a tie-in, change the picture to represent the hero of the story. First, go over the markup


<div id="content">
  <h1>Before The Hobbit, there was Gorbo the Snerg.</h1>
  <div id="mainimage">
   <img alt="Gorbo the Snerg, from the book 'The Marvellous Land of Snergs'" src="/images/011/
gorbo_180w.jpg" width="180" height="248" />  <p class="caption">Gorbo returns from hunting
Cleanup Time in the forest.</p></div>
  <p>"The Marvellous Land of Snergs" was the last of eight books written by E.A.
    Wyke-Smith (1873-1935)...(etc.)

Next, style the headline


div#content h1{font-size:1.4em; font-variant:small-caps; margin-top:2em; font-family
Cleanup Time:'comic sans MS', verdana, sans-serif;}

Note the use of font-variant to style the type into large and small capital letters (remember Chapter 3?), but, of course, IDWIMIE; in this case, Internet Explorer just displays regular type. Let's also increase the image's right margin to move the text further away from the right edge of the picture

div#content div#mainimage {width:180px; float:left; margin:0 8px 4px 0;}

OK, now take a look at Figure8.24 to see what this looks like.

Figure 8.24. Here's the page after a quick round robin of the elements with an eye for detail and unifying the overall look. Compare this with the previous full-screen screenshot.

Cleanup Time


As you can see, a few things aren't very appealing. For instance, the caption under the photo is lost in all the surrounding type, and news items are all scrunched together (except in Internet Explorer for Windows). And that orange headline is . . . well, let's just say it's too strong. The orange headline is the visual entry point for reading, so you need it to attract, not jar. Also, there's a little too much space between the main paragraphs. Let's fix these things.

First, the picture caption could actually benefit from the "pop" of the headline's orange color because it's so small

div#content div#mainimage p {font-size:.65em; margin:0px 5px; color:#C60;}

The headline, currently in that same color, is too eye-catching, so switch to a darker option


div#content h1{font-size:1.4em; font-variant:small-caps; margin-top:2em; font-family
Cleanup Time:'comic sans MS', verdana, sans-serif; color: #960;}

Next, fix the spacing problem between the news headlines on the right. The solution is simple. Because that distance was never specified, there is no li selector. So al you need to do is write one and set the top margin to zero and the bottom one to half the line height. Remember, vertical margins collapse, so you only need to spec one of them in this kind of situation; you can kill the other so that you know which one is controlling the spacing.

div#rightcolumn div#newslinks li {margin-top:0; margin-bottom:.5em;}

Last but not least, tighten up the space between the paragraphs. This involves the same question you asked yourself in the previous example, is it the top margin or the bottom margin that dominates in the collapse? Who cares? Just set one to zero and spec the other

div#content p {font-size:.8em; margin-top:0; margin-bottom:.5em;

Try this technique when you have paragraphs that appear one after the other; it lets you take absolute control over the distance between them. These little touches add up and take your layout into a professional-looking world with minimal effort. For instance, I strive to create a "flirtation" between every character, word, paragraph, and element, and the sum of all these details yields in an overall harmony to even the simplest design.

Now you want to align the top of the right column with the left


div#nav {position:absolute; left:0px; top:60px; width:150px;
padding:0; margin:22px 0 15px 0;}div#rightcolumn {position:absolute; width:156px; top:60px; 
right:0px; margin:32px  0 0 0; padding:1em  0; border-top:2px solid #960; border-bottom
Cleanup Time:1px solid #960;}

Now, as you can see in Figure 8.25, the appearance is quite consistent between Internet Explorer and other more compliant browsers.

Figure 8.25. Here's the improved styling as displayed in Firefox.

Cleanup Time


Figure 8 26. Here's the improved styling as displayed in Internet Explorer.

Cleanup Time


You still have one final step to take, a technical one. The problem with fluid layouts is that the user can crush them down to nothing or stretch them out so wide that its impossible for the reader's eye to scan accurately from the end of one line to the start of the next (Figure 8.27).

Figure 8.27. When the user makes the browser very narrow, the center content becomes crushed and the right column overlays it. Not pretty, but fixable.

Cleanup Time


Constraining Min and Max Widths

To prevent these problems, you need to constrain the maximum and minimum widths of the layout. There, CSS had two propertiesmin-width and max-widthboth specifically for this kind of use, but IDWIMIE. Internet Explorer does implement these properties, so you need to use the minmax.js JavaScript function so Internet Explorer can respond to them.

Cleanup Time

I've seen data that shows that up to 10 percent of users have JavaScript turned off in their browsers, so keep this in mind when the quality of your user's experience depends on whether he or she can use JavaScript. In this case, the user is still be able to use the site successfully if the JavaScript doesn't load; but the experience is simply better if it does.


Add a JavaScript folder in your local folder and put the minmax.js script into it. Then link the script to the document by adding a script tag in the head of the document.

<script type="text/javascript" src="javascript/minmax.js"></script>

Put a div that acts as a wrapper around all of the markup; this element will have the max and min widths applied to it. This div functions as a box around your layout that can only get so wide or so narrow, and everything else is inside it. Modify the markup like this

<body>
  <div id="container">
    ...all other the markup in here...
  </div> 
</body>

Now style the container div like this:


div#container {position:relative; min-width:800px; max-width:1000px; margin-left:auto;
Cleanup Time margin-right:auto; background-color:#ECf2C9}

Most importantly, you have to set its positioning to relative. Now this wrapper div is the closest relatively positioned parent, making it function as the positioning context for the sidebars instead of the body. Without this declaration, the side columns continue to align with the edges of the body tag (for example, the edge of the browser window) instead of aligning with the edges of the container div. (Try temporarily removing this declaration to see the result for yourself.)

Once I had this container in place, I couldn't resist coloring its background. As you see in Figure 8.28, this is one of those last-minute touches that really unifies the entire layout.

Figure 8.28. Now after the layout reaches its maximum width, it centers itself in the browser window.

Cleanup Time


The max-width and min-width declarations set the limits of width for the layout. The auto margins make the mazimized layout center in the browser window when the window reaches the defined max-width. As an added bonus, you now have a div whose area exactly matches the overall dimensions of the layout, so you can color it to provide the design with a background color.

Also, you can't resist, at this late stage, adding a little space above the footer to separate it from the body copy

div#footer {width:100% (etc...) margin-top:1.5em;} 

which balances the space at the top.

Now you have a layout that's ready for primetime (Figure 8.28).

That's it. Your page is finished.

    Previous Page
    Table of Contents
    Next Page