...

View Full Version : How do I center layers within the browswer window?



brownbag
03-03-2005, 07:11 PM
I found an extension in the Macromedia Exchange. I almost works perfect. The layer does not center until the page loads. It does this each time you go to a new page. Kind of hoaky. I don't think that the client is going to care for it. Thanks!!!!

chilipie
03-03-2005, 09:30 PM
Using my super-human ability to mind read, I have just downloaded your code, and am debugging it. I will then burn it on to a CD and send it to your home address, which I will find by telepathy.

rmedek
03-03-2005, 09:51 PM
I found an extension in the Macromedia Exchange. I almost works perfect. The layer does not center until the page loads. It does this each time you go to a new page. Kind of hoaky. I don't think that the client is going to care for it. Thanks!!!!

I don't either. Your welcome!!!

(hahahahahahahehehehehe heh ah hah he erh ehhhh ummmmm. Eh. Sorry, I crack myself up)
Post some code, or better yet, a link to the page.






Using my super-human ability to mind read, I have just downloaded your code, and am debugging it. I will then burn it on to a CD and send it to your home address, which I will find by telepathy.Hey, you stole that one from Hemebond, man... ;)

chilipie
03-03-2005, 09:54 PM
Hey, you stole that one from Hemebond, man... ;)
C'mon, it's called recycling, dude...Get with the times man, you're like livin' in the past... Doooooooooooood... :D

brownbag
03-03-2005, 10:36 PM
The URL is www.timelinesantiques.com.

chilipie
03-03-2005, 10:47 PM
Seems fine to me (FF 1.0.1, Win. XP Pro. SP2). Anyway, what's with all the crazy JS? Try searching the forums for "vertical centering", and there should be a wealth of information available...

rmedek
03-03-2005, 10:51 PM
First of all, get rid of all that javascripty-centering-crazy-talk.

Second of all, find whatever <div> is holding the website together (I only looked at it for a sec, is it #layer1? It's #layer3 in the other pages), and get rid off all that positioning applied as an inline style.

Third, use this:


#layerwhatever {
position: relative;
top: 50%;
margin-top: -???px; /* replace the ??? with half the height of the div, ex: 200px high would be 100px */
margin: 0 auto;
}


This places the div in the center of the screen. Then put the other divs inside of it.

Hope this helps...

brownbag
03-03-2005, 10:53 PM
Thanks!

rmedek
03-03-2005, 10:56 PM
Nothin' to it (but to do it) :)

qwan
06-05-2006, 10:34 PM
First of all, get rid of all that javascripty-centering-crazy-talk.

Second of all, find whatever <div> is holding the website together (I only looked at it for a sec, is it #layer1? It's #layer3 in the other pages), and get rid off all that positioning applied as an inline style.

Third, use this:


#layerwhatever {
position: relative;
top: 50%;
margin-top: -???px; /* replace the ??? with half the height of the div, ex: 200px high would be 100px */
margin: 0 auto;
}


This places the div in the center of the screen. Then put the other divs inside of it.

Hope this helps...
I tried it it works great but only one problem.
I used Absolute positioning instead of relative like you mentioned.
I missed it so then when i changed it to relative it just went totally to the right in dreamweaver design view. In firefox it was displaying the same way but in IE it went way to the right.
Are you sure you have to use relative positionin please confirm
Thank you so much
I never knew it was so simple and have always used tables for designs that needed to be centered.
Please confirm the above

tinsol
01-27-2007, 01:15 PM
#layerwhatever {
position: relative;
top: 50%;
margin-top: -???px; /* replace the ??? with half the height of the div, ex: 200px high would be 100px */
margin: 0 auto;
}

try this with absolute divs- for instance i have a "wrapper" div around all my other divs and they are all absolutely positioned. So the wrapper ends up starting in the center of the page and continuing off the page. Solution set the wrapper div with negative margins instead of positive. Same formula as above but negative values.
#layerwhatever {
position: relative;
top: 50%;
margin-top: -???px; /* replace the ??? with half the height of the div, ex: 200px high would be -100px */
margin: 0 auto;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum