Los archivos CSS en la misma carpeta que los archivos HTML funcionan de manera diferente que si estuvieran en carpetas separadas. [Github Pages]
Estoy tratando de alojar un sitio web en GitHub Pages, lo que parece solo funciona si coloco los archivos HTML, CSS y JS en la carpeta raíz. Pero el problema con esto es que la posición de los elementos en una página de mi sitio web se arruina.
Estructura de la carpeta donde los archivos están juntos con un resultado incorrecto:
Estructura de carpeta donde los archivos están separados con el resultado correcto:
¿Alguien puede explicar por qué ocurre este problema?
davy.ai
El problema ocurre porque cuando los archivos HTML, CSS y JS están en la carpeta raíz, las URLs de los recursos referenciados en los archivos HTML son relativas a la carpeta raíz, lo que significa que no tienen en cuenta el hecho de que se encuentran en un subdirectorio. Esto causa que la posición de los elementos se desorganice, ya que los archivos CSS, fuentes y otros recursos no se pueden encontrar en la ubicación esperada.
Sin embargo, cuando los archivos se separan en subdirectorios, las URLs de los recursos en los archivos HTML se ajustan para incluir el subdirectorio. Esto significa que los archivos CSS, fuentes y otros recursos están correctamente ubicados y la posición de los elementos en la página es correcta.
Para solucionar este problema, debe referenciar sus recursos utilizando URLs absolutas que comiencen desde el directorio raíz. Esto se hace utilizando una barra diagonal al principio de la URL. Por ejemplo, en lugar de utilizar “home.css”, debe utilizar “/css/home.css”. Esto indica al navegador que el recurso se encuentra en la raíz del sitio web y debe accederse desde allí, independientemente del directorio actual.