A Touch of Cleanup - Page 6

If you look closely at the text above and below the jazzed-up links, you can see that it comes very close to the borders of the links. This is because when you set a border on an inline element (such as a hyperlink) and then give it some top and bottom padding, the border will get pushed into other lines of text. The lines won't get pushed apart. If you set the padding large enough, the box will start overlapping other lines or being overlapped by them.

Given this fact, and also seeing that the paragraphs are snuggling up to the edges of the table cell, let's give it some margins and increase the height of the text lines:

td#main {background: #FFD; color: black;
  border: 2px solid #797; border-width: 2px 2px 2px 1px;}
td#main p {margin: 0.75em 1.5em; line-height: 1.33em;}
td#navbuttons a {display: block; margin: 0;}
td#navbuttons img {display: block; height: 50px; width: 50px;
  border: 1px solid #ACA; border-width: 5px 10px;
  background: transparent;}

With this last change, we're ready to dazzle the client with our new design! The complete style sheet is shown in Listing 4.1, and the result is shown in Figure 4.13.

Figure 4.13
Making the text a little easier on the eyes.

Listing 4.1 The Complete Style Sheet

<style type="text/css">
body {background: #CEC; color: black;}
h1 {margin-bottom: -0.25em;
  font: bold 200% Arial, sans-serif; color: #797;}
table#inform td {vertical-align: top; border-top: 3px solid #797;}
td#navbuttons {background: #ACA; padding: 0;
  border: 2px solid #797; border-width: 2px 1px 2px 2px;
  text-align: center;}
td#main {background: #FFD; color: black;
  border: 2px solid #797; border-width: 2px 2px 2px 1px;}
td#main p {margin: 0.75em 1.5em; line-height: 1.33em;}
td#navbuttons a {display: block; margin: 0;}
td#navbuttons img {display: block; height: 50px; width: 50px;
  border: 1px solid #ACA; border-width: 5px 10px;
  background: transparent;}
td#navbuttons img#gas {border-color: #797; background: #797;}
td#navbuttons a:hover {background-color: yellow;}
td#navbuttons a:hover img {border-color: yellow;}
td#navbuttons a:active img {border-color: #FC3;
  border-style: inset;}
a:link, a:visited {background-color: transparent; font-weight: bold;}
a:link {color: #171;}
a:visited {color: #747;}
a:visited:hover {color: #FFD; background-color: #747;}
a:link:hover {color: #FFD; background-color: #797;}
a.help:link, a.help:visited {padding: 0 2px 1px 16px;
  background: #FDD url(help-icon.gif) left center no-repeat;
  color: #733; border: 1px solid #C66;
  text-decoration: none;}
a.pr:link, a.pr:visited {padding: 0 2px 1px 16px;
  background: #EEC url(pr-icon.gif) left center no-repeat; 
  color: #171; border: 1px solid #797;
  text-decoration: none;}
a.help:visited {color: #A88; background-color: #EDD; 
  background-image: url(help-vicon.gif);}
a.pr:visited {color: #797; background-color: #DDC; 
  background-image: url(pr-vicon.gif);}
a.help:hover {color: #FFD; background-color: #C66;}
a.pr:hover {color: #FFD; background-color: #797;}
</style>

Branching Out

There are a ton of things you can do differently with this design, from the color choices down to the way the links are set up. Here are just a few to try out:

1. Try making the icons look and act like physical buttons by using the border styles outset and inset.

Figure 4.14

2. Switch the icons from the left side of the help and press-release links to the right. Then write styles to change the side on which the icon appears based on whether or not the link has been visited.

Figure 4.15

3. Completely remove the background image from any help or pr link that has been visited and adjust the padding to close up the icon's space. Remember that this might lead to a reflow of the document because the link won't consume as much space without the icon as it did with it.

Figure 4.16

© Copyright Pearson Education. All rights reserved.

Read the review

Help! A Press Release! - Page 5
Eric Meyer on CSS: Mastering the Language of Web Design