include alterando a posi��o da p�gina m�e

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:

sgi.dev.br/paginas/sem_include.png

com include:

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