HTML and CSS Reference
In-Depth Information
background: rgba(6,37,127,.75);
font-size: .75em;
color: #bec4d2;
}
#store-info p {
margin: 0 20px;
}
The utilities block comprises a simple search form and a link to the visitor's shopping cart, grouped
together in another
div
element. To get the search form and the cart button to line up horizontally, we can
float each one within their container. We don't even need to clear these floats because the utilities box is
already floating; floating elements automatically clear their floating descendants:
#site-search {
width: 65%;
float: left;
}
#utilities .cart {
width: 30%;
float: right;
}
Diving another level deeper, both the search field and search button will also float so they'll line up
adjacent to each other on the same baseline. We'll float them both to the left with a small margin in
between:
#search {
width: 70%;
float: left;
margin-right: 8px;
}
#site-search button {
width: 15%;
float: left;
}
Image Replacement
Our search form includes a submit button with the text label “Search.” It's a fine button, very simple,
straightforward, with no frills. It gets the job done, but it's a little boring and a few tasteful frills could do it
some good. We'd like to display a small magnifying glass icon—which has become well recognized as a
symbol meaning “search”—instead of the plain text label. We could accomplish this with an
input
type="image"
, of course, but it's also possible to replace an element's text contents with an image while
still preserving the original text in the markup.
Image replacement
is a CSS technique (many different techniques, actually) whereby an element's
contents are hidden and a background image appears in its place. It's a way to achieve visual effects only
possible with images, but without sacrificing the semantics and accessibility of real text. A number of
