Page 1 of 1

Centering CSS layers on resize

Posted: Thu Sep 15, 2005 1:01 pm
by $var
Howdy,

Working on a site that uses CSS layers for the secondary nav.

Though not essential, it looks way better with the table in the center,
but of course, I need help getting onResize to position them properly.

No luck.

Here's whats I gots:

This is placed right after the meta-tags in the header:

Code: Select all

<script language = “JavaScript”>
<!-- Hide from non-JavaScript Aware Browsers
function centerLayout()
{
var layoutwidth = 800 // set the width of the page here

if (navigator.appName == 'Netscape') {
     var bodyWidth = self.innerWidth;
     var theOffset = ((bodyWidth - layoutWidth)/2) - 10;
     if (theOffset > 0) 
       document.layers['LayoutLYR'].left = theOffset;
    } else {
     var bodyWidth = document.body.offsetWidth;
     var theOffset = ((bodyWidth - layoutWidth)/2) - 10;
     if (theOffset > 0)
document.all.tags('DIV')['Layout.LYR'].style.left=theOffset;
    }
// End Hiding -->
</script>
And this is in the body tag:

Code: Select all

onLoad="MM_preloadImages(); centerLayout()" onResize = "centerLayout();"
Does anyone have any suggestions? Google has led me this far.

Posted: Thu Sep 15, 2005 2:26 pm
by ryanlwh
I don't think you need to use javascript for that

Code: Select all

div{margin-right:auto;margin-left:auto;}
should do the trick already...

EDIT: the above may not work well in IE.. for IE you need to put text-align:center in a wrapper container around the inner div, and then override the text-align in the inner div.

Posted: Thu Sep 15, 2005 5:42 pm
by andre_c
i think it does work (margin-left: auto; margin-right: auto) if you're using a doctype (standards mode on ie)
... at least i know it's worked for me in the past

Posted: Thu Sep 15, 2005 8:24 pm
by timvw
My website is the proof that you don't need a wrapper div or text-align: center :)

Code: Select all

body
{
	background-color: #B4CC8F;
	margin: 10px auto;
	width: 795px;
}

Posted: Thu Sep 15, 2005 10:39 pm
by ryanlwh
hehe... i think what andre_c said was correct... i had a page that didnt need the wrapper as well, but I saw lots of people having problem with that css technique on IE, so I added it there just in case someone have problems with it.

anyhow... I just hate IE

Posted: Fri Sep 16, 2005 7:52 am
by $var
i think that on my splash page, that I am going to put a firefox logo... just to be on the safe (and safer) side.
i still have put this in, but i'll let you know how it turned out.

Posted: Fri Sep 16, 2005 8:16 am
by $var
If anyone has a few minutes to look through the code on http://www.advantageboard.com/_1.php

Perhaps you could tell me if there is a conflict
in the way that the layers are written
so that the code isn't aligning the drop down
navigation to the center of the page.

Code: Select all

div { margin-right: auto; margin-left: auto; }
note that the first dropdown is aligned to the middle
and the rest are aligned for the left side...
neither are affected by the div code.

(perhaps it is in the wrong place?)

Posted: Fri Sep 16, 2005 1:05 pm
by ryanlwh
hmm you use overlib. maybe it overrides the setting for div styles.

Code: Select all

#l1 { position: absolute; z-index: 2; top: 68px; left: 250px; visibility: hidden; }
	#l2 { position: absolute; z-index: 2; top: 68px; left: 15px; visibility: hidden; }
	#l3 { position: absolute; z-index: 2; top: 68px; left: 15px; visibility: hidden; }
	#l4 { position: absolute; z-index: 2; top: 68px; left: 15px; visibility: hidden; }
Try setting the positions to "relative", removing "left", and put that margin auto into them. Can't guarantee as I don't know how overlib works.

Posted: Fri Sep 16, 2005 2:03 pm
by $var
so, i took out "left : " and made the attribute for "position : relative", and removed the overlib.
and now the layer sits at the bottom of the page at the left side of the page.

any other thoughts?

Posted: Fri Sep 16, 2005 2:15 pm
by ryanlwh
oh i didnt say take out overlib, i think you need overlib to do the mouseover effect. put overlib back in, and also try putting margin-left:auto and margin:right:auto into those ids.

Posted: Fri Sep 16, 2005 3:32 pm
by $var
naw, the overlib script is just something extra that makes fancy pops that move with the mouse over and image...
i have used it before with the same layers script... and without overlib as well.

i just took it out for the sake of simplification.