Advanced form layout with CSS

A common way of laying out forms is to use a table to line up the labels and form controls,
although with the output being non-tabular in nature, this method is not recommended
(CSS should be used for presentation, including positioning elements on a web page)—it’s
provided here to show a (partial) table layout that can be replicated in CSS. For our first
three fields, a table-based form may have something like this:
<fieldset>
<legend>Personal information</legend>
<table class="formTable" cellpadding="0" cellspacing="0" border="0"
å summary="A contact details form.">
<tr>
<th scope="row">
<label for="realname">Name</label></th>
<td><input class="formField" type="text" id="realname"
å name="realname" size="30" /></td>
</tr>
<tr>
<th scope="row"><label for="email">Email address</label></th>
<td><input class="formField" type="text" id="email" name="email"
å size="30" /></td>
</tr>
<tr>
<th scope="row"><label for="phone">Telephone</label></th>
<td><input class="formField" type="text" id="phone" name="phone"
å size="30" /></td>
</tr>
</table>
</fieldset>
Because a class value was added to the
table, the contextual selector .formTable
th can be used as the selector for styling the
form labels, defining the text-align property,
along with other CSS properties such as
font-weight. Applying a padding-right value to these cells also produces a gap to the
right of the label cells. Another contextual selector, .formTable td, can then be used to
style the cells—for example, to add padding at the bottom of each cell. The image to the
right shows these styles applied to the various elements in the previous code block, along
with the styles shown in the “Adding styles to forms” section.
.formTable td {
padding: 0 0 5px 0;
}
.formTable th {
padding-right: 10px;
text-align: right;
font-weight: bold;
}
Although forms are not tabular in nature, using a table to create a form can result in a
pleasing visual appearance, with the labels right-aligned and placed next to their associated
labels. This kind of layout can be replicated using CSS, via a structure built from divs
to replace the table rows. This method retains semantic integrity, via the semantic relationship
created by the label and associated field’s id. Using CSS for form layout also
brings with it the benefit of being able to rapidly restyle and move form components.
<form action="http://www.yourdomain.com/cgi-bin/FormMail.cgi"
å method="post">
<fieldset>
<legend>Personal information</legend>
<div class="row clearFix">
<label for="realname">Name</label> <input class="formField"
å type="text" id="realname" name="realname" size="30" />
</div>
<div class="row clearFix ">
<label for="email">Email address</label> <input class="formField"
å type="text" id="email" name="email" size="30" />
</div>
<div class="row clearFix ">
<label for="phone">Telephone</label> <input class="formField"
å type="text" id="phone" name="phone" size="30" />
</div>
</fieldset>
</form>
Various styles are then defined in CSS. The form itself has its width restricted, and label
elements are floated left, the text within aligned right, and the font-weight property set
to bold. The width setting is large enough to contain the largest of the text labels.
form {
width: 350px;
}
label {
float: left;
text-align: right;
font-weight: bold;
width: 95px;
}
The form controls—the input elements—are floated right. Because only input elements
within the div rows should be floated (rather than all of the input elements on the page),
the contextual selector .row input is used. (The containing divs have a class value of
row.) The width setting is designed to provide a gap between the labels and input elements.
.row input{
float: right;
width: 220px;
}
Finally, to make a gap between the rows, a .row class
is added and given a margin-bottom value.
.row {
margin-bottom: 5px;
}
The method works fine in all browsers except Internet Explorer, which doesn’t apply
margin-bottom correctly. However, the slightly different layout in Internet Explorer can
largely be fixed by adding the following in a style sheet attached via an IE-specific conditional
comment:
.row {
clear: both;
margin-top: 5px;
}
Alternatively, add the following:
.clearFix {
display: inline-block;
}

Adding padding, margins, and backgrounds to a layout

1. Add a page background. In the add-starting-point folder, there are two images,
both of which are gradients. One is a black gradient, fading toward gray at its bottom
edge; this is intended for a page background. Add this by adding the following
rule to the style sheet (after the add your code below comment):
body {
background: #4d4d4d url(page-background.gif) repeat-x;
}
The repeat-x value ensures that the background tiles horizontally only; the color
value #4d4d4d is the color of the bottom pixel of the gradient image, ensuring the
gradient seamlessly blends with the web page background.

2. Add a border to the wrapper. Amend the #wrapper rule to add a border around
the wrapper. Note that the wrapper in this example sits flush with the top edge of
the browser window view area, and so no top border is needed. That’s why the
border-top pair is added, overriding the previous rule for the top border only.
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
}

3. Add a wrapper background. If you test the page now, the background shows
behind all of the page’s content, thereby making it unreadable. Therefore, add the
background pair to the rule, which sets a background color for the wrapper div,
and also sets the second image in the add-starting-point folder (a white-to-lightgray
vertical gradient) to tile horizontally at the bottom of the div: Add a wrapper background. If you test the page now, the background shows
behind all of the page’s content, thereby making it unreadable. Therefore, add the
background pair to the rule, which sets a background color for the wrapper div,
and also sets the second image in the add-starting-point folder (a white-to-lightgray
vertical gradient) to tile horizontally at the bottom of the div:

#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0 100% repeat-x;
}

4. Add some padding. Test the page now and you’ll see two major layout errors commonly
seen on the Web. First, the content hugs the edges of the div, which makes
it hard to read and also looks cluttered, despite the div being 600 pixels wide.
Secondly, the text at the bottom of the div is displayed over the gradient—it’s still
readable, but it looks a little messy. By adding padding (more to the bottom edge,
to account for the gradient), these issues are dealt with:
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0 100% repeat-x;
padding: 20px 20px 50px;
}

Layout technology: Tables vs. CSS

Unless you’re the sort of person who favors very basic web pages, with most elements sitting
underneath each other, you’ll need to employ some kind of layout technology when designing your web pages. Historically, web designers tended to use tables for doing this,
combined with invisible GIFs (sometimes called spacers or shims) to stretch table cells to
the required size. In the early 2000s, CSS layouts gained a foothold, and now more and
more designers are moving toward CSS as a means of page layout.
With few exceptions, pretty much everything you can do with a table can be done faster,
better, and with a greater emphasis on accessibility when using CSS. With content and
design separated, it’s much easier to tweak or rework a website, because you’re editing an
external document that controls spacing and positioning, rather than messing around with
complex tables. We discuss one of CSS’s major benefits in this regard, how it encourages
logical element placement, in the next section. Tables should really be reserved for their
original purpose: formatting tabular data.

Page Layout : Grids and boxes

Like print-oriented design, the basis of web page design tends to be formed from grids
and boxes. Regardless of the underlying layout technology (previously, tables; more
recently, CSS), web pages are formed of rectangular areas that are then populated with
content. However, unlike print design, web design tends to be horizontally and vertically
oriented, with few, if any, curves. This is largely because of the limitations of technology;
although text on a curve is a relatively simple thing to achieve in a desktop publishing
application, doing the same thing on the Web is extremely difficult, unless you’re rendering
text as a graphic, or using XML (SVG), which isn’t well supported across browsers.
Similarly, although areas of rectangular color can easily be defined in CSS (by creating a
div of certain dimensions and then setting its background color), you currently need to
use graphics to have curved background areas and shapes (although rounded corners on
rectangular boxes can be dynamically added using JavaScript—see Nifty Corners Cube at
www.html.it/articoli/niftycube/).A good rule of thumb for web design is to keep things relatively simple. Plan the layout on
paper prior to going near any design applications, and simplify the structure as much as
possible. A typical web page may end up with as few as three or four structural areas (such
as masthead, navigation, content, and footer areas), which can then be styled to define
their relationship with each other and the page as a whole.

Tips And Tricks For Tables layout in Css

This section is going to be brief, because you should avoid using tables for layout, or even
components of a layout (excepting tabular data, obviously). There are exceptions—for
instance, some web designers consider tables acceptable for laying out forms. However,
generally speaking, tables are less accessible than CSS, harder to maintain and update,
slow to render in browsers, and don’t print particularly well. More importantly, once you
know how to create CSS-based layouts, you’ll mostly find working with tables for layout
frustrating and clunky.
A common way of creating tabular layouts is to chop up a Photoshop layout and use
images to stretch table cells to the correct size. (As mentioned earlier, table cells expand
to the dimensions of their content.) Many designers then use a 1-pixel invisible GIF89
(often referred to as a spacer or shim) to force content into position or stretch table cells
to a certain size. Because the 1-pixel GIF is a tiny file that’s cached, it can be used hundreds
of times without impacting download times. However, spacer and table layout usage pretty
much destroys the idea of a semantic Web. Because so much of the layout is defined via
inline HTML, updating it requires amendments to every page on the site (which must also
be uploaded and tested in each case), rather than the simple editing and uploading of an
external CSS file.
It is possible to combine CSS and tables—something that’s usually referred to as a transitional
layout, although one might argue that the “transition” from tables to CSS layouts
should now be considered an historic event. Such layouts are usually created to ensure
layout-based backward compatibility with obsolete devices. This direction should only be
taken when the target audience is known to definitely include a significant number of
users of very obsolete browsers, and also when the layout is paramount to the working of
the site (rather than just the content). When working on such a layout, there are a few
golden rules:
Avoid nesting tables whenever possible: Although tables can be nested like any
other HTML element, doing so makes for a web page that is slow to render and
nightmarish to navigate for a screen reader. (Obviously, there are exceptions, such
as if you need to present a table of tabular data within your layout table.)
Structure the information on the page logically: When designers use tables (particularly
those exported from a graphics package), they have a tendency to think
solely about how the page looks rather than its underlying code. However, it’s
important to look at how the information appears in the HTML, because that’s how
a screen reader will see it. The content should still make sense with regard to its
flow and order even if the table is removed entirely. If it doesn’t, you need to
rework your table. (You can use Opera’s User mode to temporarily disable tables to
find out how your information is ordered without them. Chris Pederick’s Web
Developer toolbar for Firefox [www.chrispederick.com/work/web-developer/]
offers similar functionality via Miscellaneous ä Linearize Page.) Ensure that content
is immediately available; if it isn’t, provide a link that skips past extraneous content,
such as the masthead and navigation—otherwise, people using screen readers will
be driven bonkers. (See www.w3.org/TR/WAI-WEBCONTENT/ for more on web content
accessibility guidelines.)
Avoid deprecated attributes: For instance, there’s little point in setting the table’s
height to 100% when many web browsers ignore that rule (or need to be in quirks
mode to support it).
Use CSS whenever possible to position elements: To give an example—if you’re
working with a 3-cell table and want the middle cell’s content to begin 100 pixels
from the top of the cell, don’t use a spacer GIF. Instead, provide the cell with a class
or unique ID, and use CSS padding.As I keep hammering home, CSS is the way to go for high-quality, modern web page layouts,
and tables should be left for the purpose for which they were designed—formatting
data. The arguments that rumbled on for a few years after the 1990s came to a close—that
browsers didn’t support enough CSS to make CSS layouts possible, and that visual design
tools such as Dreamweaver couldn’t cope with CSS layouts—are now pretty much moot.
Even the previous major release of the worst offender (yes, I’m talking about Internet
Explorer 6) has more than adequate support for the vast majority of CSS layouts, and anything
shipping today is more than capable of dealing with CSS.
In my experience, the main reason designers avoid CSS involves their not knowing how to
work with it. Suitably, then, the next chapter deals with this very issue—showing how
to create page layout elements using CSS.
The last two of these rules are primarily concerned with ensuring that if you design for
legacy browsers, you don’t compromise your work for more modern efforts.
TABLES: HOW NATURE (AND THE W3C) INTENDED
255