Sample Layout Page

This page shows off some reaully useful stuff. It shows how a nice layout giving a gutter around the page, plus header and an "activity bar" on the right. Notice how it re-sizes nicely.

To make the table re-size propery in IE and to get the margin around the <html> tag - you have to specify the following doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This forces it to obey the rules of CSS. probably means that other stuff works nice too.
Notice what happens when you change the font size (CTRL + MOUSE_WHEEL or from the view menu). Everything sizes. That is because of the following in the stylesheet...
```
	* {font-size: 100%;}
	h1 {font-size: 2em;}
	h2 {font-size: 1.5em;}
	h3 {font-size: 1.33em;}
	h4 {font-size: 1.1em;}
	h5 {font-size: 0.9em;}
	h6 {font-size: 0.75em;}
	
```
One problem it has is under IE - if you make the window too small the main div (where this writing is) keeps collapsing even though the min-size attribute has been reached. damned annoying!! I cant seem to work out a way of making this div stay the rigth size.
The home page: This took quite a bit of working out. Basically the problem was that i wanted nice links <a>'s that lit up when you hovered over them and were centered in the middle of the page with nice borders. So the first trick is to make the links look like boxes. This is quite easy to do - create a div to contain the links. and just pop the links in there. this can have the id of "links". the styles for this are : div#links a{ padding : 5px; text-decoration:none; display : block; text-align: center; font: bold 1em sans-serif; padding: 5px 10px; margin: 0 0 1px; border : 2px solid #9900FF; text-decoration: none; color: #000000; background: #FFFFFF; margin-bottom:1em; } div#links a:hover { color: #FFFFFF; background : #9966FF; font-weight:bold; margin-bottom:1em; }
notice that we set the display:block; property. This causes the link to fill out its available area and behave more like a div.

Sweet, so now it displays them and hovers ok but they are stretched right accross the screen!! the solution to this i naively thought would be to change the margin / width of the links div. Oh no! as soon as you change the width of it in this manner, you loose the behaviour where the whole area (block) is the link!. To fix this i found that simply enclosing the links div inside another one (i called it linkPanel) and declaraing a style for it worked. NO idea why. This is worse under IE than Mozilla(of course) which behaves quite reasonably.

Column1	Column2
23	sdfsdc sdc sd

planet-ix.com

Sample Layout Page

Navigation