Fórum include alterando a posição da página mãe #618919

08/11/2022

Olá, amigos. Estou com um probleminha de CSS que não sei reolver. Tenho uma página básica, com um cabeçalho, logo abaixo um menu à esquerda, um corpo à direita, e logo abaixo um rodapé. Assim

CABEÇALHO
------------------------------------------------------------------------
MENU | CORPO
|
|
------------------------------------------------------------------------
RODAPÉ

Estruturei no css assim:

#painel{width: 1000px; margin: 0 auto; background-color: #6495ED;}
#cabecalho{width: 100%; margin: 0 auto; font-size:12px; background-color: #6495ED;}
#corpo{width: 100%; margin: 0 auto; background-color: #FFFFE0;}
#menu{width: 20%; float:left; background-color: #0000FF; color:white;}
#conteudo{width: 80%; min-height: 390px; float:right; text-align:left; background-color: #E0FFFF ;}
#rodape{width: 100%;margin: 0 auto; background-color: #6495ED;}

Então, no menu, coloquei links que chamam outras páginas para preencher a div "conteúdo". Tipo, se clico em "home", a página home.php abre na div conteúdo.

Só que, quando clico e chamo a página, ela muda minha div principal de lugar. Em vez de permanecer tudo no centro da tela, como estava antes, ela vai pra esquerda e pra cima, zero left e zero top.

Segue o print das telas:

sem include:

1	`sgi.dev.br/paginas/sem_include.png`

com include:

1	`sgi.dev.br/paginas/com_include.png`

Onde posso estar errando?

Segue o CSS completo:

@charset "utf-8";
/* CSS Document */
 
body{background-image: url(../img/bkgd.jpeg);}
 
#painel{width: 1000px; margin: 0 auto; background-color: #6495ED;}
#cabecalho{width: 100%; margin: 0 auto; font-size:12px; background-color: #6495ED;}
#corpo{width: 100%; margin: 0 auto; background-color: #FFFFE0;}
#menu{width: 20%; float:left; background-color: #0000FF; color:white;}
#conteudo{width: 80%; min-height: 390px; float:right; text-align:left; background-color: #E0FFFF ;}
#rodape{width: 100%;margin: 0 auto; background-color: #6495ED;}
 
table.cabecalho{border:none; width:100%;}
td:first-child.cabecalho { width: 20%; }
td:first-child + td.cabecalho {  width: 80%;}
 
#hov ul{list-style: none; padding:0px; width: 200px; margin:0;}
#hov li{padding:0px; margin: 0; border-bottom: #999999 thin inset; border-top: #ffffff thin inset;}
#hov a{display: block; width: 178px; text-decoration: none; padding: 11px; background-color: #3232e3; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; color: #FFFFFF;}
#hov :hover{background-color: #1b1b24; text-decoration: none; color: #FFFFFF; }
#hov li.btnultimo{border-bottom: none;}
#menu ul{list-style: none; padding:0px; width: 200px; margin:0;}
#menu li{padding:0px; margin: 0; border-bottom: #999999 thin inset; border-top: #ffffff thin inset;}
#menu a{display: block; width: 178px; text-decoration: none; padding: 11px; background-color: #3232e3; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; color: #FFFFFF;}
#menu li.btnultimo{border-bottom: none;}
 
h4{color:white; font-size:20px; text-align:center; line-height: 0.1;}
h5{color:white; font-size:17px; text-align:center; line-height: 0;}
h6{color:white; font-size:14px; text-align:center; line-height: 0;}
h7{color:white; font-size:12px; text-align:center; line-height: 0;}
 
table.rodap{border:none; width:100%;}
td:first-child.rodap { width: 5%;}
td:first-child + td.rodap {  width: 15%;}
td:first-child + td.rodap {  width: 80%;}
 
a:link { text-decoration: none;  color: #ffffff;}
a:hover { text-decoration: underline;}
 
p{line-height:0px;}
 
.includes{background-color:white; color:blue; width:800px; min-height:390px;left:200px;}

Edilson Santiago

Curtir tópico

+ 0

Responder