Thursday, December 24, 2009

How do I make my div objects centered in Myspace?

After toying with this damn style sheet for hours i decided to ask people here... http://www.myspace.com/Jezorama



I'm currently using mainly three divs, one that holds the menu, one for the flash video, and one for the .png image.



Im using css to position it 'position: absolute;' and i need to do this so that i can declare the objects at a specific amount of pixels away from the top, e.g. its 109px from top. And i dont know how to position it using CSS so that its centered on all monitor resolutions. When you look at it now, its using absolute, and percentage from the left... but theyre different percentages, 25% for the video, lef:18% for the menu div and lef:22% for the image i think.



This solves it for 1024x768 resolution and kind of looks centered at full screen, but when you resize the page or have it on a larger resolution it seems to be closer to the left of the page and not centered or in line. Simply throwing HTML center tags around the divs doesnt seem to do it .Any ideas?



How do I make my div objects centered in Myspace?

i've never messed with the percentages on my div layouts.



instead, i adjust the "margin-left" and "margin-top" numbers.



i've never had problems with my layouts shifting when i view it with different resolution monitors. they do shift a little bit (hardly noticeable) with different browsers though (internet explorer vs. firefox).



the settings for my divs are "position:absolute; left:50%; top:0%;"



to center the divs, i take the width of it, divide that number by 2, make the answer a negative number and plug it into the "margin-left".



for example:



width of div is 800px.



800px divided by 2 is 400px.



plug in negative (-) 400px into your "margin-left:###px".



not sure if this is what you're asking for exactly but feel free to email me if i need to reiterate.

No comments:

Post a Comment

 
pda