website design guidelines for large 16:9 format LCD screens

Read this question and all replies to it:

http://archivist.incutio.com/viewlist/css-discuss/85214

and check out these templates:

http://siteframe.org/p/the_widescreen_template_set

In general, it is much easier to design a "one column" website which works in both normal and widescreen monitors, rather than a "three column" one with lots of floats. Of course, if at any point you think there is no CSS workaround, you can fallback to (although not much standard-compliant) table-layout.

Many thanks huji,

I see that my dreamweaver cs3 has this liquid single column template. That would be what you are referring to I believe ? I have attached the css code

The only thing I cant figure out about this is how to get the container to move down from the top of the screen. I have tried the top margin approach - this works ok for IE, but Firefox does not like it.  Not clear to me how this thing works vertically ?

In general then, I would develp my web page(es) within the liquid container. Can I use div tags within this container ? or do I need to have liquid containers within the liquid container &èé"à&è !!


Many thanks again for taking the time on this,

james

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
@charset "utf-8";
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.oneColLiqCtr #container {
	width: 80%;  /* this will create a container 80% of the browser width */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left;
}
.oneColLiqCtr #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
 
++++++++++++++++++

Select allOpen in new window

Yes, that is a typical example of one-column design, and it always fills 80% of width of window. During the design you should make sure you don't use very wide images though. They may look fine in wide-screen monitors, but ruin the layout in normal sized ones. Don't put any object wider than 700px and everything will be fine in most browsers.

and on the question of putting layers inside the conlumn container ? Will they retain their relative position with respect to the container on a wide screen ?

The problem with getting the container to move down from the top of the page in Firefox  - is there a workaround for that ??

many thanks again,

james