Horizontal & Vertical Centering?

[Rock]

I've added a Javascript to my webpage that automatically generates a popup box (just a little message) when you first visit the website. I've tried fooling around with the coding but can't seem to get the thing centered both horizontally & vertically so that no matter whoever visits the website it's always perfectly centered. I consider myself... well... intermediate when it comes to CSS and XHTML, but I'm either having the biggest brain fart of my life or something's just flat out wrong :confused:. Here's the code in it's entierty:



<center>
<div id="showimage" style="width: 2px; position: absolute; top: 50%; height: 100px">
<table cellspacing="0" cellpadding="2" width="450" bgcolor="#000080" border="0">
<tbody>
<tr>
<td align="center" width="100%">
<table height="36" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td id="dragbar" style="cursor: pointer" width="100%" onMousedown="initializedrag(event)"><ilayer onSelectStart="return false" width="100%"></ilayer><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"></layer><font face="Verdana" color="#ffffff"><strong><small><center>Attention All Visitors!</center></small></strong></font></td>
<td style="cursor: hand"><a onClick="hidebox();return false" href="#"><img height="14" alt="" width="16" border="0" src="close.gif" /></a></td>
</tr>
<tr>
<td style="padding-right: 4px; padding-left: 4px; padding-bottom: 4px; padding-top: 4px" width="100%" bgcolor="#ffffff" colspan="2"><font color="#000000"><center><img alt="" src="limewire.png" /><br />
- <strong>WARNING</strong> -<br />
This information has been removed from what it actually says on the website lol. Ignore me!</center></font></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</center>


I just copy pasted the entire HTML part of the popup box. If need be, I can post the Java part but it has nothing to do with the box's attributes (position, height, width, etc) so I don't see why I should post that part. And since I did just copy & paste, ignore the message text :p .

[Nile]

Looks like using margin: 0 auto is better:


<script type="text/javascript">
//Javascript: DragoNero
var changeA = function(){
document.getElementById('div').style.zIndex="";
document.getElementById('div1').style.zIndex="-1";
}
var changeB = function(){
document.getElementById('div').style.zIndex="-1";
document.getElementById('div1').style.zIndex="";
}
</script>
<style type="text/css">
#div {
width: 142;
height: 142;
border: 1px solid #000;
background: #FFFFC9;
position: absolute;
left: 50%;
font-family: georgia;
}
#div1 {
width: 142;
height: 142;
border: 1px solid #000;
background: #D1F1FF;
margin: 0 auto;
font-family: georgia;
position: absolute;
left: 45%;
}
</style>
<div id="div" onmouseover="changeA()">Position: absolute</div>
<div id="div1" onmouseover="changeB()">Margin: 0 auto</div>

Then you can use

[Rock]

Alright, bare with me. Which part of that code that you posted should I use? The reason I ask is because I'd rather leave the Java/HTML coding the way I have it setup (it's less confusing to me.. for some reason). Is there no code snippet I can add to the original code I posted that will get the job done? Because from what it looks like to my newbie eyes you didn't use any of the code I posted haha.

As I said, bare with me. A lot of my coding (not just on the popup box) was learned and based off of tutorials because I'm still no expert at this stuff. Thanks very much for your help.

[Nile]

Ok, what I mean to do is replace:


<div id="showimage" style="width: 2px; position: absolute; top: 50%; height: 100px">

With:


<div id="showimage" style="width: 2px; margin: 0 auto; height: 100px">


But that's not working... That's as far as I go.

[Rock]

Alright I've replaced the snippet of coding, but it still isn't working. I've had to of added something that is interferring with another code that's not allowing this to work... but I just don't know what it could be :confused: .

Here's the link to my website --> http://www.limewirepro.110mb.com. I hope DynamicForums does not ban me and it's members reject me because of what my website is all about. I realize it's wrong, but I enjoy what my website has become regardless of what is hosted there.

But back to on-topic: it's that popup warning box I'm trying to center. I dunno if seeing what I'm trying to center will help or not, but hopefully it will.

[jscheuer1]

See:

http://www.wpdfd.com/editorial/thebox/deadcentre3.html

Basically if you know the width and the height of the element, you may position it absolutely, make the top and left 50%, and set the top margin to negative 1/2 of the height, and set the left margin negative 1/2 of the width.

This will center it on the page or in a parent element that has relative or absolute positioning.