nukeitout said:
I used to use tables and then use xx% for the width of the columns. that way the layout (an invisible table with no borders) would stretch to accomodate any screen size.
For example
<html><body>
<table border=0 width=100%>
<tr>
<td>header code</td>
</tr>
<tr colspan=2>
<td width=25%>Left BAR CODE</td>
<td width=75%>Main Window Code</td>
</tr>
</table>
</body></html>
i'm going to attempt to dispel the notion that css is difficult by using your example and adding css tags
<html>
<style type='text/css'>
table1 {
position:absolute;
top:25px;
left:50px;
z-index:0;
}
</style>
<body>
<table class='table1' border=0 width=100%>
<tr>
<td>header code</td>
</tr>
<tr colspan=2>
<td width=25%>Left BAR CODE</td>
<td width=75%>Main Window Code</td>
</tr>
</table>
</body></html>[/QUOTE]
in this example, i've added a style tag to the header of the HTML doc. table1 is the name of the class of the style. position:absolute; is the first tag. It means that table one will be positioned using a coordinate regardless of window size or resolution. meaning that at a low resolution, it's still at it's position relative to the resolution.
top:25px; means that the element (table1) will be positioned 25 pixels from the top border of the window.
left:50px; means that table1 will be 50pixels from the left border of the window.
z-index:0; refers to css's ability to layer elements. What it means is that table1 resides in the "0" layer. you could make it reside in z-index:50; if you wanted. You could layer 1000 images over 1000 tables all in their respective z-index. but that would be confusing. So, you can opt to include a z-index or not, it doesn't matter.
What this means is that if a window is resized, the element remains in a fixed position, whereas with HTML, the table can become jumbled if the % are off. ESPECIALLY if you used fixed widths (which nuke has not).
But.....making HTML elements actually resize to fit different windows is a complex script. here is our minmax.js file in text.
// minmax.js
/*@cc_on
@if (@_win32 && @_jscript_version>4)
var minmax_elements;
minmax_props= new Array(
new Array('min-width', 'minWidth'),
new Array('max-width', 'maxWidth'),
new Array('min-height','minHeight'),
new Array('max-height','maxHeight')
);
// Binding. Called on all new elements. If <body>, initialise; check all
// elements for minmax properties
function minmax_bind(el) {
var i, em, ms;
var st= el.style, cs= el.currentStyle;
if (minmax_elements==window.undefined) {
// initialise when body element has turned up, but only on IE
if (!document.body || !document.body.currentStyle) return;
minmax_elements= new Array();
window.attachEvent('onresize', minmax_delayout);
// make font size listener
em= document.createElement('div');
em.setAttribute('id', 'minmax_em');
em.style.position= 'absolute'; em.style.visibility= 'hidden';
em.style.fontSize= 'xx-large'; em.style.height= '5em';
em.style.top='-5em'; em.style.left= '0';
if (em.style.setExpression) {
em.style.setExpression('width', 'minmax_checkFont()');
document.body.insertBefore(em, document.body.firstChild);
}
}
// transform hyphenated properties the browser has not caught to camelCase
for (i= minmax_props.length; i-->0
if (cs[minmax_props
[0]])
st[minmax_props[1]]= cs[minmax_props[0]];
// add element with properties to list, store optimal size values
for (i= minmax_props.length; i-->0 {
ms= cs[minmax_props[1]];
if (ms && ms!='auto' && ms!='none' && ms!='0' && ms!='') {
st.minmaxWidth= cs.width; st.minmaxHeight= cs.height;
minmax_elements[minmax_elements.length]= el;
// will need a layout later
minmax_delayout();
break;
} }
}
// check for font size changes
var minmax_fontsize= 0;
function minmax_checkFont() {
var fs= document.getElementById('minmax_em').offsetHeight;
if (minmax_fontsize!=fs && minmax_fontsize!=0)
minmax_delayout();
minmax_fontsize= fs;
return '5em';
}
// Layout. Called after window and font size-change. Go through elements we
// picked out earlier and set their size to the minimum, maximum and optimum,
// choosing whichever is appropriate
// Request re-layout at next available moment
var minmax_delaying= false;
function minmax_delayout() {
if (minmax_delaying) return;
basically, all elements referencing the min max will have their attributes defined by the script.
it's tough.. now imagine designing websites that will automatically detect what browser you're using and tailor it's presentation to your browser.
Like some site detect a PDA browser and reformat to fit a PDA screen.
It's pretty nutty. but CSS will take your sites to a new level of presentation that you may like. here's a reference
http://www.w3schools.com/css/default.asp
