[RESOLVED] Tables in CSS questions

**Nionicle** · 04-10-2007, 04:24 PM

I just bought me my first domain name ever.
And some hosting to go with it.
wahoo...
Now I can focus on that code some more.
I am interested in what Catbert303 said.
and his link.
http://www.quirksmode.org/viewport/compatibility.html
call me a noob( i hope that isn't too derogatory of a term for this board ;] )
How do I add that into what I have now.

www.mentaldeficit.com

Thanks in advance and for the tons of help already provided.

**catbert303** · 04-11-2007, 08:29 AM

Hi,

Here's a quick (not massively tested

) example:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Columns Test</title>
<style type="text/css">
* {
  margin: 0; padding: 0;
}

html, body {
  width: 100%; height: 100%;
}

#left, #right {
  height: 100%;
  float: left;
}

#centre {
  width: 800px; height: 100%;
  float: left;
}

#left {
  background: #f00;
}

#centre {
  background: #0f0;
}

#right {
  background: #00f;
}

</style>

<script type="text/javascript">

// from http://www.quirksmode.org/viewport/compatibility.html
function pageDimensions() {
    var x, y;
    if (self.innerHeight) { // all except Explorer
        x = self.innerWidth;
        y = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        x = document.documentElement.clientWidth;
        y = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
        x = document.body.clientWidth;
        y = document.body.clientHeight;
    }
    return {width: x, height: y};
}

function resizeColumns() {
    var dim = pageDimensions();
    var left = document.getElementById('left');
    var right = document.getElementById('right');
    // work out how much space each side columns should fill
    var sideColWidth = (dim.width - 800) / 2;
    if (sideColWidth < 1) {
        // no room for the side columns so remove them
        left.style.display = right.style.display = 'none';
    } else {
        left.style.display = right.style.display = 'block';
        left.style.width = right.style.width = sideColWidth + 'px';
    }
}

window.onload = resizeColumns;
window.onresize = resizeColumns;

</script>
</head>
<body>
<div id="left">

</div>
<div id="centre">
content here
</div>
<div id="right">

</div>

</body>
</html>

**Nionicle** · 04-13-2007, 06:02 PM

edit*
still looks funny in IExploder(grrr)

Questions... I have so many of them. Makes me feel so dependent on other for answers when I can't see them right away.
Anywho... I was afraid to figure how to incorporate your example into my code.
But I have to learn =)

This seems to work.

Code:

 <html>

<head>

<title>Mental Deficit-A personal portfolio of Michael Abernathy</title>

</head>

<style type="text/css">

	body {
		margin: 0px 0px 0px 0px;
		padding: 0px;
		width: 100%;
		height: 100%;
		}

	#mainleft {
		height:100%;
		float:left;
		background: url(BGL.jpg) repeat right; 
		}

	#maincenter {
		width:800px;
		height:100%;
		float:left;
		background: url(BGM.jpg) repeat; 
		}
	
	#mainright {
		height:100%;
		float:right;
		background: url(BGR.jpg) repeat; 
		}

</style>

<script type="text/javascript">

function pageDimensions() {
    var x, y;
    if (self.innerHeight) { // all except Explorer
        x = self.innerWidth;
        y = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        x = document.documentElement.clientWidth;
        y = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
        x = document.body.clientWidth;
        y = document.body.clientHeight;
    }
    return {width: x, height: y};
}

function resizeColumns() {
    var dim = pageDimensions();
    var left = document.getElementById('mainleft');
    var right = document.getElementById('mainright');
    // work out how much space each side columns should fill
    var sideColWidth = (dim.width - 800) / 2;
    if (sideColWidth < 1) {
        // no room for the side columns so remove them
        left.style.display = right.style.display = 'none';
    } else {
        left.style.display = right.style.display = 'block';
        left.style.width = right.style.width = sideColWidth + 'px';
    }
}

window.onload = resizeColumns;
window.onresize = resizeColumns;

</script>

<body>

<div id="mainleft">
</div>
<div id="maincenter">
</div>
<div id="mainright">
</div>

</body>

</html>

I haven't seen any problems with this code. So I am guessing it is right.
But maybe a more trained eye would see something?

I can't say thanks enough guys!

P.S. I came up with mental deficit randomly and out of desperation for a domain name... I am started to think it fits me perfectly. =)

**Nionicle** · 04-13-2007, 06:41 PM

/cry
/cry
why is something simple made so difficult.

I think I am going to just have to have a different background image
that way I can use just plain html tables.

sigh i hate giving up

Thread: [RESOLVED] Tables in CSS questions

Thread Tools

Display

I am back.

So I was afraid...

Posting Permissions