position:absolute and left properties 1

[blues77]

I need a way of centering a div tag in a table cell using CSS. I don't want to use left:50% or specify the pixels becuase i want to remain in it's proper position when it is resized and also look appropriate at different resolutions. I need to incorporate the Position:absolute in the div tag because i'm using it as a cascading menu and i want it to be covered up and display a menu of option when the mouse is rolled over it. It doesn't seem to work unless i use position:absolute. If i omit position:absolute the menu options appears below the menu. if you have any advice i'd love to hear from you thanks!!

 

[mithrilhall]

Try putting this in the body of the html document:


<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!-- //This is for centering the layer
if (document.all)
{
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
else
{
winW = window.innerWidth;
winH = window.innerHeight;
}
document.writeln('<STYLE TYPE=&quot;text/css&quot;>');
document.writeln('<!--');
document.writeln('#main {Position: absolute; Background-color: silver; left:'+(winW/2-720/2)+'; top:'+ 0 +';}');
document.writeln('-->');
document.writeln('</STYLE>');
//-->
</SCRIPT>

The 720 is the width of your div tag (change as needed).
The name of the div in my example is <Div id=&quot;main&quot;>

 

[blues77]

can you explain to me what this script is doing? I'm not farmilar with document.all, document.body.offsetWidth, window.innerWidth, or the left:'+(winW/2-720/2)+' notation you used.

 

[mithrilhall]

document.all is what older versions of Internet Explorer used, rather than what they use now (getElementByID).

document.body.offsetWidth is getting the width of the screen and the

left:'+winW/2-720/2)+' is assigning a value to the left style (to center it).

winW is holding the width and you divide that by 2 then divide the width of your div (in my example my div is 720 pixels wide) by 2 and then subtract this number from the first calculation to give you the center of the screen. You'll want to swap out the 720 I have with the width of your div tag.

 

[blues77]

can you explain to me why there are + signs around the left property?

thanks

 

[mithrilhall]

The plus signs concatenate the statement.

left:'+winW/2-720/2)+'

Since this is javascript that is writing this you have:

document.writeln('#main {Position: absolute; Background-color: silver; left:'+(winW/2-720/2)+'; top:'+ 0 +';}');

The + sign lets you step out of the code and perform an arithmatic calcultation in this example and then inserts it back into the javascript. I'm not sure that made sense or if I explained it correctly. ====================================
I love people. They taste just like
chicken!