Building a poker template

What a structured document looks like

We have carefully constructed all the markup for the important parts of the site. Notice that we’ve said nothing about the look of it yet, we’re strictly dealing with content.

We will first add all a good doctype (strict), character encoding and the other things needed for validation. I will not go over this again, it was described a couple of weeks ago in the third page of the beginner’s guide. This is just copy and paste, so don’t skip this part.

Aside from that we also need to add some “hooks”, namely classes and ids, to make it easier to style the document (If you don’t know what those two are I recommend you read through the beginners guide before continuing). Good class and id names have something in common: they describe the content. So using “tinyredbar” is a bad name and using “latestnews” is a good one.

The basics, the bits of HTML we constructed above and the hooks, together form a good logical structure to start with. When looking at that page you will notice that it doesn’t look pretty. When you view the source of it you will see though – that’s what I want to see when I look at the source of your front page. I get all warm when thinking about it; pure, logical, and accessible content. It’s now time to position things where we want them.

Apply some fancy CSS

For me the design part always starts with an image program of some sort (Macromedia Fireworks lately for its ease of use). After a while of fiddling around with images and colors I decided to go for something like this draft (Note that I’m a programmer rather than a designer so don’t expect wonders here :).

When you site there with your image in front of you and are on your way to start with the CSS there is one thing you should remember: do the positioning before you do the decoration. The positioning is the hard part and it will get even harder if you start to mix in colors and fonts. Let’s all follow what I just said and start with the positioning.

Think of every tag you have on your page as a little box. By enabling borders on all your elements you can get a good idea of what I’m talking about. When deciding how to position these boxes it’s always wise to start to look at “the flow” of the document. The flow is what you just saw when you looked at the structure above, content is just stacked on top of each other and most tags occupy the full width. By using some clever combinations of floats, clears and widths/heights it is possible to things to line up like we want.

Positioning the header

Let’s start by looking at the top. There seems to be four boxes here: a company name, company info, statistics, and the play button. The big image to the right can be added as a background, so we’ll wait with that one. The first two boxes just need a smaller width to be where we want them (compare with how they where positioned in default flow). The last two ones need to be floated left and given a width (this will place them side by side).

#header h1 {
   height: 65px;
   width: 400px;
}
#header p {
   width: 400px;
}
#header ul {
   float: left;
   width: 130px;
}
#header a {
   display: block;
   height: 84px;
   width: 261px;
}

Positioning the navigation

Next up we will deal with the navigation and search. Start by adding clear: both to the navigation to make sure we are below any floats from earlier in the code. To make the navigation list horizontal we add display: inline; to all list items. We complete the navigation by setting a width on the list and floating it left.

The search box is a bit harder. All that info won’t fit in the tiny space we have left so my idea is that we hide the fieldset, legend and label. “Why go through the fuzz of adding them and then hiding?”, I hear you shout. Relax. They’re there because they help users that surf the site with CSS turned off, people like your rich grandmother (using Netscape 4), blind users (using screen readers) and Google. Visual users still know that the textbox is for searching because of the “Search” on the button afterwards, so we’re not hiding important information. Ohh, and the header won’t fit our design either so let’s hide that too.

#navigation {
   clear: both;
   height: 41px;
   width: 720px;
}
#navigation ul {
   float: left;
   list-style: none;
   width: 400px;
}
#navigation li {
   display: inline;
}
#navigation form {
   float: right;
   width: 250px;
}
#navigation legend, #navigation label, #navigation h2 {
   position: absolute;
   left: -10000px;
   text-indent: -10000px;
   line-height: 0;
}
#navigation fieldset {
   border: none;
}

Positioning the advertisements

Ahhh, ads, both hated and loved at the same time. Not to include ads on a big site like this would just look strange. Let’s position it like we want. First move it down below the navigation by clearing. Then float it right to get it out of the way from the content below.

#adverts {
   clear: both;
   float: right;
}

Positioning the content

This is going well; the content is next up for positioning. Note that I added a couple of divisions to this part of the HTML when merging. They will come to good use now as holders of the four sections. Each of the boxes is given a specific width and height and gets floated left.

#content div {
   float: left;
   height: 200px;
   width: 240px;
}

Phew, this feels like a whole days work doesn’t it? On the last page of this tutorial we will put all positioning together and show an example of how everything looks when decorated. Click next below.