You can learn how
to do this by reading my book Codin??™
for the Web.
DESIGNING INTERFACE COMPONENTS 203
Here is the CSS:
div#column {
margin:20px;
width:8em;
border:1px solid #AAA;
font-family:Arial, sans-serif;
?¬‚ oat:left;
}
#tiny_form_vert * {
margin:0;
padding:0;
}
form#tiny_form_vert {
padding:4%;
?¬‚ oat:left;
margin-bottom:0;
}
#tiny_form_vert input[type="submit"] {
?¬‚ oat:right;
margin:.5em 0 .2em 0;
}
#tiny_form_vert p {
display:none;
margin-top:0em;
width:100%;
clear:both;
}
temporary style to push the form
out of the corner in this example
width of the containing element
the border on the containing
element
makes column enclose contents
removes margins and padding of
all elements in this form
relative padding inside the form
element
form encloses contents
moves submit button to right??”
IDWIMIE
creates space above and below
button
styles for the messages/errors list
hides list unless error class is present
??”see below
ensures text cannot ?¬‚ oat up beside
button
STYLIN??™ WITH CSS - CHAPTER 6 204
#tiny_form_vert ul {
font-size:.85em;
margin:0;
padding:.2em;
}
#tiny_form_vert li {
list-style-type:none;
}
#tiny_form_vert p.error {
display:block;
color:red;
font-size:.8em;
}
#tiny_form_vert a {
color:#069;
}
#tiny_form_vert a:hover {
color:#336;
text-decoration:none;
}
Re-creating this component is a good exercise to help develop your
skills.
Pages:
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243