PHP Qual é o jeito certo de fazer divisão por página php?

Impts · 15 de dezembro de 2021

Qual é o jeito certo de fazer um site com várias partes dividida em php sem conflitar com seus objetos?

Por exemplo, eu estou tentando fazer 1 arquivo php que vai ser o HEADER, 1 arquivo php que vai ser o CONTENT e 1 arquivo php que vai ser o FOOTER.... porém o Content sempre conflita com o header quando puxo ele na pagina INDEX.

O conteúdo do content sobrepoe o header, como é feito para obedecer a ordem e ficar abaixo?

Alguém pode demonstrar de forma básica, ou mandar um tutorial do que eu preciso?

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="Author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="shortcut icon" href="./img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="./css/globalstyle.css" media="" />
    <title>Projeto</title>
  </head>
  <body>

<?php

require_once('header.php');
require_once('content.php');
require_once('footer.php');

?>


  </body>
</html>

Valter de Oliveira · 15 de dezembro de 2021

Fala, beleza?

como estão os códigos em seus arquivos?

require_once('header.php');
require_once('content.php');
require_once('footer.php');

Impts · 15 de dezembro de 2021

6 horas atrás, Valter de Oliveira disse:

Fala, beleza?

como estão os códigos em seus arquivos?

require_once('header.php');
require_once('content.php');
require_once('footer.php');

Eu até consegui fazer o que eu queria, mas não sei se é o jeito certo mesmo, eu usei um sistema básico de grid, alguns problemas surgiram, como, o menu não fica na posição certa quando uso (position:fixed), para quando rolar a página, ele desça junto... e o rodapé ficou fixo na página e não no fim dela como deveria....

header.php

<header>
<div class="menu">
<nav>
  <ul>
    <li><a href="index.php" class="link-logo"></a></li>
    <li><a href="">Informação</a></li>
    <li><a href="">Informação</a></li>
    <li><a href="">Informação</a></li>
    <li><a href="">Informação</a></li>
    <li><a href="">Informação</a></li>
    <li><a href="">Informação</a></li>
    <li><a href="">Informação</a></li>
    <li><a href="" class="link-search"></a></li>
    <li><a href="" class="link-bag"></a></li>
  </ul>
</nav>
</div>
</header>

header {
display: grid;
background: yellow;
}

.menu {
  display: inline-block;
  flex-wrap: wrap; 
  justify-content: space-between;
  margin: 0 auto;
  height: 50px;
  max-width: 100%;
  backdrop-filter: blur(0.5vh);

}

nav {
  height: 100%;
  flex-basis: calc(120% - 10vh);
  display: flex;
  text-align: center;
  margin: 0 auto;
  justify-content: center;
  height: 100%;

}
.menu ul {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu li{
  list-style-type:none;
}
.menu li a {
  padding: 0.5vh 2vh;
    color: #000;
    text-decoration: none;
    font-size: 12px;
    opacity: 10;
    transition: opacity 400ms;
}

.menu li a:hover {
   opacity: 0.4;
   text-decoration: none;
   
}


.link-logo {
    background: url('logotipo-header.png');
    background-repeat: no-repeat;
    display: flex; 
    background-size: 3vh;
    height: 5vh;
    width: 3.5vh;
    background-position: center;
}

.link-bag {
    background: url('bag-header.png');
    background-repeat: no-repeat;
    display: flex; 
    background-size: 2vh;
    height: 5vh;
    width: 3.5vh;
    background-position: center;

}

.link-search {
    background: url('search-header.png');
    background-repeat: no-repeat;
    display: flex; 
    background-size: 2vh;
    height: 5vh;
    width: 3.5vh;
    background-position: center;
    opacity: 10;
}

Content.php

<content>
	
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</content>

content {display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
background-color: darkred;
height: 100%;
font-size: 24px;}

Footer.php

<footer>
  <section class="footer3">
      <div class="footer3-item">
        <p class="infofooter">Copyright © 2022 Empresa. Todos os direitos reservados.<!-- Empresa Ltda.--> CNPJ: 00.000.000/0000-35</p>
        <p><a href="">Política de Privacidade</a> • <a href="">Política de vendas</a> • <a href="">Avisos legais</a> • <a href="">Mapa do site</a></p>
      </div>
 </section>
 </footer>

footer {
bottom: 0;
background: rgba(0,0,0,0.8);
color: white;
width: 100%;
position: fixed;

}

footer a {color: #dcdcdc; opacity: 10; opacity: 0.8;transition: opacity 400ms;}
footer a:link{text-decoration: none; color: white;}
footer a:visible{text-decoration: none; color: white;}
footer a:hover{text-decoration: underline; color: white; opacity: 0.8;}

.infofooter {opacity: 0.8;
    transition: opacity 400ms;}

.footer3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 2vh;
  margin: 0 auto;
  max-width: 175vh;
  padding: 5vh;
  align-items: center;

}

.footer3-item {
  text-align: center;
    max-height: 3vh;


}

Valter de Oliveira · 16 de dezembro de 2021

Beleza....

Veja se é isso o que você precisa.

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="Author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="shortcut icon" href="./img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="globalstyle.css" media="" />
    <title>Projeto</title>
  </head>
  <body>

    <!-- CREI UMA DIV GERAL-->
    <div class="geral">
        <div id="header"><?php require_once('header.php') ?></div>
        <div id="content"><?php require_once('content.php') ?></div>
        <div id="footer"><?php require_once('footer.php') ?></div>
    </div>  

  </body>
</html>

---------------------------------------

CSS

html, body {height:100%;}

/*criei esse geral */
.geral {
    min-height:100%;
    position:relative;
    width:100%;
}

header {
display: grid;
background: yellow;
}

.menu {
  display: inline-block;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  height: 50px;
  max-width: 100%;
  backdrop-filter: blur(0.5vh);

}

nav {
  height: 100%;
  flex-basis: calc(120% - 10vh);
  display: flex;
  text-align: center;
  margin: 0 auto;
  justify-content: center;
  height: 100%;

}
.menu ul {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu li{
  list-style-type:none;
}
.menu li a {
  padding: 0.5vh 2vh;
    color: #000;
    text-decoration: none;
    font-size: 12px;
    opacity: 10;
    transition: opacity 400ms;
}

.menu li a:hover {
   opacity: 0.4;
   text-decoration: none;
   
}


.link-logo {
    background: url('logotipo-header.png');
    background-repeat: no-repeat;
    display: flex;
    background-size: 3vh;
    height: 5vh;
    width: 3.5vh;
    background-position: center;
}

.link-bag {
    background: url('bag-header.png');
    background-repeat: no-repeat;
    display: flex;
    background-size: 2vh;
    height: 5vh;
    width: 3.5vh;
    background-position: center;

}

.link-search {
    background: url('search-header.png');
    background-repeat: no-repeat;
    display: flex;
    background-size: 2vh;
    height: 5vh;
    width: 3.5vh;
    background-position: center;
    opacity: 10;
}


content {display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
background-color: darkred;
height: 100%;
font-size: 24px;}

/*alterei o position*/
footer {
bottom: 0;
background: rgba(0,0,0,0.8);
color: white;
width: 100%;
position: inherit;


}

footer a {color: #dcdcdc; opacity: 10; opacity: 0.8;transition: opacity 400ms;}
footer a:link{text-decoration: none; color: white;}
footer a:visible{text-decoration: none; color: white;}
footer a:hover{text-decoration: underline; color: white; opacity: 0.8;}

.infofooter {opacity: 0.8;
    transition: opacity 400ms;}

.footer3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 2vh;
  margin: 0 auto;
  max-width: 175vh;
  padding: 5vh;
  align-items: center;

}

.footer3-item {
  text-align: center;
    max-height: 3vh;
}