Tengo una pagina con mas de 250 paginas, en las cuales me serviría utilizar el include y colocar dicho header y footer.
El punto es el siguiente, tengo dicho header y footer en la pagina, en el index me cargan perfecto, con su style, imagenes y todo en su lugar, a la hora de entrar a la carpeta de "categorías" y cargar dicho header y footer me carga solo el codigo html y no con su style ni imagenes (Cosa que esta incluido dentro del header y el footer original que estoy llamando).
La idea/pregunta es se puede logar que con solo tener un header y un footer se llegue a cargar en diferentes carpetas llamándolo con el include o requiere?
Paso parte del codigo del header y sus ubicaciones y como lo estoy llamando...
Index que carga perfecto
Index Skin (Carpeta contenedora)(header.php / footer.php)
<!DOCTYPE html>
<html lang="es">
<?php include ("Skin/header.php") ?>
<?php include ("Skin/categoria.php") ?>
<?php include ("Skin/nuevos.php") ?>
<?php include ("Skin/destacados.php") ?>
<p class="VM"><a href="Categorias/Categorias">Ver todas las categorias</a></p>
<?php include ("Skin/carrucel.php") ?>
<?php include ("Skin/footer.php") ?>
</body>
</html>
Aquí empieza el problema
El section esta vacio para no poner código de mas....
El punto es que ahora tomo el archivo header.php y footer.php de la misma carpeta y no carga su style ni imagenes (Cosa que esta escrito dentro del mismo)
<!DOCTYPE html>
<html lang="es">
<?php include '../Skin/header.php';?>
<link rel="stylesheet" href="../css/style.css">
<!-- /HEADER -->
<!-- SECTION -->
<div class="section">
<!-- container -->
</div>
<!-- /SECTION -->
<br><br>
<!--/Sub Footer-->
<?php include '../Skin/footer.php';?>
<!-- jQuery Plugins -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/nouislider.min.js"></script>
<script src="js/jquery.zoom.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Archivo header.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="TorniShop, TruckShop, Repuestos, Tornilleria, Ferreteria industrial, Repuesto camiones"/>
<!-- EVITAR CACHE -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<!-- EVITAR CACHE -->
<title>TorniShop | TruckShop, Repuestos, Tornilleria, Ferreteria industrial, Repuesto camiones</title>
<link rel="icon" href="img/icon/Ts.png">
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet">
<!-- jQuery Plugins -->
<script src="js/js/jquery.min.js"></script>
<!-- Font Awesome Icon -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="https://file.myfontastic.com/9FNtGvFZYgKtdCoP5J8xHf/icons.css" rel="stylesheet">
<!-- Custom stlylesheet -->
<link href="css/Bootstrap/bootstrap.css" rel="stylesheet">
<link href="css/Bootstrap/animate.css" rel="stylesheet">
<link href="css/Bootstrap/bootstrap-theme.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/buscar.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-176776839-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-176776839-1');
</script>
</head>
<body id="fix">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PDG96ZK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<header class="headerr">
<div class="containerM">
<div class="btn-menu1">
<label class="btn-label" for="btn-menu1">☰</label>
</div>
<div class="logo">
<h1><a href="index"><img src="img/icon/Ts.png" alt=""></a></h1>
</div>
<div class="iconB" id="iconB"></div>
<div>
<nav class="menuu">
<a href="index" class="active">Home</a>
<a href="Categorias/Categorias">Categorias</a>
<a href="Contacto/contacto">Contacto</a>
<a href="Catalogo/Solicitud-Cat">Catalogo</a>
<a id="action-list-1" href="https://www.google.com/maps/dir//TORNISHOP+repuestos+-+tornilleria+-+ferreteria+industrial/data=!4m8!4m7!1m0!1m5!1m1!1s0x95a1d2a2c4acb877:0x273ef70e59ff68a5!2m2!1d-56.223701899999995!2d-34.7340471" target="_blank" data-tracking-element-type="5" jslog="// LINT.IfChange(PostCTAType)56039; track:impression,click" itemprop="hasMap" data-enable-ga="true" data-ga-prefix="action-list">Cómo llegar</a>
</nav>
</div>
</div>
</header>
<div class="capa"></div>
<!-- --------------->
<input type="checkbox" id="btn-menu1">
<div class="container-menu1">
<div class="cont-menu1">
<nav class="MDesp">
<a href="index" class="activee">Home</a>
<a href="Categorias/Categorias">Categorias</a>
<a href="Contacto/contacto">Contacto</a>
<a href="Catalogo/Solicitud-Cat">Catalogo</a>
<a id="action-list-2" href="https://www.google.com/maps/dir//TORNISHOP+repuestos+-+tornilleria+-+ferreteria+industrial/data=!4m8!4m7!1m0!1m5!1m1!1s0x95a1d2a2c4acb877:0x273ef70e59ff68a5!2m2!1d-56.223701899999995!2d-34.7340471" target="_blank" data-tracking-element-type="5" jslog="// LINT.IfChange(PostCTAType)56039; track:impression,click" itemprop="hasMap" data-enable-ga="true" data-ga-prefix="action-list">Cómo llegar</a>
</nav>
<label class="btn-label" for="btn-menu1">✖️</label>
</div>
</div>
<div class="searchh" id="searchh" >
<div class="inputFB">
<input class="inputB" type="text" name="termino" id="termino" placeholder="Buscar por OEM / Codigo / Nombre" aria-label="Search">
</div>
</div>
<script>
$(document).ready(function(){
Act1();
Act2();
});
function Act1(){
$('#iconB').on('click', function(event) {
$('#iconB').toggleClass('activa');
$('#searchh').toggleClass('activo');
$('#bgg').toggleClass('bggA');
$('#fix').toggleClass('fix');
$('#termino').toggle('show');
$('#TablaB').toggle('show');
$('#termino').val('');
});
};
$(document).keyup(function(e){
if(e.which==27) {
$('.iconB.activa').click();
}
})
function Act2(){
$('#clear').on('click', function(event) {
$('#iconB').toggleClass('activo');
});
};
</script>
<div class="bgg" id="bgg"></div>
<div class="TablaB" id="TablaB">
<section class="content-area">
<div class="table-area" id="tabla_resultados">
</div>
</section>
</div>
<!--/Torni-->
<div class="torni">
<img src="img/boddy/Boddy-Pagina2.jpg" alt="Torni" class="torniS">
</div>
</body>
</html>
header.php
(que no has puesto en la pregunta) estás usando rutas relativas, y al invocarlo desde un subdirectorio distinto del que contiene el index.php que sí funciona, esas rutas se quedan mal puestas. Pásate a las rutas absolutas en eseheader.php
para que eso no ocurra, o bien en toda tu web, pues tal como lo estas estructurando te puede pasar a menudo en cualquier sitio donde estes usando las rutas relativas dentro de tu código.href="css/Bootstrap/bootstrap.css"
pon esto:href="/css/Bootstrap/bootstrap.css"
con una barra inclinada/
al principio.http://www.midominio.com/index.php
sino que quizás lo tienes en una carpeta, por ejemplo:http://www.midominio.com/carpeta/index.php
... con lo cual, lo dicho antes lo debes cambiar de/
a/carpeta/
(o si la ruta es más larga pues tambien lo pones/carpeta/carpeta/carpeta/etc/