Creating Common Page Elements - Pro CSS Techniques - page 170

Finally, the text needs a bit of padding to move it away from the edges:
#headerlinks {
float:right;
font-size:0.8em;
background: url(links-bg.gif) no-repeat left bottom;
padding:6px 6px 8px 10px;
}
You can see the final result in Figure 8-9.
Figure 8-9. Links are floated right with a background image.
Positioning the Search Box
It's a good idea to remove padding and margins from forms before trying to position or align
form elements, so that's the first thing we'll do. As with the headings inside the page header
area, we're suggesting using contextual selectors to ensure that this change on the form style
only affects the one in the header:
#headersearch form {
padding:0;
margin:0;
}
With that done, we can position the search area like so:
#headersearch {
position:absolute;
top:2em;
right:5px;
}
We've chosen to use ems for the top measurement. That way, if font sizes are scaled up
and the header links grow, the search box will move down as well.
The form consists of just two input elements. One is a text input, and the other is an
image, which is used as a submit button. We could have used a styled form button instead
(styling of form elements is covered in Chapter 11). We want these to align nicely, so we use
the vertical-align property in CSS (which is used to align inline elements horizontally to the
top, bottom, or center of the containing element), and once again, it's a good idea to reset any
margin or padding values that these elements might have by default:
#headersearch form input {
padding:0;
margin:0;
vertical-align:middle;
}