cargar css segun resolucion de pantalla

Hola, es mi primer post aqui. Agradezco los tutos, ya que me han servido para refrescar muchas cosas porque me quedé en Dreamweaver 3.... Pero tengo un problema con un script para cargar las hojas de estilo segun resolución.. Estoy usando Dreamweaver css5, he creado el sitio desde plantillas, y buscando por san google encontre el siguiente script:

<script type="text/javascript">
if (screen.width < 800 ) {document.write('<link rel="stylesheet" type="text/css" href="../css/style_mobil.css">');}
else if (screen.width >800 && screen.width <1080 ) {document.write('<link rel="stylesheet" type="text/css"href="../css/style980.css">');}
else if (screen.width > 1080 ) {document.write('<link rel="stylesheet" type="text/css" href="../css/style1260.css">');}
</script>

Este lo he colocado en el "head" de la plantilla y se transfiere a la paginas. El problema esta en que cuando se carga la pagina "index.html" no lo reconoce y me salen las paginas en html puro, sin estilos. Sin embargo si pongo todas la paginas dentro de una carpeta (../xxx/index.html) si respeta los estilos. Es mas, puse una pagina "index.html" en la raiz del sitio sin el script, con unicamente la palabra "entrar" enlazada a paginas (index2.html, dentro de una subcarpeta) que estas si contienen dicho script y funciona perfectamente...
Alguien me puede decir que estoy haciendo mal???? Lo pueden ver por ustedes mismos: http://www.juntadeandalucia.es/averroes/~41000776/ de paso pueden criticar... Es la web del colegio de mi hijo y va todo ad-honorem...
Muchas gracias.

Hola:

Supongo que tendrá que ver con la estructura de las carpetas y archivos, pues dices que al poner todo dentro de una carpeta sí se cargan los CSS.

Lo que ocurre es que la carpeta CSS esta una carpeta más arriba que donde se incluyen los CSS. Me imagino que no entendiste XD... a ver...

Supongamos que tienes esta estructura (public_html será la raíz del sitio; la carpeta que contiene todo el sitio web):

public_html/
  contacto/
    index.html
  css/
    style_mobil.css
    style980.css
    style1260.css
  index.html

<script type="text/javascript">
if (screen.width < 800 ) {document.write('<link rel="stylesheet" type="text/css" [COLOR="#FF0000"]href="../css/style_mobil.css"[/COLOR]>');}
else if (screen.width >800 && screen.width <1080 ) {document.write('<link rel="stylesheet" type="text/css" [COLOR="#FF0000"]href="../css/style980.css"[/COLOR]>');}
else if (screen.width > 1080 ) {document.write('<link rel="stylesheet" type="text/css" [COLOR="#FF0000"]href="../css/style1260.css"[/COLOR]>');}
</script>

Lo que esta en rojo es la ruta hacia los archivos. Toma la primera ruta como ejemplo: ../css/style_mobil.css. Para entender lo que pasa hay que desglosar esta ruta.

Copiando el código dentro de index.html, que esta dentro de contacto, el script se estará ejecutando dentro de contacto:

public_html/
  contacto/ [COLOR="#FF0000"]# Comienzas aquí[/COLOR]
    index.html
  css/
    style_mobil.css
    style980.css
    style1260.css
  index.html

1.- Lo primero que aparece en la ruta es ../, lo que significa "Sube una carpeta". Ya que estas dentro de la carpeta contacto, subir una carpeta te dejará dentro de la carpeta public_html:

public_html/ [COLOR="#FF0000"]# Ahora estas en public_html y tienes acceso directo a todas las carpetas.[/COLOR]
  contacto/
    index.html
  css/
    style_mobil.css
    style980.css
    style1260.css
  index.html

2.- Luego aparece css/, lo que significa "Entra a la carpeta css":

public_html/
  contacto/
    index.html
  css/ [COLOR="#FF0000"]# Ahora estas dentro de CSS y tendrás acceso directo a todos los archivos[/COLOR]
    style_mobil.css
    style980.css
    style1260.css
  index.html

3.- Ahora aparece el archivo style_mobil.css, lo que significa que estas abriendo el archivo y, dicho de manera simple, poniendo a disposición del archivo actual, todo lo que hay en él (style_mobil.css):

public_html/
  contacto/
    index.html
  css/
    style_mobil.css [COLOR="#FF0000"]# Ahora estas utilizando el archivo style_mobil.css[/COLOR]
    style980.css
    style1260.css
  index.html

Si te fijas, esto funciona bien en el index.html que esta dentro de contacto, pero no funcionará en index.html que esta directamente dentro de public_html:

public_html/
  contacto/
    index.html
  css/
    style_mobil.css
    style980.css
    style1260.css
  index.html [COLOR="#FF0000"]# Comienzas aquí.[/COLOR]

1.- ../, "sube una carpeta":

# Subir una carpeta implicaría salir de public_html, así que ahora estarías fuera de la misma.
public_html/
  contacto/
    index.html
  css/
    style_mobil.css
    style980.css
    style1260.css
  index.html

2.- css/, "entra en la carpeta css":

# Aquí hay algo malo, pues no encuentro la carpeta CSS :S.
public_html/
  contacto/
    index.html
  css/
    style_mobil.css
    style980.css
    style1260.css
  index.html

3.- style_mobil.css, "abre el archivo style_mobil.css". Esto último no se ejecutaría, pues si no existe la carpeta, el archivo mucho menos.

En conclusión, la solución esta en modificar la ruta de acuerdo al archivo en el que se encuentra el script. Si el archivo esta dentro de una carpeta, y esta dentro de public_html, entonces esta bien, pero si esta directamente dentro de public_html, la ruta será: css/archivo.css.

¿Se entiende?

Saludos.

A ver skaparate... si yo soy medio burro (puede que si) o no entendi nada o tal vez si, no se... jajaja. la cervezaaaa[:p]
No se si lo haz visto como esta pero igual lo pongo por escrito la estructura, total ya googlee tanto que mis ojos son triangulares ya...

Asi funciona porque el index.html es como dije, solo dice "entrar" y esta enlazado a una html dentro de /vinculos.... y estas si tienen el script.
Ahora, si a esa pagina index.html le incluyo el script, esa misma pagina sale sin estilos y todas las demas si...
que burrooooo!!

Pero si entro a la página, no hay ningún error. Yo veo el sitio con colores, bordes, etc.

Para ver los errores en Google Chrome, haz clic con el botón derecho sobre cualquier elemento del sitio, haz clic sobre inspeccionar elemento y luego haz clic sobre Console, allí podrás ver los errores. Ponlos en el foro :P.

Saludos.

skaparate escribió:Pero si entro a la página, no hay ningún error. Yo veo el sitio con colores, bordes, etc.

Para ver los errores en Google Chrome, haz clic con el botón derecho sobre cualquier elemento del sitio, haz clic sobre inspeccionar elemento y luego haz clic sobre Console, allí podrás ver los errores. Ponlos en el foro :P.

Saludos.

Claro, porque entras a traves de la pagina que dice"entrar" y esa fue la solucion tosca que encontre...poner una pagina sin script que se vea (mal o bien) y de ahi en adelante si funciona el script. A ver si entendi entonces... pongo la pagina index que yo quiero de inicio en la raiz del sitio y las css dependientes de ella en la raiz tambien y tiene que funcionar.. no?

Si, debería funcionar.