Let me start this web log by asking the web developers among you something. Everybody raise their hand who codes their own HTML. Nice to see that there are still so many of you. Now drop your hand if you are using the table tags for formatting your web pages. Now that's a surprise isn't it? I don't see many hands. Even Eddy's (yep, it's EDI writing this again) hand isn't raised anymore. Now why are you all using the table tags? What do you say? It's a standard? You have to come up with better arguments than that. To assure cross-browser functionality? That's only true if you and your users are still using version 4 type browsers. Unless you're an old fogy attached to antiquities, that possibility is no longer open either. There's no alternative you say. Sorry, but then you can barely be called a web developer. The solution to the endless, spaghetti of (nested) table is called CSS. Strangely enough people only use CSS for the mark up of the page, meaning fonts, colours and other visual aspects. But suddenly it stops over there. Then tables are used for it instead of for what they should be used for: numbers. Is it laziness or something else? In Eddy's case it's the force of habit, and since he's been a web developer for a long time now, it's hard to teach an old dog new tricks. One would think that tools and languages would go about it in a more sensible way. Unfortunately not. So let's have a look at how it should/can be.
Good stock.
Before we start, we need to have a good base. The base of a good soup is its stock. And I'm not talking about these prepared bouillon cubes. Even the low fat (what a contradiction) cubes aren't that healthy since they contain more salt than is good for you, and then the additional additives and chemicals make me think that Count Rumford or Justus von Liebig wouldn't recognize what's available in the stores now. The best is to make your own stock. Although you might think that's a lot of effort when you taste the result you won't go for anything else anymore.
And it isn't that difficult at all. Just bring the baked (in the oven) parts of chicken/fish/veal to the boil with some herbs and let it simmer for an hour, skimming the foam away regularly. That's it. Then do whatever you want for the rest of the soup. And yes, it's a lot of extra work if you want to make a consommé in order to clarify the stock as it should. But gosh what a pleasure you get afterwards.
Well it's the same thing with CSS. You need to know the basics in order to appreciate it better. The measurements within CSS are done with two types of units: relative and absolute measurement units. As the name suggests, relative measurements are relative towards the output device. Typical units are: pixels (px), the height of the element's font (em), the height of the letter “x” (ex) and percentage (%). Absolute units like points (pt = 1/72 inch), pica (pc = 1/6 inch thus 12 points), inches (in), centimetres (cm) and millimetres (mm) are useful when the properties of the output device is fixed. Setting general rules is not so easy. It all depends on the needs and the output device. A pixel is a typical non printing unit and focused on screen sizes. But we aware that e.g. a Macintosh has a typical screen resolution of 75 pixels/dots per inch (ppi or dpi) whereas a Windows system usually works with a resolution of 96 ppi. That has of course an effect on the web site that you create. It gets even more complicated when a font type is measured in points (as a division of picas).
Keeping the latter in mind, one could say that font-sizes and line-heights for the web are better specified as absolute lengths (points), unless you want to take different display resolutions into consideration. That seems silly, but it does matter when you want to support different output devices as PDA, WebTV, etc. Frames and tables are best measured as percentages, while margins, paddings and border widths scale better when specified as relative units (px or em). All relative measurement units thus.
And as if that isn't enough CSS knows other units like larger/smaller (fonts), thin/medium/thick (borders) and bolder/lighter (fonts). You might find this rather far-fetched. You don't need to know how the pistons of an engine work in order to know how to drive. That's true, but you need to know how to check the oil level, tension of the tires, brake fluid. In Belgium it's compulsory knowledge in order to pass the drivers license exam.
WaSP
is short for Web Standards Project which is in fact one of the stimulators for using CSS, instead of tables, for laying out web pages. Even Microsoft acknowledges its importance and joined WaSP via their Corporate Task Force.
This web log will not serve as a CSS tutorial; sites like W3 Schools are far better in this. I just want to show what's feasible using CSS instead of tables as layout tool. Let's take a real site as an example: the SDN site. This site has a classical layout: the three pane/columns site with a header/banner (yellow), a left navigation menu (red), content (green) and POI navigation (blue).
The only difference is that content itself is divided into a left and a right column, which one could see as a four panel site. I rather prefer to interpret it as a nested content. As such it really doesn't matter. The thing is that this is done with tables as you can see in this screen dump, but more on that later.
The CSS way
Let's have a look how they've done it. It is just a matter of studying the HTML and CSS that the SDN team have been coding. The web developer tool plug-in for Firefox mentioned in Eddy's Letting the cat out of the bag is a great help for this.
Let's start with the header. The main CSS style for this contains:
#header { height: 60px; width: 100%; background-color: #B5CBE7; } No big deal, just the colour and size of the header. The real power is the CSS specifications of each sub element of the header
#header #topheaderlinks { position: absolute; top: 20px; right: 90px; padding: 0 0.5em 0 0; text-align: right; font-size: 0.7em; color: #6493C2; background-color: #B5CBE7; z-index: 1; } … #header #welcome { font-family:tahoma, arial,sans-serif; font-weight:bold; color:#FF9900; position: absolute; top: 41px; left: 93px; height: 19px; padding-left: 0.5em; font-size: 0.7em; z-index: 1; } … #header #logo { position: absolute; top: 0; left: 0; z-index: 0; } As you can see, it defines the place where it needs to start, the width and height of the area, the text style and colouring. You see that you can define exactly where things need to be placed without using any tables.
The left pane is handled by the CSS id sidebar.
#sidebar { position: absolute; width: 20%; color: #FFF; background-color: #369; padding: 0 -1px 0 0; margin: 0 1px 0 0; z-index: 0; border-right: 1px solid #575757; }
Again, same thing. No rocket science, thus no problems with heat shields either. The only thing that might cause some problems is the use of percentages. Not all browsers use the same calculation methods for this. It's like computer screens. Take two 17” inch monitors from two different brands and you'll see that they're different in size. When you measure both, you'll see none are 17” functional viewing area. Same thing for the browser thing. That makes exact positioning rather difficult. On the other hand, as mentioned in Eddy's earlier Always read the small print , you need to find a way that will fit for all.
Tables after all?
The rest of the content is done via the following:
#content { position: absolute; left: 20%; width: 79%; border-left: 1px solid #575757; } Surprisingly the rest of the layout is done via tables. It occurs to me that the static framework is done via CSS and the dynamical stuff is done via the classical tables. Even the right pane is done via this way. Is that a missed change? I personally think so, but I'm only a device that can only think in black and white. My bits can only be switched on or off, like this binary watch . Can it be done otherwise? Of course. Is it hard work? Nope. This is the proof.
Let's start with the right pane. There are different solutions for this, this one among them:
#rightpane { position: absolute; left:80%; width:20%; background:#eeeeee; border:1px solid #000; }As you can see, I start positioning from the left in order to prevent hassle with calculating stuff and possible overlapping. If you prefer from the right, it needs to be
#rightpane { position: absolute; right:10px; width:20%; background:#eeeeee; border:1px solid #000; } The main content might be a point of discussion, as mentioned earlier. Are we going to treat this as a whole, which happens to have two columns or do we see this as two separate columns. In other words, is this nested content or not? It all depends on how one tends to interpret the banner above the two columns.
Since nesting is already shown in the header example above, I will show the separate column approach.
#leftcontent { position: absolute; left:20%; width:39%; border-left: 1px solid #575757; }#rightcontent { position: absolute; left:50%; width:39%; } Being at the end of the table?
As you can see, it isn't difficult to leave tables out of the design. There are clearly advantages in using CSS instead of tables. First of all, you prevent the clutter. Everything is nicely organised in a central CSS file, which makes things far more readable and understandable. That also unveils the second benefit: a small footprint. Eddy certainly Size does matter it. OK, you might consider that it's not really needed with all the broadband connections these days, but not everybody has broadband available and many among us still have to manage it with a modem.
Can everything can be done with CSS. It didn't meet any occurrence where it couldn't be done. Yes, one sometimes needs to be very inventive with it in order to accomplish things, but nothing is unfeasible. Does this mean that tables are taboo? Certainly not. You're still free to use them or you can opt for a mixture like on the SDN site. But at least you are aware that things can be done otherwise.
2 Comments
