Problema al cargar css.

oNefl0w189 · #1 (**permalink**) 08/11/2011, 08:16

Buenas tardes, tras un tiempo inactivo vuelvo para preguntaros una duda que me ha surgido y la verdad es que no entiendo bien porque..

Estoy creando una página en la que cargo los estilos de la forma habitual

Código:

<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">

y la página me funciona correctamente, carga los estilos etc..
pero el caso es que he implementado un sistema AJAX para cargar toda la web en una misma página, dejando la cabezera y el pie de página estático y cargando en un Div el contenido, y cuando me carga la página en el Div no me cargan los estilos.

He probado a poner los estilos en el index.html en el que esta la cabecera y el pie de página, a cargarlos en el inicio.html (página que se carga en el Div 'contenido' de la página), y a cargarlos en los dos sitios.. pero no me funciona, me muestra todo sin estilos :S.

Alquien sabe que puedo hacer, o que puede ser?
Os dejo tambien el script Ajax por si tubiese que modificar algo ahí.

Código:

// AJAX Para Cargar Páginas dentro de un Div.

function Carga(url,id)
{
//Creamos un objeto dependiendo del navegador
var objeto;
if (window.XMLHttpRequest)
{
//Mozilla, Safari, etc
objeto = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//Nuestro querido IE
try {
objeto = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try { //Version mas antigua
objeto = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!objeto)
{
alert("No ha sido posible crear un objeto de XMLHttpRequest");
}
//Cuando XMLHttpRequest cambie de estado, ejecutamos esta funcion
objeto.onreadystatechange=function()
{
cargarobjeto(objeto,id)
}
objeto.open('GET', url, true) // indicamos con el método open la url a cargar de manera asíncrona
objeto.send(null) // Enviamos los datos con el metodo send
}
function cargarobjeto(objeto, id)
{
if (objeto.readyState == 4) //si se ha cargado completamente
document.getElementById(id).innerHTML=objeto.responseText
else //en caso contrario, mostramos un gif simulando una precarga
document.getElementById(id).innerHTML='<img align="center" src="./images/loader.gif" alt="cargando" />'
}

Y esta es la manera de llamarlo en el html

Código:

<a href="javascript:Carga('contacts2.html', 'contenido');">Contacto</a>

Un saludo.

Mauricio Acosta Vene · #2 (**permalink**) 08/11/2011, 11:03

Hola,

Ya hiciste de cargar "inicio.html" directamente. Asi descartas que sea problema de rutas.

En inicio.html debes cargar las hojas de estilo, ya que ajax lo que hace es cargar la pagina dentro de la principal (mas o menos como un iframe).

oNefl0w189 · #3 (**permalink**) 08/11/2011, 12:36

te dejo un ejemplo de el contenido de las páginas:

index.html

Código:

!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/cargar.js"></script>
</head>
<body id="page1">
<div class="main">
<!-- header -->
		<header>
			<div id="logo_box">
				<h1><a href="index.html" id="logo">Grupo A.S.I.R<span>Tu soporte informatico a medida</span></a></h1>
			</div>
		</header>
<!-- / header -->
</div>
<div id="contenido">
</div>
<div class="main">
<!-- footer -->
	<footer>
		<div class="under2"></div>
		<div class="wrapper font_size">
			<div class="pad">
				Reservados todos los derechos. Creado por David Fadrique. 
				Web perteneciente a Grupo Asir S.L.
			</div>
		</div>
	</footer>
<!-- / footer -->
</div>
</body>
</html>

Como se puede observar, esta la cabezera, y el footer (pie de pagina), y entre medias el DIV llamado 'contenido' en el que se carga la pagina.

inicio.html

Código:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>	
<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script>
<!--[if lt IE 9]>
	<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
	<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page1">
<div class="body2">
	<div class="main">
<!-- content -->
		<section id="content">
			<div class="marg_top wrapper">
				<article class="col1">
					<div class="box1_out">
						<div class="box1">
							<h2>Mantenimiento</h2>
							<p class="wrapper pad_bot1">
								Tenemos la solución<br>para el mantenimiento<br>de tu equipo
							</p>
							<a href="#" class="button"><span><span>+ Info</span></span></a>
							<img src="images/img1.png" class="img" alt="">
						</div>
					</div>
					<div class="box1_bot"><div class="box1_bot_left"><div class="box1_bot_right"></div></div></div>
				</article>
</div>
		</section>
<!-- / content -->
	</div>
</div>
</body>
</html>

Como ves, tengo cargados los scripts en los dos sitios, y aún así sigue sin funcionar.
El problema de rutas queda descartado, estan en la raiz y los scripts cuelgan de la carpeta js.. eso esta Ok.

Gracias por tu ayuda, y a ver si lo resolvemos.. ^^

Mauricio Acosta Vene · #4 (**permalink**) 08/11/2011, 13:55

Hola,

Si rutas esta todo Ok, entonces el problema es en la carga del html, o sea con el AJAX.

Antes de la carga del html en el div, colocale un alert (no importa si deja de funcionar el script momentaneamente) de la informacion que se coloca, y compara esto con el codigo del html. Tal vez sea que no este cargando bien por alguna "basura" que haya por ahi.

Tambien haz la prueba con algo mas sencillo (por ejemplo, colocar el estilo solamente a un texto) para ir descartando cosas.

oNefl0w189 · #5 (**permalink**) 08/11/2011, 15:04

Al final, voy a realizarlo en PHP ya que he probado un método creo que más eficaz, y que me carga los estilos.

De todas maneras, voy a probar el Alert, mas que nada por curiosidad a ver que es lo que me impide que se carguen los estilos :S

Un saludo, y gracias Mauricio.