Tengo un problema de estilos al cargar encabezados, contenido y pies de página con jquery. Por algún problema desconocido, solo se carga el contenido, independientemente de los estilos.
El código actual:
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function () { $("#header").load("header/header.html"); $("#footer").load("footer/footer.html"); $("#content").load("content/content.html"); }); </script> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </body> </html>Header.html Recibo un error js: (Se negó a aplicar el estilo de 'http://127.0.0.1:XXXX/project/css.css' porque su tipo MIME ('text/html') no es un tipo MIME de hoja de estilo compatible , y la verificación estricta de MIME está habilitada). Aunque ni "src" ni "href" funcionan
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="../css.css"> </head> <body class="bodyHeader"> <hr> HEADER <hr> </body> </html>css.css
.bodyHeader { background-color: lightblue; } .bodyFooter { background-color: lightslategray; } .bodyContent { background-color: lightyellow; }Actualmente muestro texto sin estilos.
ENCABEZAMIENTO
CONTENIDO
PIE DE PÁGINA
Quiero visualizar:
DIV [todo el contenido, medidas y estilos] ENCABEZADO
DIV [todo el contenido, medidas y estilos] CONTENT
DIV [todo el contenido, medidas y estilos] FOOTER
Sin que ninguno de ellos se superponga y respetando las distancias.
¿Es un problema de jquery?