Centering CSS layers on resize

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
$var
Forum Contributor
Posts: 317
Joined: Thu Aug 18, 2005 8:30 pm
Location: Toronto

Centering CSS layers on resize

Post 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.
ryanlwh
Forum Commoner
Posts: 84
Joined: Wed Sep 14, 2005 1:29 pm

Post 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.
Last edited by ryanlwh on Thu Sep 15, 2005 10:40 pm, edited 1 time in total.
User avatar
andre_c
Forum Contributor
Posts: 412
Joined: Sun Feb 29, 2004 6:49 pm
Location: Salt Lake City, Utah

Post 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
timvw
DevNet Master
Posts: 4897
Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium

Post 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;
}
ryanlwh
Forum Commoner
Posts: 84
Joined: Wed Sep 14, 2005 1:29 pm

Post 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
User avatar
$var
Forum Contributor
Posts: 317
Joined: Thu Aug 18, 2005 8:30 pm
Location: Toronto

Post 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.
User avatar
$var
Forum Contributor
Posts: 317
Joined: Thu Aug 18, 2005 8:30 pm
Location: Toronto

Post 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?)
ryanlwh
Forum Commoner
Posts: 84
Joined: Wed Sep 14, 2005 1:29 pm

Post 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.
User avatar
$var
Forum Contributor
Posts: 317
Joined: Thu Aug 18, 2005 8:30 pm
Location: Toronto

Post 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?
ryanlwh
Forum Commoner
Posts: 84
Joined: Wed Sep 14, 2005 1:29 pm

Post 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.
User avatar
$var
Forum Contributor
Posts: 317
Joined: Thu Aug 18, 2005 8:30 pm
Location: Toronto

Post 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.
Post Reply