CSS Simple Form

Recently at work we've been working on a new website, with a CSS based design. The initial site design was done by a real web designer. This post shows some of the CSS techniques I learnt from his style sheets. The example is hardly ground breaking, just the layout of a simple form, but interesting all the same. You can see a simple form here, and the full css file here.

Fancy Box

The simple form is inside a fancy box, with a white inner boarder and a graduated fill background. The box is made from a div within a div.

<div class="outer_box"> 
<div class="inner_box simpleform"> 

The classes outer_box and inner_box together style the fancy box. The graduated fill is made with an image, a few pixels wide, which is repeated horizontally across the bottom of the inner box. The background colour of the inner box is chosen to match the color at the top of the graduated fill, so that if the height of the box is bigger than the image, there is no gap in the background. The thin white strip between the inner and outer boxes is simply 4px of white padding on the outer box.

.outer_box {
border:1px solid #aff53d;  
background-color:#fff;  
padding:4px;
}
.inner_box {
padding:1em;
background-color:#d3f49d;
background-image:url(background_fill.jpg);
background-repeat:repeat-x;
background-position:bottom left;
}

Column Layout

The labels and entry boxes have a column layout. To do this the labels are floated left and given a width (both the float and width are required). Each row is wrapped in a <p> tag, which is given a bottom margin for row spacing.

<p> 
    <label for="Name">Name</label> 
    <input id="Name" maxlength="100" name="Name" type="text" value="" /> 
</p> 

The style of all the form content is defined by the simpleform class which is applied to the inner_box div. Note the use of decent selectors, the key to CSS enlightenment.

.simpleform p {
margin-bottom:10px;
}
.simpleform label {
float:left;
width:12em;
}
.simpleform input {
width:180px;
padding:1px;
font-size:8pt;   
}

Button with Transparent Background

The buttons have rounded corners with a transparent background. The markup for the buttons is quite simple:

<div class="button"> 
    <ul> 
        <li><a href=""><span>OK</span></a></li> 
        <li><a href=""><span>Cancel</span></a></li> 
    </ul> 
</div> 

The CSS for the buttons is rather more complex. But basically the button is made from three images, attached to the <li>, <a> and <span> elements.

.button {
height:24px;
line-height:14px;
}
.button ul {
list-style:none;
}
.button ul li {
float:left;
background-image:url(button_right.gif);
background-repeat:no-repeat;
background-position:top right;
margin:0 0 0 10px;
} 
.button li:first-child {
margin:0;    
}
.button li a {
display:block;
background-image: url(button_left.gif);
background-repeat:no-repeat;
background-position:top left;
padding:0 18px;
text-decoration:none;
}
.button li span {
display:block;
background-image:url(button_middle.gif);
background-repeat:repeat-x;
background-position:top left;
padding:5px 0;
color:#487500;
font-weight:bold;
}

There are a few subtleties in the CSS:

• The float:left; on the <li> elements makes the buttons line up horizontally rather than vertically.
• Both the <a> and <span> element have display:block, to make them respect the top and bottom, margins and paddings.
• The height (24px) must equal the line-height (14px) plus the spans padding-top (5px) and padding-bottom (5px).
• The <li> elements have a margin-left of 10px to make the spacing between the buttons. However you don't want a left-margin on the first button, so this is overridden and set to 0px, with the li:first-child construct.

There are lots of tutorials describing CSS based buttons, but I found Alex Griffioen's sexy buttons particularly useful.