[RESOLVED] Tables in CSS questions

Trying to get maincenter centered. And mainleft and mainright to use the rest of the space that maincenter doesn't use.
And then how would I get a flash movie Inside of maincenter?
Thanks in advance.
Here is the code I am working with.

Code:

<html> <head> <title>Mike Owns?</title> <style type="text/css"> body { margin:0px 0px 0px 0px; padding:0px; } #mainleft { width:5%; height:100%; float:left; background:#fff; padding-bottom:10px; } #maincenter { width:800; height:100%; float:left; background: url(bg.jpg) repeat right; padding-bottom:10px; } #mainright { width:5%; height:100%; float:right; background:#fff; padding-bottom:10px; } </style> </head> <body> <div id="mainleft"> </div> <div id="maincenter"> </div> <div id="mainright"> </div> </body> </html>

Well when you set a width, always specify the unit. 800 should be 800px, probably. But for a three column layout I'd recommend: http://www.alistapart.com/articles/negativemargins/

Hmmm
I can't figure out how I would do it still.
I know that the center column I want to be 800 pixels wide.
And the side 2 columns to take up the rest of the area.
but I can't figure out how to do that.

This is the best I could come up with. Its not perfect, but it does what you asked for as best as possible in css. A better solution would be to either make them all constant width or make the center one expand.

The grey background is just for indication. I would set it background to transparent, so it looks like the body background is the background of the sidebars. Then I would give them a border-bottom.

Code:

html, body{ width: 100%; margin: 0; padding: 0; background: #99CCFF; min-width: 800px; } #mainleft{ padding: 10px; float: left; width: auto; background: #CCC; height: 500px; max-width: 20%; margin: 0 -20% 0 0; } #maincenter{ padding: 10px; border: 1px solid #000033; width: 400px; background: #FFF; height: 500px; margin: 0px auto 0px auto; position: relative; } #mainright{ max-width: 33%; padding: 10px; float: right; width: auto; background: #CCC; height: 500px; margin: 0 0 0 -20%; } <div id="mainleft"> this is to the left. If I keep writing it will eventually break. </div> <div id="mainright"> this is to the right </div> <div id="maincenter"> this is center </div>

Hmmm... This isn't quite turning out as expected.
I want my left bg to flow seamlessly with the bg in the center content
so i need my background in the left column to tile from the right.
Is there any other scripting language I can use to get the same effect without lots and lots of extra scripting?

you could use javascript.

document.getElementById("mainleft").style.width = (window.innerWidth-800)/2 + "px";

Ohhh man.
That rocks.
I am just not sure how to implement it.
Never really used anything but html before.

Hmmm I think I understand.
If not I will edit this post and let you =)

Code:

<html> <head> <title> <style> #maincenter{ padding: 10px; border: 1px solid #000033; width: 800px; background: #FFF; margin: 0px; position: relative; } </style> <script> function doload(){ document.getElementById("mainleft").style.width = (window.innerWidth-800)/2 + "px"; document.getElementById("mainright").style.width = (window.innerWidth-800)/2 + "px"; } </script> </head> <body onload="doload"> <div id="mainleft"> this is to the left. If I keep writing it will eventually break. </div> <div id="mainright"> this is to the right </div> <div id="maincenter"> this is center </div> </body> </html>

I havent tested it, but it should work.

Haha I just did that... pretty similar atleast.
I must thank you for all your help.
I hope you didn't mind my silly questions because I will probably have more :D

Code:

<html> <head> <title>Mike Owns?</title> <style type="text/css"> body { margin:0px 0px 0px 0px; padding:0px; } #mainleft { height:100%; float:left; background: url(BGL.jpg) repeat right; } #maincenter { width:800px; height:100%; float:left; } #mainright { height:100%; float:right; background: url(BGR.jpg) repeat right; } </style> </head> <body> <div id="mainleft"> </div> <div id="maincenter"> </div> <div id="mainright"> </div> <script> document.getElementById("mainleft").style.width = (window.innerWidth-800)/2 + "px"; document.getElementById("mainright").style.width = (window.innerWidth-800)/2 + "px"; </script> </body> </html>

I noticed I don't have your function doload

is it necessary? It seems to work for me without it.

No, I think you should be OK. Generally when working with a Javascript that modifies the page you want to wait until all the elements are loaded before trying to do anything:

For example if your script tried to do

Code:

document.getElementById("mainleft").style.width = (window.innerWidth-800)/2 + "px";

before the browser had downloaded the part of the document that contained the element 'mainleft' - you'd get errors because document.getElementById("mainleft") wouldn't return any useful value.

ihoss used a function which is called from the onload event handler on the body element to do this. It's generally a little "cleaner" to do it this way - you can keep your script separate from the HTML - but with simple scripts just placing them in the source after the elements they need to work with (as you have done) should be fine - if the browser has reached your script in the source it must've already seen the part where the elements were created.

Side note....

Actually, placing the script in the HTML actually does have one slight advantage too - the onload event waits until all elements in the page have been loaded (images and so on) so if you have lots of big images in the page using onload you might have to wait a while before the Javascript is run. Hence there could be a bit of a delay before the script corrects the column widths. Some modern browsers (e.g. Firefox and Opera) provide a DOMContentLoaded event which solves this problem very nicely but it's not supported everywhere.

Why isn't my code working in Internet Explorer?
www.nionicle.f2o.org

Ah, I think innerWidth and innerHeight were netscape inventions. They aren't supported in IE. Quirksmode has a script for getting the dimensions of the window across different browsers - http://www.quirksmode.org/viewport/compatibility.html

Can be all done in CSS.

There's two ways of doing this :

1. Know the width of each boxes and calculate, for EACH boxes, where they'll need to be placed (from center point). Can be a REAL pain if you have lots of boxes

or

(the one I suggest)
2. make ONE box that will contain everything and have it centered. Everything inside the container could be relative and you would still have your layout centered. If you're using graphics (movies, pics, etc) I suggest you do your boxes in fixed sizes rather that %% as it could mess up your layout big time.

here's the code to do a vertically centered box :

Code:

#container { position:absolute; /* HAVE to be */ width: 500px; /* size of the box */ left: 50%; /* centered but from left side of your box */ margin-left: -250px; /* 50% - half width of the box. if box is 800 then this line need to be 400, etc. */ }

make a little DIV for container with some text and you'll see, it works.

In case you want want to use 100% width anyway, here's what it will have to look like

Code:

#left { background: #CCCCCC; position: absolute; width: 25%; top: 0px; left: 0px; } #center { background: #000000; position: absolute; width: 50%; top: 0px; left: 25%;/* starts at the end of your left box */ } #right { background: #CCCCCC; position: absolute; width: 25%; top: 0px; right: 0px; }

Biggest inconvenient in this method is that width of each column have to be in %%, you couldnt have your center box set to 600px or 800px let's say and the sides in %%.

If you really want to use 100% of the width but have a fixed size for the centered box, than the easiest way would be tables (fixed size for the center cell).

Hey thanks for the reply 1407
But I think Catbert has what I am looking for right now.
Just not sure how to add it into my current code.

What Cathbert should work no problems, might need a little tweaking but that's about it. Only thing is this wouldnt fix your "left bg image" issue.

If by left bg image you mean the little blue bars on the sides of your layout, you could probably do it by having five columns instead of three.

Something along the lines of :

Code:

#leftside #leftside-bg (width will be the one of your left bg image - set up background for that column and you're good.) #center #rightside-bg (same as #leftside-bg, even if you don't use a bg image for the right side, keeps everything centered) #rightside

Something similar to this should work. You should have everything centered and it should also fix your issue with the left bg image.

Didnt test this out, but you get the general idea.

1407
Are you viewing with Internet Explorer?
I am only able to get it to look proper in Mozilla Firefox.
There should be a blue background not just a bar.
I am thinking the bar you are seeing is part of the #maincenter back ground.
The sides have a blue background that should flow seamlessly with maincenter.

Quote:

Originally Posted by Nionicle

1407
Are you viewing with Internet Explorer?
I am only able to get it to look proper in Mozilla Firefox.
There should be a blue background not just a bar.
I am thinking the bar you are seeing is part of the #maincenter back ground.
The sides have a blue background that should flow seamlessly with maincenter.

yes, with I.E. : I always try I.E. first as it is the browser that gives the most headaches when it comes to CSS.

On the link you posted everything seems to be left aligned, didnt look at your code though, only the layout.

If I understand correctly what you're saying, e.g. having a left bg that will go from right to left instead of left to right (sort of), I don't see how it will be possible without lots and lots of coding.

You might make it work, but the end result will look very bad in some resolutions, after all you don't really control the width of your left/right side since they depend ond the visitor.

Personally I would do one of the following

1. make my layout as small as possible, 1024 should be good, have everything of absolute values (left side of 100px, 200px, etc depending on your need)

2. kill the left bg image

3. detect resolution and redirect visitors to a diffferent page depending on resolution

There might be other solutions, but it's hard to say without knowing what the end result is supposed to look like.

I am back.

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.

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>

So I was afraid...

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. =)

/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