Estoy empezando en esto de armar webs en html y ajax y tengo un inconveniente con la carga de las distintas secciones mediante ajax y ya no se me ocurre qué más probar para solucionar la falla que hace.
Para ver que cuál es esta falla en concreto la dirección en donde está colgada la página es: http://www.belencimato.com.ar/armado/
Clickeando en "Nuestra Empresa" "Mi Reparación" y "Staff" que son los únicos links habilitados, se darán cuenta que va dejando un espacio en blanco a medida que vas clickeando de uno en otro, y ese espacio se va agrandando e incluso se pisan las secciones. También me desalinea las tablas ya que como podrán ver la información por ejemplo en la sección (mapa) de "Nuestra Empresa" aparece debajo y no al lado de la botonera.
El código que utilizo en el index es el siguiente:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>::: Bienvenidos a Electroservice on line :::</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #ccf3ff;
background-image: url(http://www.belencimato.com.ar/armado/media/images/a_tramafondo.gif);
background-repeat:repeat-x;
}
-->
</style>
<link rel="stylesheet" type="text/css" href="http://www.belencimato.com.ar/armado/styles/estilos.css" />
<script language="JavaScript" src="http://www.belencimato.com.ar/armado/scripts/basicfn.js" type="text/JavaScript"></script>
<script language="JavaScript" type="text/javascript" src="http://www.belencimato.com.ar/armado/scripts/swfobject.js"></script>
<script language="javascript" type="text/javascript" src="http://www.belencimato.com.ar/armado/scripts/ajax.js"></script>
</head>
<body onload="MM_preloadImages('http://www.belencimato.com.ar/armado/media/images/a_staff_des.jpg')">
<table id="topNegro+header" border="0" cellpadding="0" cellspacing="0" vspace="0" width="780px" align="center" valign="middle">
<tr width="780" height="12">
<td width="7px" height="12px" align="center" valign="middle">
<img src="http://www.belencimato.com.ar/armado/media/images/a_top_negro_izq.jpg" width="7" height="12" />
</td>
<td width="766" height="12" align="center" valign="middle" style=" background-color:#000000">
</td>
<td width="7px" height="12px" align="center" valign="middle">
<img src="http://www.belencimato.com.ar/armado/media/images/a_top_negro_der.jpg" width="7" height="12" />
</td>
</tr>
<!-- <tr>
<td align="center" colspan="3"> -->
</table>
<div id="flashcontent" align="center">
Se requiere Flash Player 8
</div>
<script type="text/javascript">
var so = new SWFObject("http://www.belencimato.com.ar/armado/media/swf/header.swf", "header", "780", "210", "8", "#CCCCCC");
so.addParam("wmode", "transparent");
so.write("flashcontent");
</script>
<table id="botonera" border="0" cellpadding="0" cellspacing="0" width="780px" align="center" valign="top">
<tr>
<td>
<a href="javascript:Ajax('pages/nuestraEmpresa.html', 'contenido')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nuestraempresa_btn','','http://www.belencimato.com.ar/armado/media/images/a_nuestraempresa_act.jpg',1)"><img src="http://www.belencimato.com.ar/armado/media/images/a_nuestraempresa_des.jpg" alt="nuestra empresa" name="nuestraempresa_btn" width="151" height="70" border="0" id="nuestraempresa_btn" align="middle" valign="center" /></a>
</td>
<td>
<img src="http://www.belencimato.com.ar/armado/media/images/a_separacion.gif" width="2" height="70" align="middle" valign="center" />
</td>
<td>
<!--<a href="servicios.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('servicios_btn','','media/images/a_servicios_act.jpg',1)">--><img src="http://www.belencimato.com.ar/armado/media/images/a_servicios_des.jpg" alt="servicios" name="servicios_btn" width="113" height="70" border="0" id="servicios_btn" align="middle" valign="center" />
<!--</a>-->
</td>
<td>
<img src="http://www.belencimato.com.ar/armado/media/images/a_separacion.gif" width="2" height="70" align="middle" valign="center" />
</td>
<td>
<!--<a href="pages/marcas.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('marcas_btn','','media/images/a_marcas_act.jpg',1)">-->
<img src="http://www.belencimato.com.ar/armado/media/images/a_marcas_des.jpg" width="106" height="70" border="0" name="marcas_btn" id="marcas_btn" alt="marcas" align="middle" valign="center" />
</a>
</td>
<td>
<img src="http://www.belencimato.com.ar/armado/media/images/a_separacion.gif" width="2" height="70" align="middle" valign="center" />
</td>
<td>
<a href="javascript:Ajax('pages/miReparacion.html', 'contenido')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mireparacion_btn','','http://www.belencimato.com.ar/armado/media/images/a_mireparacion_act.jpg',1)">
<img src="http://www.belencimato.com.ar/armado/media/images/a_mireparacion_des.jpg" width="141" height="70" border="0" id="mireparacion_btn" name="mireparacion_btn" alt="mi reparacion" align="middle" valign="center" />
</a>
</td>
<td>
<img src="http://www.belencimato.com.ar/armado/media/images/a_separacion.gif" width="2" height="70" align="middle" valign="center" />
</td>
<td>
<a href="javascript:Ajax('pages/staff.html', 'contenido')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('staff_btn','','http://www.belencimato.com.ar/armado/media/images/a_staff_act.jpg',1)">
<img src="http://www.belencimato.com.ar/armado/media/images/a_staff_des.jpg" width="133" height="70" border="0" id="staff_btn" name="staff_btn" alt="staff" align="middle" valign="center" />
</a>
</td>
<td>
<img src="http://www.belencimato.com.ar/armado/media/images/a_separacion.gif" width="2" height="70" align="middle" valign="center" />
</td>
<td>
<!--<a href="pages/contacto.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contacto_btn','','media/images/a_contactenos_act.jpg',1)">-->
<img src="http://www.belencimato.com.ar/armado/media/images/a_contactenos_des.jpg" width="126" height="70" border="0" name="contacto_btn" id="contacto_btn" alt="contacto" align="middle" valign="center" />
</a>
</td>
</tr>
<tr>
<td colspan = "11" height="1" bgcolor="#8eb3bc">
</td>
</tr>
</table>
<table id="contenido" border="0" cellpadding="0" cellspacing="0" width="780px" align="center" valign="middle" bgcolor="#FFFFFF">
<tr>
<td id="flashcontent2" width="484" height="251" align="center" valign="middle">
Se requiere Flash Player 8
</td>
<td>
<img src="http://www.belencimato.com.ar/armado/media/images/a_sep_txt_banner.gif" width="1" height="236" hspace="2" vspace="5" align="left" />
</td>
<td>
<img src="http://www.belencimato.com.ar/armado/media/images/a_bienvenido.gif" height="46" width="219" hspace="5" vspace="15" />
<p class="txt_home">
<br />
<br />
<br />
<br />
Aquí encontrará todo sobre nuestra empresa. Conocerá sobre nuestros servicios, repuestos, las diversas formas para contactarse con nosotros, las marcas oficiales con las que trabajamos, hasta los profesionales que forman nuestro equipo para brindarles día a día el mejor servicio y atención.
</p>
</td>
</tr>
</table>
<div id="pie">
<table border="0" cellpadding="0" cellspacing="0" width="780px" align="center" valign="top" bgcolor="#FFFFFF">
<tr>
<td colspan="2">
<span class="pie_tunda" align="center">
.............................................................................................................................................................................................................................................................
</span>
</td>
</tr>
<tr>
<td>
<span class="pie_legal">
2007 / www.electroservicesrl.com.ar / Prohibida su reproducción total o parcial.
</span>
</td>
<td align="right">
<span class="pie_tunda">
by <a href="http://www.estudiotunda.com.ar" target="_blank" style="text-decoration:none; color:#a4a4a4"><strong>Estudio Tunda</strong></a>
</span>
</td>
</tr>
<tr>
<td height="30" width="780" colspan="2" class="pie_cierre">
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var banner = new SWFObject("http://www.belencimato.com.ar/armado/media/swf/banner/main.swf", "banner", "469", "236", "8", "");
banner.addParam("wmode", "transparent");
banner.write("flashcontent2");
</script>
</body>
</html>
El archivo Ajax que utilizo tiene el siguiente código:
Código :
// Documento JavaScript
// Esta función cargará las paginas
function Ajax (url, id_contenedor)
{
var pagina_requerida = false;
if (window.XMLHttpRequest)
{
// Si es Mozilla, Safari etc
pagina_requerida = new XMLHttpRequest ();
} else if (window.ActiveXObject)
{
// pero si es IE
try
{
pagina_requerida = new ActiveXObject ("Msxml2.XMLHTTP");
}
catch (e)
{
// en caso que sea una versión antigua
try
{
pagina_requerida = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
else {
return false;
}
pagina_requerida.onreadystatechange = function ()
{
// función de respuesta
cargarContenido (pagina_requerida, id_contenedor);
}
pagina_requerida.open ('GET', url, true); // asignamos los métodos open y send
pagina_requerida.send (null);
}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarContenido (pagina_requerida, id_contenedor)
{
/*
0 - Sin inicializar, siempre será:
1 - Abierto (acaba de llamar open)
2 - Enviado
3 - Recibiendo
4 - A punto
*/
if (pagina_requerida.readyState == 4 && (pagina_requerida.status == 200 || window.location.href.indexOf ("http") == - 1)) {
document.getElementById (id_contenedor).innerHTML = pagina_requerida.responseText;
} else {
document.getElementById (id_contenedor).innerHTML = "Cargando...";
}
}
y dejo el de una de las secciones por las dudas que el problema esté ahi:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="http://www.belencimato.com.ar/armado/styles/estilos.css" />
<script language="JavaScript" src="http://www.belencimato.com.ar/armado/scripts/basicfn.js" type="text/JavaScript"></script>
</head>
<body onLoad="MM_preloadImages('http://www.belencimato.com.ar/armado/media/images/a_staff_des.jpg')">
<table id="titular+linea" border="0" cellpadding="0" cellspacing="0" width="780px" align="center">
<tr>
<th id="titular" height="56" align="center" valign="middle" bgcolor="#6a1d44" colspan="2" class="img_tit">
</th>
</tr>
<tr>
<td id="lineaBajoTitular" height="1" align="center" valign="middle" bgcolor="#98b9c2" colspan="2">
</td>
</tr>
</table>
<table id="botonera" border="0" cellpadding="0" cellspacing="0" align="left" style="caption-side:right">
<tr>
<td width="139px">
<a href="http://www.belencimato.com.ar/armado/.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('historia_btn','','http://www.belencimato.com.ar/armado/media/images/b_historia_btn_act.jpg',1)">
<img src="http://www.belencimato.com.ar/armado/media/images/b_historia_btn_des.jpg" width="139" height="26" border="0" name="historia_btn" id="historia_btn" alt="historia" align="middle" valign="center" />
</a>
</td>
</tr>
<tr>
<td width="139" height="1" style="background-color:#6a1d44">
</td>
</tr>
<tr>
<td>
<a href="http://www.belencimato.com.ar/armado/.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ubicacion_btn','','http://www.belencimato.com.ar/armado/media/images/b_ubicacion_btn_act.jpg',1)">
<img src="http://www.belencimato.com.ar/armado/media/images/b_ubicacion_btn_des.jpg" width="139" height="26" border="0" name="ubicacion_btn" id="ubicacion_btn" alt="ubicacion" align="middle" valign="center" />
</a>
</td>
</tr>
<tr>
<td width="139" height="1" style="background-color:#6a1d44">
</td>
</tr>
<tr>
<td>
<a href="http://www.belencimato.com.ar/armado/.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('galeria_btn','','http://www.belencimato.com.ar/armado/media/images/b_galeria_btn_act.jpg',1)">
<img src="http://www.belencimato.com.ar/armado/media/images/b_galeria_btn_des.jpg" width="139" height="26" border="0" name="galeria_btn" id="galeria_btn" alt="galeria" align="middle" valign="center" />
</a>
</td>
</tr>
<tr>
<td width="139" height="1" style="background-color:#6a1d44">
</td>
</tr>
<tr>
<td width="139" height="300" style="background-color:#e1d2da">
</td>
</tr>
</table>
<table align="right" style="float:right; position:relative" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="641" height="41" style="background-color:#f0e8ec">
<img src="http://www.belencimato.com.ar/armado/media/images/b_ubicacion_tit.jpg" height="17" width="79" hspace="20" vspace="5" align="middle" valign="center"/>
</td>
</tr>
<tr>
<td width="641" height="1" style="background-color:#6a1d44">
</td>
</tr>
<tr>
<td class="fondo_mapa" width="641" height="318" align="left" valign="top" style="background-color:#FFFFFF">
<p class="txt_direccion">
ELECTROSERVICE SRL<br /><br /><b>Dirección</b><br />Loren Ipsu 2548<br />Escobar<br />Provincia de Buenos Aires<br />Argentina
</p>
</td>
</tr>
</table>
</body>
</html>Les agradezco si me pueden ayudar con esto ya que hace varios días que estoy tratando de solucionarlo y no puedo.
Perdón por mi extensa explicación
