75em;
}
#tiny_form_vert li {
font-size:.7em;
list-style-type:none;
}
#tiny_form_vert a {
color:#069;
}
#tiny_form_vert a:hover {
color:#336;
text-decoration:none;
}
makes room for inputs next to
labels
sets color of labels
sets size of label relative to parent
removes space above and below
the button image
makes button accept margins
styles for the messages/errors list
start here
hides paragraph unless error class
is present??”see below
shows paragraph when error class
is present
smaller font size
removes bullets from list
unhovered link color
hovered link color
removes link underline when
rolled
BUILDING WEB PAGES 265
The form element and its child elements can be dropped into a containing
element, and it immediately styles itself, as shown in Figure
7.16, if you have the right class added to the form div and the CSS is
associated with the page.
FIGURE 7.16 The sign-up form is
now styled below the text. Note how
the transparent box expands vertically
to accommodate it.
Styling the Text
All that is left to do is style the text in the header content area,
promo area (right column), and footer.
THE HEADER
The effect I want in the header is that the headline text touches the
left edge of the header and the subhead text touches the right edge.
Normally, I would pad content away from the edge of its containing
element, as I did with text in the box on the left navigation, but
I want to create a dramatic look for the header to go with the black
and gray look, and the visual tension caused by the text going right
out to the edges is just what I want.
Pages:
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306