Page structure: laying out the page

Let’s start by getting things to show up where we want. For the most part, we’re going to be laying out our block-level elements here. Right now, everything is stacked on top of each other, and crammed up into the top-right corner of our page. Most pages these days center their content within the viewport—that seems like a good place to start. We put in a special <div> just so that we can target all of the content on our page:

 div#pagewrap {

   width: 80%;

   margin: 4em auto;

 }

We did a couple of things in the preceding code. We set the width of the page contents to occupy 80% of the browser window. Using “80%” rather than “800px” is an important step in coding our page so that it will scale for a range of different devices. We plan on making the Summer Slam registration form work on everything from an iPhone or Android device, through the range of tablet devices, and into desktop computers with (potentially) extremely large and extremely detailed screens.

We’ll talk more about the specifics of this approach in the next chapter on responsive design; but for the time being, we’ll try to use relative or proportional units as much as possible. Moving along, though, let’s take care of our other block-level elements:

 header {

   padding: 1em 0 2em;

 }

 section#main {

   float: left;

 }

 section#registration_form {

   width: 74%;

   float: left;

   padding: 0 1% 0 0;

 }

 aside {

   width: 25%;

   float: right;

 }

 footer {

   clear: both;

   padding: 2em 3%;

 }

Let’s take a look at what we’ve done here: for our header, we’ve simply applied a little padding to the top and the bottom of the element to give us some space between its contents and the element below. Once we start applying some background colors and graphics to things, padding becomes a lot more important.

On the #main section, we’ve applied a float. This is actually there so that this element will contain the two child-floated elements, #registration_form and <aside>. If we didn’t float this section, then our footer would creep up and find its way into the #main section.

We want our registration form and our contact information to appear beside each other, so we’ve set our registration form to be 74% wide (with 1% right-side padding) and our aside to be 25% wide. At first glance, this might look confusing: didn’t we set div#pagewrap to be 80% wide? Yes, we did. However, when you’re defining a percentage width, you define it as a percentage of the parent element, and the parent is always 100% wide when you’re inside it.

We’ve floated both the #registration_form and the <aside> to opposite sides, so that they won’t interfere with one another. Finally, we’ve cleared the floats with the footer and applied a bit of padding to it.

OK, our design still isn’t at the point where anyone would accuse it of being beautiful, as shown in Figure 6-1, but at least we’re making some progress. Let’s keep moving and adding style information in. We might come back and revisit some of these rules, but for now we’ve got the basic layout we want.

The header: start at the top

We’ll start at the top of the page and work our way down. Our header right now is pretty plain and not very interesting to look at. It’s really just a couple of links, both with the same font, size, and color. We can do better than that! First up, let’s get those titles looking like titles instead of like text links:

 header {

   background-color: #333;

 }

 header a {

   text-decoration: none;

   color: white;

   text-align: center;

 }

 header h1 {

   font-size: 3em;

   font-family: Helvetica, Arial, sans-serif;

 }

 header p {

   font-size: 1.2em;

   font-family: Helvetica, Arial, sans-serif;

 }

OK, again we’re making progress. We gave the header a dark gray background color, removed the underlines from the links, turned them white, and centered them.

We also increased the font size of both our header and our tag line, and changed the font to Helvetica. Figure 6-2 shows the progress we’ve made.

Helvetica just doesn’t scream “Summer Smash” to us, though; we need a slightly more creative font for this role. Unfortunately, we can’t really rely on folks to have a copy of our favorite font installed on their machine locally, so we can’t just specify any font we choose. In the old days, this presented a real problem, and designers would frequently turn to displaying type using an image. But that isn’t a very semantic way to do things, is it? There’s got to be a better way!

Exploring the world of fonts

Thankfully, there is a better way to handle fonts. With modern web browsers, you can specify alternate font faces and provide the fonts to your end user (keeping in mind copyright restrictions on some fonts!). A few sites have popped up online to help with this process, including one from a well-known search giant, Google. At the time of writing, Google has more than 400 fonts on its “Google Web Fonts” website, which allows you to select a font, link to a special style sheet Google hosts for you, and then use that font on your site.

It’s a bit hard to describe what this looks like, so let’s just get right to the code. First, let’s head over to www.google.com/webfonts and select something that will fit the bill for our Summer Smash needs. “Frijole” looks like a contender, so let’s grab that one. Google makes it easy for us from this point; all we do is copy and paste some code it provides for us.

In registration.html, we replace the <head> </head> section with this:

 <head>

   <meta charset="utf-8">

   <title>Summer Smash 2010 Registration</title>

   <link href="http://fonts.googleapis.com/css?family=Frijole" rel="stylesheet">

   <link rel="stylesheet" href="css/style.css">

   <script src="/js/javascript.js"></script>

 </head>

Next, we make a couple of tweaks to our CSS styles for the header:

 header h1 {

   font-size: 3.5em;

   font-family: "Frijole", Arial, sans-serif;

   color: #eee;

 }

 header p {

   font-size: 1.2em;

   font-family: "Frijole", Arial, sans-serif;

   color: #ccc;

 }

Every font is a little bit different, so we tweaked the size of the <h1> element after settling on a font face. For example, using pure white was a little bit blinding with such a bold font, so we made both the <h1> and the <p> a light gray.

The font-family rule is where the magic happens. We linked in a style sheet directly from Google in the <head> of our document that describes what the Frijole font is; this style sheet provides the necessary files to users who don’t have that font installed on their computer. We can then use font-family to build a stack of fonts that are acceptable here. Check out Figure 6-3 for a far more smashing experience.

While we’re at it, let’s change the default font for the page over to Verdana (instead of the default Times/Times New Roman that most browsers use):

 div#pagewrap {

   width: 80%;

   margin: 4em auto;

   font-family: Verdana, Arial, sans-serif;

 }

Room to breathe: space it out

We’ve got everything roughly laid out now, but let’s put a little space between the elements and make things look a bit nicer. Starting with the header, the page title (<h1>) and the tag line (<p>) look a little claustrophobic. Let’s put a little space between them and also space out the individual characters in the tag line—they look a little mashed together.

 header p {

   font-size: 1.2em;

   font-family: "Frijole", Arial, sans-serif;

   color: #ccc;

   margin: 0.7em 0 0 0;

   letter-spacing: 1px;

 }

That’s good enough for now. Now let’s space out the blocks of content a bit:

 section#main {

   float: left;

   margin: 2em 2%;

 }

In the preceding code snippet, we’re putting a 2em top and bottom margin on the #main section to give it a little room from the header and footer. We’re also bringing the sides in by 2% on each side. Next, let’s clean up the form a bit:

 fieldset {

    padding: 0.5em 1% 1em;

 }

 legend {

   text-transform: uppercase;

   font-size: 1.2em;

   font-weight: bold;

   padding-bottom: 3px;

   border-bottom: 1px solid #333;

   width: 100%;

 }

 form ol, form ul {

   list-style-type: none;

   margin: 0 2%;

 }

 form li {

   margin: 0.5em 0;

 }

 label {

   font-size: 0.8em;

 }

 form ol li label {

   display: block;

 }

 form ul li label {

   display: inline;

 }

There are a lot of margins and padding declared here. There are also a few other things to note. Both ordered lists <ol> and unordered lists <ul> in our form are being given a list-style-type of none. Even though the form elements are contained within a list, we don’t want that list to have numbers and bullets the way a normal list would.

We’ve changed the display type for labels contained within the ordered list to block, so that the input fields will appear on the line below. We’ve also over-ridden this for labels contained within the unordered list (our radio buttons), so that the form elements appear inline with their labels.

Finally, we’ve styled the <legend> elements to give them a little more prominence and to help them stand out like the section headings that they are. Their text is slightly larger, and they will appear in uppercase and bold. We’ve also put a little 1px border on the bottom of those to give the page a little visual division. Now things are really starting to come together, as seen in Figure 6-4!

Give those form elements some style

Our input fields are looking a little drab and boring. Let’s give them a bit of a boost by applying some styles to them:

 input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="date"] {

   width: 50%;

   padding: 0.5em 0.7%;

   margin-top: 0.4em;

   font-size: 1em;

   color: #eee;

   border: none;

   background-color: rgba(0,0,0,0.6);

   -webkit-border-radius: 4px;

   -moz-border-radius: 4px;

   -o-border-radius: 4px;

   border-radius: 4px;

 }

Here we’re using an attribute selector (type=) to target everything except the radio buttons (we don’t want them to be 50% wide; we’ll handle those separately). We’ve set the width, font-size, padding, top margin, color, and border on all of these elements—those declarations are pretty straightforward. The background color and last four lines need a little explanation, though.

For our background-color, we didn’t declare a color name (like red or green) or use a hexadecimal value (like #666666). Instead, we used an RGBA value, which is a new color model supported in CSS3. RGBA allows us to say how much red, green, and blue to use (the first three values respectively; in this case, three zeros produce black), as well as to specify the opacity for the color (the final value is set to 60% opacity).

Our number field and our date of birth field look a little funny. though; they’re awfully wide considering the data they’re going to hold. Let’s override those widths:

 input[type="number"], input[type="date"] {

   width: 20%;

 }

Finally, it’s a minor thing, but our submit button looks a little weird because it’s a light gray color compared to the dark gray elements on the rest of the page. Let’s correct that:

 input[type="submit"] {

   background-color: rgba(0,0,0,0.6);

   color: #eee;

   padding: 0.5em 0.7%;

   font-size: 1em;

   border: none;

   -webkit-border-radius: 4px;

   -moz-border-radius: 4px;

   -o-border-radius: 4px;

   border-radius: 4px;

   margin-left: 2%;

 }

There is nothing too strange, here: the code pretty much mimics what we did on our other form elements. We put a left margin on our button as well as brought the submit button into alignment with our other elements. Let’s check on our progress in our browser (see Figure 6-5).

Sidebar styling

The sidebar for our registration form contains some helpful customer service information. We’ve provided a way for folks to get in contact with us if they have any questions or concerns, but that information needs to stand out a bit:

 aside {

   background-color: #ccc;

   padding: 1em 2%;

   -webkit-border-radius: 4px;

   -moz-border-radius: 4px;

   -o-border-radius: 4px;

   border-radius: 4px;

 }

When we do this, we run into a little hiccup, and our sidebar ends up being pushed down the page. Remember back to our discussion of the box model? Here, by adding horizontal padding to the aside, we’ve widened that element enough that it won’t fit floated beside our registration form. It’s a simple fix—let’s just subtract some width from our earlier declaration:

 aside {

   width: 21%;

   float: right;

 }

Instead of declaring the width to be 25%, we’ve set it to 23% with two 1% paddings (so the aside stays the same width as before). But there’s still more work to do; our text looks terrible all cramped together in our aside. Let’s clean up the various elements:

 aside h2 {

   font-size: 1em;

   line-height: 1.3em;

   text-transform: uppercase;

   margin-bottom: 1em;

 }

 aside p {

   font-size: 0.8em;

   line-height: 1.2em;

   margin-bottom: 1.5em;

 }

 aside ul {

   list-style-type: none;

   font-size: 0.8em;

   line-height: 1.5em;

 }

That’s not too bad. We’re not crazy about that e-mail link being the default underlined blue text. Let’s do something special there: we’ll not only change the style of that link, but we’ll add a touch of interactivity, so that when a user mouses-over the link, some animation happens.

CSS3 transitions

Something new in CSS3 is the introduction of transitions. Transitions allow you to animate between two states of an element. What we mean by that is that, instead of having something change immediately from blue to red, you can have it fade through a series of shades of purple until it eventually reaches the red endpoint. Transitions usually come in three parts: the transition-property (what you’re going to change), the transition-duration (how long the change is going to take) and the transition-timing-function (how fast the transition happens over time). Here’s what that looks like:

 aside a {

         color: #333;

         background-color: transparent;

         text-decoration: none;

         -webkit-transition: all 3s ease;

         -moz-transition: all 3s ease;

    -o-transition: all 3s ease;

    transition: all 3s ease;

 }

 aside a:hover {

         color: #c00;

         background-color: black;

         font-weight: bold;

 }

In our first declaration, we’ve turned off the underlines, set our transitions, and set our link color to dark gray. We’ve also explicitly declared that our background color is transparent (this is required so that this works properly in Firefox) In the second declaration, we’ve used an a:hover pseudo-class to indicate what should happen when a mouse hovers over the link. In this case, we’ve changed the color of the link to red and changed, changed the weight of the typeface to bold, and the background color to black. Colors can have transitions, but font weights can’t—all that means is that, when somebody hovers her mouse over our link, it will instantly become bold, but will fade to red over a half-second duration.

Let’s pause for a second and take a look at these declarations in more detail. First, we’ve made a number of vendor- (i.e., browser-) specific declarations here that all do the same thing. You might be asking yourself why that is, but it’s entirely because CSS3 is still in its infancy. Certain browsers support CSS3 transitions, and others don’t. Here, we’re specifically targeting a number of browsers that do have support, and then ending with the general transition: declaration. As time progresses and browser support improves, we’ll be able to drop the vendor-specific rules; however, for the time being, they’re required.

We should also dissect one of these declarations and explain what’s going on. The first property, all, simply tells the browser to transition between all supported properties. We could also alter the size, rotation, or position of the link; and specifying all would ensure that a smooth transition happens for all of those.

3s indicates the length of time over which the transition should take place. Three seconds is slow enough that we’ll actually be able to see the change. Also, ease indicates the timing function. There are six possible timing functions that can be used here, and the best way to get a feel for what they do is to experiment with them. For example, try swapping out ease for ease-in, ease-out, ease-in-out, linear, or cubic-bezier to see what all of these do. Don’t worry; we won’t go anywhere.

There are other properties you can transition between. Some handy ones include size (you can make things grow and shrink), rotation (make things spin), background colors and opacity (make things appear or disappear).

Footer beautification

We’ve finally reached the bottom of our page. The footer of a page is often overlooked because it’s pushed all the way to the bottom. Footers often contain very valuable information, though. In our case, we’re letting everyone know who’s behind Summer Smash 2012—the infamous promoters, Barker and Lane! This calls for some style:

 footer {

   border-top: 1px solid #666;

   color: #c00;

   font-family: Zapfino, Verdana, sans-serif;

   font-size: 0.8em;

 }

We gave our footer a bit of flair by changing the text color to a nice crimson (red). We also decreased the font size a bit—there’s no need to have it jump off the page!—and put in a font stack of Zapfino and Verdana. We didn’t bother to include the Zapfino font as a separate style sheet (as we did with Frijole); this means that, if a person visiting our site has Zapfino installed on their computer, he’ll see our footer in a nice cursive font face. If he doesn’t, it’s no big deal; we’ll just show it to him in Verdana.

Some designers might cringe at this idea. If the font face really is essential to your design, then go the extra mile and include it. In this case, our footer just contains a bit of meta-information, so there’s no real reason to obsess over it. Let’s take one final look at our page now (see Figure 6-6).

All together

We jumped around a bit in this chapter, tweaking values here and there, so we thought that we’d give you a complete listing of the style sheet before moving on. Our completed style.css style sheet looks like this:

 /* RESET STYLES */

 html, body, div, span, object, iframe,

 h1, h2, h3, h4, h5, h6, p, blockquote, pre,

 abbr, address, cite, code,

 del, dfn, em, img, ins, kbd, q, samp,

 small, strong, sub, sup, var,

 b, i,

 dl, dt, dd, ol, ul, li,

 fieldset, form, label, legend,

 table, caption, tbody, tfoot, thead, tr, th, td,

 article, aside, canvas, details, figcaption, figure,

 footer, header, hgroup, menu, nav, section, summary,

 time, mark, audio, video {

   margin:0;

   padding:0;

   border:0;

   outline:0;

   font-size:100%;

   vertical-align:baseline;

   background:transparent;

 }

 body {

   line-height:1;

 }

 article,aside,details,figcaption,figure,

 footer,header,hgroup,menu,nav,section {

   display:block;

 }

 nav ul {

   list-style:none;

 }

 blockquote, q {

   quotes:none;

 }

 blockquote:before, blockquote:after,

 q:before, q:after {

   content:";

   content:none;

 }

 a {

   margin:0;

   padding:0;

   font-size:100%;

   vertical-align:baseline;

   background:transparent;

 }

 /* change colours to suit your needs */

 ins {

   background-color:#ff9;

   color:#000;

   text-decoration:none;

 }

 /* change colours to suit your needs */

 mark {

   background-color:#ff9;

   color:#000;

   font-style:italic;

   font-weight:bold;

 }

 del {

   text-decoration: line-through;

 }

 abbr[title], dfn[title] {

   border-bottom:1px dotted;

   cursor:help;

 }

 table {

   border-collapse:collapse;

   border-spacing:0;

 }

 /* change border colour to suit your needs */

 hr {

   display:block;

   height:1px;

   border:0;

   border-top:1px solid #cccccc;

   margin:1em 0;

   padding:0;

 }

 input, select {

   vertical-align:middle;

 }

 /* END RESET */

 /* Layout Block level elements */

 div#pagewrap {

   width: 80%;

   margin: 4em auto;

   font-family: Verdana, Arial, sans-serif;

 }

 header {

   padding: 1em 0 2em;

 }

 section#main {

   float: left;

   margin: 2em 2%;

 }

 section#registration_form {

   width: 74%;

   float: left;

   padding: 0 1% 0 0;

 }

 aside {

   width: 21%;

   float: right;

 }

 footer {

   clear: both;

   padding: 2em 3%;

 }

 /* Header */

 header {

  background-color: #333;

 }

 header a {

   text-decoration: none;

   color: white;

   text-align: center;

 }

 header h1 {

   font-size: 3.5em;

   font-family: "Frijole", Arial, sans-serif;

   color: #eee;

 }

 header p {

   font-size: 1.2em;

   font-family: "Frijole", Arial, sans-serif;

   color: #ccc;

   margin: 0.7em 0 0 0;

   letter-spacing: 1px;

 }

 /* Form */

 fieldset {

   padding: 0.5em 1% 1em;

 }

 legend {

   text-transform: uppercase;

   font-size: 1.2em;

   font-weight: bold;

   padding-bottom: 3px;

   border-bottom: 1px solid #333;

   width: 100%;

 }

 form ol, form ul {

   list-style-type: none;

   margin: 0 2%;

 }

 form li {

   margin: 0.5em 0;

 }

 label {

   font-size: 0.8em;

 }

 form ol li label {

   display: block;

 }

 form ul li label {

   display: inline;

 }

 input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="date"] {

   width: 50%;

   padding: 0.5em 0.7%;

   margin-top: 0.4em;

   font-size: 1em;

   color: #eee;

   border: none;

   background-color: rgba(0,0,0,0.6);

   -webkit-border-radius: 4px;

   -moz-border-radius: 4px;

   -o-border-radius: 4px;

   border-radius: 4px;

 }

 input[type="number"], input[type="date"] {

   width: 20%;

 }

 input[type="submit"] {

   background-color: rgba(0,0,0,0.6);

   color: #eee;

   padding: 0.5em 0.7%;

   font-size: 1em;

   border: none;

   -webkit-border-radius: 4px;

   -moz-border-radius: 4px;

   -o-border-radius: 4px;

   border-radius: 4px;

   margin-left: 2%;

 }

 /* Aside */

 aside {

   background-color: #ccc;

   padding: 1em 2%;

   -webkit-border-radius: 4px;

   -moz-border-radius: 4px;

   -o-border-radius: 4px;

   border-radius: 4px;

 }

 aside h2 {

   font-size: 1em;

   line-height: 1.3em;

   text-transform: uppercase;

   margin-bottom: 1em;

 }

 aside p {

   font-size: 0.8em;

   line-height: 1.2em;

   margin-bottom: 1.5em;

 }

 aside ul {

   list-style-type: none;

   font-size: 0.8em;

   line-height: 1.5em;

 }

 aside a {

     color: #333;

     background-color: transparent;

     text-decoration: none;

     -webkit-transition: all 3s ease;

     -moz-transition: all 3s ease;

     -o-transition: all 3s ease;

     transition: all 3s ease;

 }

 aside a:hover {

     color: #c00;

     background-color: black;

     font-weight: bold;

 }

 /* Footer */

 footer {

    border-top: 1px solid #666;

    color: #c00;

    font-family: Zapfino, Verdana, sans-serif;

    font-size: 0.8em;

 }

A quick note about browser compatibility

We put in a disclaimer early on asking you to forget about other web browsers as you work through this chapter and to focus your testing on Google Chrome. The reason we made this request is that, at the time of this writing, Chrome has some of the best support for the new CSS3 properties we’ve discussed. We should really stress here that CSS3 is still a working draft and that CSS3 is not a fully approved standard at this point. We really are working with cutting-edge stuff here. Because of that, browser support will vary quite a bit.

CSS3 is fairly well supported in Safari, Opera, Chrome, and Firefox. Internet Explorer 10 and onwards has decent support as well. You may be asking yourself why on earth we’d consider using this technology that has such spotty support, and the answer is simple: when CSS3 is supported, the results are fantastic. And when it’s not supported, nothing breaks (no harm, no foul). CSS3 provides an enhancement to the user experience when it’s supported. Think of it this way: you, as a developer, are rewarding your end users for using the most up-to-date technology!