Building a poker template

Time has come to go through the list of features and write the code for them. The question which we should keep in mind here is “What content do I have?”.

Play poker button

Ok. We want a poker button. Some people prefer to use <input type="submit" /> for all kinds of buttons. Those buttons are made for submitting a form though, and that’s not what we want here. When you think of it, is this “Play button” any different from a link? I think not. We will make it look like a button with CSS later on. Let’s use the HTML of a simple link:

<a href="play-poker.html">Play poker</a>

All sites cost money to run and getting that money is often done with some kind of advertisement on the site. What kind of ads should we use for this template? Looking at the top10 it seems that images are more common than text so let’s use images. Don’t forget to let advertisers specify alternate text to their images so you don’t have to make something up for the alt attribute.


Advertisement

Beginners guide

To get beginners to play on our site we need to at least teach them the basics. How? People don’t like manuals and they are often hard to navigate in. The best would be if no manual were needed at all, but let’s be realistic, some people will still need help. A good approach is to use questions in natural language to lure people to read the guide. Keep it simple and easy to read. To mark that this is the beginners guide we add a header with that name in. Don’t be tempted to use any other header than h2, the h1 will be used for the name of the site and this is a second level header, nothing else. To mark up the questions we use a paragraph of text with links. At the end we add a link to more information. The class “more” there is just a way to say that this paragraph is different from the one above.

Beginners guide

If you are a poker beginner you might want to start by reading the rules. When you are done with that you can register an account with us. Don't worry, to join is free of charge and you can even win some money in our monthly tournaments.

More questions are answered in the frequently asked questions section

News

People playing poker are probably interested in poker news too. By having news on your site your users don’t have to go somewhere else looking for them. This will be a separate section so we should add a header here too, h2 is appropriate. The news items themselves are just items in an unordered list, so let’s use the HTML for that,

News

We maintain an news archive too.

Forum

The forum posts can be handled much like the news. A header, a simple list, this time ordered by with the most active on top. End it with a now familiar classed paragraph.

Forum

Our forums are always filled with people to answer your questions.

Search

The bigger the site gets the more important it becomes to get a site search. A search clearly resembles a form; the user fills in a few values and sends them to the site. A simple textbox for the search query with a submit folloing it.

Just in case you’re not familiar with the modern way to make a good form I’ll go through the elements used below briefly. A

groups similar form elements together. For example, if you have two separate fields for first name and last name, you can signal that they are both part of the full name by adding a fieldset around both of them. Using we then tell what the meaning of the fieldset is. For the previous example we could use “Full name”. The last “new” tag here is the

<label>. It simply shows that there are a relation between the text in front of the button and the input box right next to it. A good thing about this relation is that it enables you to click on the label and have the input selected; something that is particularly useful with small radio buttons. This is what the HTML looks like:</label>




   Site search
   Search:

About us

Everyone wants to know who they’re dealing with before they make a purchase of some kind (I believe that’s one of the reasons some e-shops have problems, but that’s a completely different story). Anyways, it’s easy for you to put up an image and some quotes from people that are happy with your services, so do it. The header and “more” paragraph should be familiar by now.

About us

PokerCompany has been in the business since 1997 and is...

Want to read more about us?

On the next page we will take all the pieces of HTML and put them together. It’s getting interesting, don’t you think?

January 23rd, 2006 by Emil Stenström
Posted in CSS, HTML, Tutor

Comment feed 17 comments

Velaluka ( 24 Jan 2006 )

Transitional is used more: maybe just to use depreciated HTML in strict?

These sort of sites are not made by webdesign pros that use standards but seems more developers that know some CSS and other.

Or maybe the templates are faulty?
Emil Stenström ( 25 Jan 2006 )

@Velaluka: I think you can blame templates in some cases. I know a lot of developers that I would like to give this tutorial to though.

Being valid Transitional is surely better than not being valid at all, it’s just that there’s no reason to use that doctype. As I say in my cross browser tutorial transitional can get you in troubles…
Velaluka ( 26 Jan 2006 )

“As I say in my cross browser tutorial transitional can get you in troubles…”

doctype switching?
box model IE?
Jeff Mackey ( 2 Feb 2006 )

Very cool tutorial. I look forward to additions in this series! Thank You.
Todd Currie ( 10 Feb 2006 )

Great study template, Tks.

Do you have a table detailing descriptor options and their effects? Some formats you use puzzle me

font: 80%/1.4em Arial
margin: 40px 40px 0 0;
margin: 2em auto 0;
list-style: none;

Tks again look forward to more learning.
Emil Stenström ( 10 Feb 2006 )

@Todd Currie: I skipped going over all the details in the last step. Here’s a short explaination of the four lines you pasted:

1) font Sets font-size to 80% of the users default and a line-height of 1.4em (I could have used 140% too, don’t know why I didn’t). Also sets the font-family to Arial.

2, 3) margin margin takes one, two, three or four values. I’ll write a short article about this in the future, stay tuned!

4) list-style removes the bullets on a list which makes them look better.
Jordan Stewart ( 2 Jun 2006 )

Hi. I’m a newbie to CSS and I’m just wondering what the reasoning behind using

#navigation legend, #navigation label, #navigation h2 {
position: absolute;
left: -10000px;
text-indent: -10000px;
line-height: 0;
}

is over using

#navigation legend, #navigation label, #navigation h2 {
display: none;
}

or

#navigation legend, #navigation label, #navigation h2 {
visibility: hidden;
}
Emil Stenström ( 2 Jun 2006 )

@Jordan Stewart: Good question. The reason is that screen readers are known to hide things with display: none, something that defeats the purpose of adding it in the first place. It’s a bit annoying but at least the workaround is not that hard.

Visibility: hidden; would not remove the element, it would still take up space.
Adam Zakreski ( 8 Jun 2006 )

When you chose not to display the legend and text for the search button, it appears you just used indent to push it off the left of the screen. Why did you do this instead of doing a {display:none}?

Great site it’s been really informative!
Travis ( 27 Oct 2006 )

The only problem I have with the layout is that when you drag the window size, the advertisement, nav bar, and the “4,379 people online part” move all over the place. How can one fix this?
Emil Stenström ( 28 Oct 2006 )

@Travis: Thanks for pointing that out. It has to do with the IE6 resize bug and I applied the fix to it. Does it work better for you now?
Emil Stenström ( 28 Oct 2006 )

@Adam Zakreski: I answered that in the comment above yours.
Karla ( 19 Mar 2007 )

How would you get started to build your own poker site?
Andrew ( 1 Jun 2007 )

it looks good, but if you make the text larger (eg if you have bad eyesight) it overflows its boxes. Is this is fundamental problem with the method/css?
Emil Stenström ( 2 Jun 2007 )

@Andrew: it has to do with me setting the height of the boxes to 200px. Change it to 10em instead and it should work better when zoomed. Thanks for reading!
Ronn ( 28 Nov 2007 )

Nice site, very nice tutorial. Only bug I can see in this whole thing is that it’s really unnecessary for theses sites to do almost any onsite optimization. The degree of offline optimization these guys do is remarkable. Check them out in backlinks, you will be surprised at how many people link to them.