WEB STANDARDS CREATIVITY

204
To get it looking like the proposed design, the CSS needs to push the whole lot over to the right, apply the necessary backgrounds,
and allow enough space to the left of the first link so the little printer icon is visible. Here’s the CSS that lets us do this:
p.printbutton
{
background-image:url(print-button-para-bg.gif);
background-repeat:no-repeat;
background-color:#576374;
float:right;
padding:6px 0 0 40px;
}
#sect1 p.printbutton a
{
background-image:url(print-button-bg.gif);
background-repeat:no-repeat;
padding:2px 0;
margin:0 10px 0 0;
color:white;
text-decoration:none;
width:110px;
height:19px;
font-weight:bold;
font-size:x-small;
display:block;
float:left;
text-align:center;
}
Pulling it all together
The scripts have been inserted in the document head, the
styles for the generated links have been defined, and the page
has had all the necessary ids applied that will make the technique
work. Figure 8-13 shows the finished result as seen on
screen (in the Windows version of Firefox).
Figure 8-13. The finished web page