Building a poker template
Putting it all together
Now it’s time to take all these small parts of CSS, put them in a CSS-file and apply it on the structure we had before positioned. Can you recognise the different parts from the previous page?
I could bore you to death by explaining every little margin in the decoration step but I won’t. Instead I will just show you the prettied up version of the site. You can have a look at the second CSS file used if you want.
Let’s have a look at the same properties we looked at in the beginning of this article:
| Site name | Doctype | Validation errors | Layout method |
|---|---|---|---|
| Friendlybit template | Strict | 0 errors | CSS |
Summary
I hope this tutorial has showed you that CSS far from rocket science; could you not have done this yourself? The web really needs to be freshened up and made accessible for everyone, and with your help it can. Do your part by telling your friends, by holding a short presentation where you work, and by supporting webmaster you know work like this. Use your imagination, how can you make people understand?
Still here? Ok. If you’re uncertain, ask yourself: can you afford to be left behind?
I hope this article gave you some insight to the development of a poker site. This article was the first is a series of articles about niche templates so be sure to check back for more. Any 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.