1
I had asked this question before, but I was not so specific so I decided to reformulate my code here so that you understand better. Here I have the main file that will be used as template for all pages:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Guia Norte Capixaba</title>
<meta charset="utf-8">
<link rel="icon" href="img/guianortecapixaba.ico" type="image/gif" sizes="42x42">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #7faec3;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="http://localhost:8888/GuiaNorteCapixaba" target="_self">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Cadastre-se Gratuitamente</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
</div>
</nav>
<!--Aqui o cabeçalho do portal-->
<div class="jumbotron">
<img src="img/header-template.png" class="img-thumbnail" alt="Cinque Terre" width="100%">
</div>
</div>
<!--Fim do cabeçalho do portal-->
<!--Barra esquerda-->
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<img src="img/banner-divulgacao.png" class="img-rounded" alt="Divulgação" width="100%">
</div>
<!--Essa é a página central-->
<div class="col-sm-8 text-left">
<h3>O que você esta procurando? Digite aqui:</h3>
<form class="form-inline" action="busca.php" method="post">
<div class="form-group">
<input type="text" class="form-control" id="palavra" placeholder="Digite aqui..." name="palavra">
</div>
<div class="form-group">
<label for="cidade">Selecione a cidade:</label>
<select name="cidade" class="form-control" id="cidade">
<option value="sao-gabriel-da-palha">São Gabriel da Palha</option>
<option value="sao-domingos-do-norte">São Domingos do Norte</option>
<option value="vila-valerio">Vila Valério</option>
</select>
</div>
<button type="submit" class="btn btn-default" value="Buscar">Buscar</button>
</form>
<hr>
</div>
<!--fim da página central-->
<div class="col-sm-2 sidenav">
<img src="img/banner-divulgacao-2.png" class="img-rounded" alt="Divulgação" width="100%">
</div>
</div>
</div>
</body>
<footer class="container-fluid text-center">
<p>Desenvolvido por <a href="https://andreyferraz.com" target="_blank">Andrêy Ferraz</a> </p>
</footer>
</html>
So here I have a page called about.php on which I’m calling this template via require, so the content of my page isn’t staying in the body where it should be, but after the footer, how do I fix it? Here the page about:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Guia Norte Capixaba</title>
<meta charset="utf-8">
<link rel="icon" href="img/guianortecapixaba.ico" type="image/gif" sizes="42x42">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #7faec3;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
<?php
require 'principal.php';
?>
</head>
<body>
<!--Fim do cabeçalho do portal-->
<!--Barra esquerda-->
<!--Essa é a página central-->
<p>aqui entra o meu texto</p>
<!--fim da página central-->
</body>
</html>
You cannot include it in the site you are including or with the content you are including. If you imagine the html coming from the page
principal.phpand assuming it’s the first one you show, placed where you have therequire, will get two labels<body>, etc, and therefore with an incorrect document. You have to segment the page into blocks and only include each piece in the right place– Isac
@Isac thank you so much for the information, but I’m still learning would have as you show me how it would look?
– WPfan