A ver si te puedo ayudar.
Deberías sacar de la página, en la medida de lo posible claro, todo lo que tenga que ver con el diseño, es decir, el estilo que tienes para el div y todo lo que tiene tanto el "body" como la tabla (fondos, colores, alineación, márgenes, etc) y ponerlo en un archivo CSS (también hay infomación en el curso). Aunque esto no es imprescindible, si te quedaría un archivo mucho más legible del tipo:
<html>
<head>
<title>sos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/estilos/miestilo.css" media="all" rel="StyleSheet" type="text/css">
</head>
<body>
<div id="apDiv1">este es el DIV</div>
<table id="Table_01">
<tr>
<td colspan="3">
[img]images/sos_01.gif[/img]</td>
</tr>
<tr>
<td rowspan="2">
[img]images/sos_02.gif[/img]</td>
<td>
[img]images/sos_03.gif[/img]</td>
<td rowspan="2">
[img]images/sos_04.gif[/img]</td>
</tr>
<tr>
<td>
[img]images/sos_05.gif[/img]</td>
</tr>
</table>
</body>
</html>
Y a parte un archivo css (en este ejemplo se llamaría "miestilo.css" y estaría en la carpeta "estilos") con todo lo que tiene que ver con la presentación, en este caso sería algo así:
body {
bgcolor:#FFFFFF;
leftmargin:0;
topmargin:0;
marginwidth:0;
marginheight:0;
}
#table_01 {
width:800px;
height:600px;
border:0px;
align:center;
cellpadding:0;
cellspacing:0;
}
#apDiv1 {
position:absolute;
left:141px;
top:99px;
width:349px;
height:294px;
z-index:1;
background: red;
}
Con esto no cambia nada del funcionamiento, pero a la hora de buscar fallos es mucho más fácil.
Según tus estilos has puesto una posición absoluta al div, por lo que siempre aparecerá igual, independientemente de cómo hayas puesto la tabla (centrada o no).
En mi opinión, lo mejor sería hacer las siguientes acciones:
- Definir un Div que contenga todo (tanto la tabla como el div que has creado).
- Centrar este nuevo div (y no la tabla).
- No especificar una posición absoluta salvo que sea imprescindible, ya que no todo el mundo tiene las mismas resoluciones de pantalla. A modo de prueba he cambiado la posición del div por la siguiente:
position: relative;
top: -500px;
left: 200px;
Con estas cosas lo mejor es jugar hasta que te salga como quieres. Además en mi prueba la definición del div la he hecho después de la tabla y no antes.
Bueno ha sido un poco largo, pero espero que te sirva.
