• Choose a category
• All
• Classic-Fiction

♦ There isn’t a table. There’s no need to add a table as an artificial organization scheme. A table wouldn’t add to the clarity of the page. The form elements themselves provide enough structure to allow all the formatting you need.

♦ Labels are part of the design. I used the label element throughout the form, giving me an element that can be styled however I wish.

♦ Everything is selectable. I’ll want to apply one CSS style to labels, another to input elements, and a third style to the button. I’ve set up the XHTML so I can use CSS selectors without requiring any id or class attributes.

♦ There’s a button. I used a button element instead of on purpose. This way, I can apply one style to all the input elements and a different style to the button element.

Designing a page like this one so its internal structure provides all the selectors you need is wonderful. This keeps the page very clean and easy to read. Still, don’t be afraid to add classes or IDs if you need them.

Figure 1-8 demonstrates how the page looks with no CSS.

It’s often a good idea to look at your page with straight XHTML before you start messing around with CSS.

If you have a page with styles and you want to see how it will look without the style rules, use the Web Developer toolbar. You can temporarily disable some or all CSS style rules to see the default content underneath. This can sometimes be extremely handy.

Figure 1-8: The plain XHTML is a start, but some CSS would help a lot.

Using float to beautify the form

It’d be very nice to give the form a tabular feel, with each row containing a label and its associated input element. My first attempt at a CSS file for this page looked like this:

/* floatNoClear.css

CSS file to go with float form

Demonstrates use of float, width, margin

Code looks fine but the output is horrible.

*/

fieldset {

background-color: #AAAAFF;

}

label {

float: left;

width: 5em;

text-align: right;

margin-right: .5em;

}

input {

background-color: #CCCCFF;

float: left;

}

button {

float: left;

width: 10em;

margin-left: 7em;

margin-top: 1em;

background-color: #0000CC;

color: #FFFFFF;

}

This CSS looks reasonable, but you’ll find it doesn’t quite work right. (I show the problem and how to fix it later in this chapter.) Here are the steps to build the CSS:

1. Add colors to each element.

Colors are a great first step. For one thing, they ensure that your selectors are working correctly so that everything’s where you think it is. This color scheme has a nice modern feel to it, with a lot of blues.

2. Float the labels to the left.

Labels are all floated to the left, meaning they should move as far left as possible, and other things should be placed to the right of them.

3. Set the label width to 5em.

This gives you plenty of space for the text the labels will contain.

4. Set the labels to be right-aligned.

Right-aligning the labels will make the text snug up to the input elements but give them a little margin-right so the text isn’t too close.

5. Set the input’s float to left.

This tells each input element to go as far to the left (toward its label) as it can. The input element goes next to the label if possible and on the next line, if necessary. Like images, input elements have a default width, so it isn’t absolutely necessary to define the width in CSS.

6. Float the button, too, but give the button a little top margin so it has a respectable space at the top. Set the width to 10em.

This seems to be a pretty good CSS file. It follows all the rules, but if you apply it to floatForm.html, you’ll be surprised by the results shown in Figure 1-9.

Figure 1-9: This form is…well…ugly.

After all that talk about how nice float-based layout is, you’re probably expecting something a bit neater. If you play around with the page in your browser, you’ll find that everything works well when the browser is