Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
olá amigos do forum tudo beleza? seguinte estava separando o layout do site para puxa-los por include separado header conteudo etc so q esta dano um problema qnd atribuo o include <?php include_once("header.php");?> simplismente aparece um baita margin em cima no topo :( com o header normal na pagina fica normal pq sera q esta dano esse espaço no topo qnd coloco o header em um include verificano o css nao aparenta nenhum erro esta zerado os margin e padding *{margin:0;paddin:0;}
se alguem puder ajudar nesse problema
se colocar tbm o conteudo num include e puxar no meio ele da tbm um espaço acima =/
vlw ajuda pessoal
pois e amigo willwalker me esqueci de postar o codigo =P
ta assim o index sem repartir pra criar os include
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Classifácil Paraíso - O Seu Portal das Oportunidades</title>
<link href="estilo.css"rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
<div id="topo">
</div><!--fecha topo-->
<div id="cabecalho">
<div id="header">
<div id="login">
<img src="imagens/assets/loginimg.png" /><h1>Central do anunciante</h1>
<form action="" method="post">
<label>
<span>Email:</span>
<input type="text" />
</label>
<label>
<span style="margin:2px 0;">Senha:</span>
<input type="password" class="senha"/>
</label>
<input type="submit" name="" value="Logar"class="btn" />
</form>
<p><a href="#">[ Esqueci minha senha ]</a></p>
</div><!--fecha login-->
<div id="atendimento_on">
<img src="imagens/assets/atendimentoimg.png" />
</div><!--fecha atendimento-->
</div><!--fecha header-->
<div id="anuncie">
<h1>Envie seu anúncio</h1>
<a href="#">Clique aqui</a>
<p>Anunciar no Classifácil Paraíso e gratis</p>
</div><!--fecha anuncie-->
<div id="publicidade">
<h1>Publicidade</h1>
</div><!--fecha publicidade-->
</div><!--fecha cabecalho-->
<div id="menu_home">
<a href="#">Home</a>
<a href="#">Anunciar</a>
<a href="#">Imóveis</a>
<a href="#">Veículos</a>
<a href="#">Empregos</a>
<a href="#">Fale Conosco</a>
</div><!--fecha menuhome-->
<div id="anuncios_home">
<h1>Anuncios</h1>
<form method="post" action="" name="">
<label>
<span>Busca comun:</span>
<input type="text" name="s" />
<input type="submit" value="Encontrar" class="btn"/>
</label>
</form>
<ul class="lista_um">
<li>
<img src="imagens/midias/imghome.jpg" alt="" title="" border="0" />
<h2><a href="#">Vendo apartamento</a></h2>
<h3><a href="#">Venda</a></h3>
<a href="#" class="vejamais_g">Veja mais</a>
</li>
<li>
<img src="imagens/midias/imghome.jpg" alt="" title="" border="0" />
<h2><a href="#">Vendo apartamento</a></h2>
<h3><a href="#">Venda</a></h3>
<a href="#" class="vejamais_g">Veja mais</a>
</li>
<li>
<img src="imagens/midias/imghome.jpg" alt="" title="" border="0" />
<h2><a href="#">Vendo apartamento</a></h2>
<h3><a href="#">Venda</a></h3>
<a href="#" class="vejamais_g">Veja mais</a>
</li>
<li>
<img src="imagens/midias/imghome.jpg" alt="" title="" border="0" />
<h2><a href="#">Vendo apartamento</a></h2>
<h3><a href="#">Venda</a></h3>
<a href="#" class="vejamais_g">Veja mais</a>
</li>
</ul>
<ul class="lista_dois">
<li>
<img src="imagens/midias/imghome.jpg" alt="" title="" border="0"/>
<h2><a href="#">Vendo apartamento</a></h2>
<h3><a href="#">Venda</a></h3>
<a href="#" class="vejamais_g">Veja mais</a>
</li>
<li>
<img src="imagens/midias/imghome.jpg" alt="" title="" border="0"/>
<h2><a href="#">Vendo apartamento</a></h2>
<h3><a href="#">Venda</a></h3>
<a href="#" class="vejamais_g">Veja mais</a>
</li>
<li>
<img src="imagens/midias/imghome.jpg" alt="" title="" border="0"/>
<h2><a href="#">Vendo apartamento</a></h2>
<h3><a href="#">Venda</a></h3>
<a href="#" class="vejamais_g">Veja mais</a>
</li>
<li>
<img src="imagens/midias/imghome.jpg" alt="" title="" border="0"/>
<h2><a href="#">Vendo apartamento</a></h2>
<h3><a href="#">Venda</a></h3>
<a href="#" class="vejamais_g">Veja mais</a>
</li>
</ul>
<div style="clear:both"></div>
</div><!--fecha anuncios_home-->
<div id="anuncios_lista">
<ul>
<li>
<a href="#"><img src="imagens/midias/imghome2.jpg" alt="" title="" border="0" /></a>
<h2> <a href="#">Vendo casa</a></h2>
<h3><a href="#">Venda</a></h3>
<a href="#" class="vejamais_p">Veja mais</a>
</li>
<li>
<a href="#"><img src="imagens/midias/imghome2.jpg" alt="" title="" border="0" /></a>
<h2> <a href="#">Vendo casa</a></h2>
<h3><a href="#">Venda</a></h3>
<a href="#" class="vejamais_p">Veja mais</a>
</li>
<li>
<a href="#"><img src="imagens/midias/imghome2.jpg" alt="" title="" border="0" /></a>
<h2> <a href="#">Vendo casa</a></h2>
<h3><a href="#">Venda</a></h3>
<a href="#" class="vejamais_p">Veja mais</a>
</li>
<li>
<a href="#"><img src="imagens/midias/imghome2.jpg" alt="" title="" border="0" /></a>
<h2> <a href="#">Vendo casa</a></h2>
<h3><a href="#">Venda</a></h3>
<a href="#" class="vejamais_p">Veja mais</a>
</li>
<li>
<a href="#"><img src="imagens/midias/imghome2.jpg" alt="" title="" border="0" /></a>
<h2> <a href="#">Vendo casa</a></h2>
<h3><a href="#">Venda</a></h3>
<a href="#" class="vejamais_p">Veja mais</a>
</li>
</ul>
</div><!--fecha anuncios_lista-->
<div style="clear:both"></div>
<div id="footer"></div>
</div><!--fecha box -->
<div style=" display:none"><img src="imagens/assets/loginbghover.png" /></div>
</body>
</html>aew o css esta assim
@charset "utf-8";
/ CSS Document /
*{margin:0; padding:0;}
body{ background:#fff;}
#box{width:1002px; margin:0 auto; background-color:#fff; }
/header/
#topo{ width:1002px;height:150px; background: url(imagens/testetopoimg.jpg) no-repeat; border-bottom:5px solid #004364; }
#cabecalho { width:1002px; height:250px; background:#FC0;}
#header{ height:250px; width:280px; background-color: #333; float:left;}
#login{ width:262px; height:121px; background:url(imagens/assets/bglogin.jpg) no-repeat; margin:3px 12px;}
#login img{margin:10px 5px 0 15px; float:left;}
#login h1{ font:18px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#004364; float:left; font-variant:small-caps; font-weight:bold; margin:8px 5px;}
#login p{ clear:both;}
#login form {float:left;}
#login form label { display:block; margin:3px 15px;}
#login form span{ font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#004364; font-variant:small-caps; font-weight:bold;}
#login form input{ width:180px;}
#login form label .senha{width:100px; float:left; margin:2px 0;}
#login form label span{ float:left;}
#login form .btn{ width:70px; height:24px; float:left; background: url(imagens/assets/loginbg.png) no-repeat; border:0; margin:0 5px; cursor:pointer; font:14px Arial, Helvetica, sans-serif; color:#004364; font-weight:bold;}
#login form .btn:hover{ background:url(imagens/assets/loginbghover.png) no-repeat; color:#FFF;}
#login p{ text-align:center; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#666; padding:3px 0;}
#login p a{ text-decoration:none; color:#666;}
#login p a:hover{ text-decoration:underline;}
#atendimento_on{width:262px; height:104px; background:url(imagens/assets/bgatendimento.jpg) no-repeat;margin:3px 12px }
#atendimento_on img { margin:15px 5px;}
#anuncie { width:408px; height:225px; background:url(imagens/assets/bganuncie.jpg) no-repeat; float:left; margin:4px 0;}
#anuncie h1{ font:24px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#004364; font-weight:bold; margin:25px 35px 0px 35px;}
#anuncie a{ background:url(imagens/assets/anunciebotao.png) no-repeat; width:140px; height:25px; float:left; display:block; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#004364; padding:8px 8px 8px 6px ; text-align:center; text-decoration:none; font-weight:bold; margin:15px 50px 0px 60px;}
#anuncie a:hover{ text-decoration: underline;}
#anuncie p{font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #666; float:left; text-align:center; padding:10px 140px 0 25px; font-weight:bold;}
#publicidade{ width:300px; height:250px; background-color:#fff; float:left; margin:0 0 0 5px;}
#publicidade h1 { font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#004364; font-size:14px; font-variant:small-caps; font-weight:bold; margin:5px 10px; border-bottom:1px solid #004364;}
#publicidade .publicidadeimg{ width:280px; height:200px; background-color:#CCC; margin:0 10px;}
/menu/
#menu_home{ width:1002px; height:40px; background: url(imagens/assets/bgmenu.jpg) repeat-x; border-bottom:5px solid #004364;}
#menu_home a{ text-decoration:none; font:20px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; padding:8px 30px ; display: inline; float:left;}
#menu_home a:hover{ background:url(imagens/assets/menubghover.jpg) repeat-x; color:#004364;}
/conteudo/
#anuncios_home{ width:1002px; background:url(imagens/assets/buscaareabacground.jpg) top no-repeat #fff; border-bottom:5px solid #004364; padding:0 0 10px 0 ;}
#anuncios_home h1{font:30px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#004364; font-weight:bold;margin:3px 0 0 70px; float:left; }
#anuncios_home form{ float:right;}
#anuncios_home label{display:block;}
#anuncios_home span{font:18px Arial, Helvetica, sans-serif; color:#fff;}
#anuncios_home input{width:371px; height:21px; background: url(imagens/assets/buscabginput.png) no-repeat; border:0; outline:none; padding:2px 0px 2px 8px; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#004364;}
#anuncios_home .btn{width:80px; height:25px; background: url(imagens/assets/botaoencontrarbg.png) no-repeat; border:none; cursor:pointer; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#004364; padding:0 2px 0 0; font-weight:bold; margin:0 5px 0 0;}
#anuncios_home a{ text-decoration:none;}
#anuncios_home a:hover{ text-decoration:underline;}
#anuncios_lista a{ text-decoration:none;}
#anuncios_lista a:hover{ text-decoration:underline;}
#anuncios_home .lista_um{ list-style:none; float:left; width:1002px; margin-bottom:5px; padding-bottom:5px; border-bottom:1px solid #ccc;}
#anuncios_home .lista_um li{ display:inline; float:left; text-align:center; margin:10px 10px;} #anuncios_home .lista_um li:hover{ background:#f4f4f4;}
#anuncios_home .lista_um li img{}
#anuncios_home .lista_um li h2 a{font:18px Arial, Helvetica, sans-serif; color:#004364; font-weight:bold;}
#anuncios_home .lista_um li h3 a{font:16px Arial, Helvetica, sans-serif; color:#666; }
#anuncios_home .lista_um li .vejamais_g{ width:100px; height:17px; float:left; background:url(imagens/assets/botao_vejamais_g.png) no-repeat;; padding:8px 5px ; font:14px Arial, Helvetica, sans-serif; color:#333; font-weight:bold; margin:5px 60px;}
#anuncios_home .lista_um li .vejamais_g:hover{ color:#09C;}
#anuncios_home .lista_dois{ list-style:none; float:left; width:1002px;}
#anuncios_home .lista_dois li{ display:inline; float:left; text-align:center;margin:10px 10px;}
#anuncios_home .lista_dois li:hover{ background:#f4f4f4;}
#anuncios_home .lista_doisli img{}
#anuncios_home .lista_dois li h2 a{font:18px Arial, Helvetica, sans-serif; color:#004364; font-weight:bold;}
#anuncios_home .lista_dois li h3 a{font:16px Arial, Helvetica, sans-serif; color:#666; }
#anuncios_home .lista_dois li .vejamais_g{ width:100px; height:17px; float:left; background:url(imagens/assets/botao_vejamais_g.png) no-repeat;; padding:8px 5px ; font:14px Arial, Helvetica, sans-serif; color:#333; font-weight:bold; margin:5px 60px;}
#anuncios_home .lista_dois li .vejamais_g:hover{ color:#09C;}
#anuncios_lista{ list-style:none; float:left; width:1002px; margin-bottom:5px; padding-bottom:5px; }
#anuncios_lista li{ display:inline; float:left; text-align:center; margin:8px 0; }
#anuncios_lista li:hover{ background:#f4f4f4;}
#anuncios_lista .lista_um li img{}
#anuncios_lista li h2 a{font:14px Arial, Helvetica, sans-serif; color:#004364; font-weight:bold;}
#anuncios_lista li h3 a{font:12px Arial, Helvetica, sans-serif; color:#666; }
#anuncios_lista li .vejamais_p{ width:70px; height:18px; float:left; background:url(imagens/assets/botao_vejamais_p.png) no-repeat;; font:12px Arial, Helvetica, sans-serif; color:#333; font-weight:bold; margin:5px 60px; padding:5px 5px;}
#anuncios_lista li .vejamais_p:hover{ color:#09C;}
/rodape/
#footer{height:100px; width:1002px; background: #0F0; border-top:5px solid #004364;}
aew pra montar os include index ja partido
<?php include_once("header.php");?>
<?php
foreach ($_REQUEST as $___opt => $___val) {
$$___opt = $___val;
}include("navegar/home.php");
}echo '<br><font face=arial size=11px><br><b>A página não existe.</b><br>Por favor selecione uma página a partir do Menu Principal.</font>';
}include("navegar/$pg.php");
}
?>
<?php include_once("footer.php");?>aew ta dano um margin em cima nao descobri pq =/ se for necessario coloco onde reparti o codigo pra montar os includes
vlw ajuda
header.php esta dano uma espaço tbm acima do PHP do conteudo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Classifácil Paraíso - O Seu Portal das Oportunidades</title>
<link href="estilo.css"rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
<div id="topo">
</div><!--fecha topo-->
<div id="cabecalho">
<div id="header">
<div id="login">
<img src="imagens/assets/loginimg.png" /><h1>Central do anunciante</h1>
<form action="" method="post">
<label>
<span>Email:</span>
<input type="text" />
</label>
<label>
<span style="margin:2px 0;">Senha:</span>
<input type="password" class="senha"/>
</label>
<input type="submit" name="" value="Logar"class="btn" />
</form>
<p><a href="#">[ Esqueci minha senha ]</a></p>
</div><!--fecha login-->
<div id="atendimento_on">
<img src="imagens/assets/atendimentoimg.png" />
</div><!--fecha atendimento-->
</div><!--fecha header-->
<div id="anuncie">
<h1>Envie seu anúncio</h1>
<a href="#">Clique aqui</a>
<p>Anunciar no Classifácil Paraíso e gratis</p>
</div><!--fecha anuncie-->
<div id="publicidade">
<h1>Publicidade</h1>
</div><!--fecha publicidade-->
</div><!--fecha cabecalho-->
<div id="menu_home">
<a href="#">Home</a>
<a href="#">Anunciar</a>
<a href="#">Imóveis</a>
<a href="#">Veículos</a>
<a href="#">Empregos</a>
<a href="#">Fale Conosco</a>
</div><!--fecha menuhome-->Manda um print screen. Acho que sei o problema.
estava testano sem conteudo so com div e esta dano o mesmo problema vo posta o codigo q esta bem menor pode fica rmais facil para ajudar e uma print
codigo index
<?php include_once("header.php"); ?>
<?php include_once("home.php"); ?>
<?php include_once("footer.php"); ?>codigo css
@charset "utf-8";
/ CSS Document /
*{margin:0; padding:0;}
body{ background: #6FF;}
#box{width:1002px; margin:0 auto; background-color:#fff; }
#topo{ height:150px; background:#093; margin:0; padding:0;}
#anuncios_home{ height:500px; background:#339;}
#footer{ height:130px; background:#963;}
codigo header
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Classifácil Paraíso - O Seu Portal das Oportunidades</title>
<link href="estilo.css"rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
<div id="topo"></div><!--fecha topo-->codigo conteudo
<div id="anuncios_home">
a
</div><!--fecha anuncios_home-->
codigo rodape
<div id="footer">
a
</div><!--fecha footer-->
</div><!--fecha box -->
</body>
</html>http://img43.imageshack.us/i/printjn.jpg/
ta dano um espaço no conteudo tbm so q nao aparece na print muito estranho esse problema azul claro e o body o branquinho sao os espaços
vlw
Tu vai estruturar suas páginas assim:
header.php
<?php //Scripts php somente - includes de conexão, ou session_start(); por exemplo ?>
index.php (arquivo que vai conter todos os includes)
<?php include("header.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="estilo.css"rel="stylesheet" type="text/css" />
</head>
<body>
<?php include("topo.php"); ?>
<div id="box"><!-- Aqui fica o código da sua página home -->
<?php include("rodape.php"); ?>
</div><!--fecha box -->
</body>
</html>topo.php (onde contem menus essas coisas)
rodape.php
<div id="footer">a</div><!--fecha footer-->
E o index.php tu vai usar para criar qualquer página do seu site. Mudando somente essa linha - <!-- Aqui fica o código da sua página home -->
Abraços Walker
vlw ajuda amigo Walker mas nao esta dano eu tirei o header e o footer e so coloquei o conteudo como include e esta dano o espaço ainda eita q coisa nao consigo entender o pq desse espaço qnd usa include esta quebrano o layout mesmo so com as divs sem nada de conteudo como postei acima esta dano esse espaço como posso fazer pra remover eses espaços?
obrigado
Faz assim, me manda os arquivo e me adiciona no msn que eu te ajudo com isso ai. wilzinho2901 @ hotmail . com
Abraços Walker
vlw amigo Walker te add la parece q descobri +ou- oq causa o problema qnd tem alguma div dentro da pagina q sera o include aparece esse espaço afe nao sei o pq disso se eu deixar sem div aew some o espaço :( em um codigo simples sem nada somente as divs q estou testano
aqui esta o site somente as divs nao tem conteudo perceba o layout certinho tudo esta no index
http://teste.classifacilparaiso.com/
agora vou remover a div conteudo q e a azul meio e vou coloca-la como include sendo puxada para o index vou por a tag div id conteudo no include percebe-se q vai dar um espaço acima (em cinza) parecido com um marging aew o texto ira descer esse espaço q e o problema qnd tem alguma div no include (falo no arquivo q sera puxado) ele da esse espaço pq sera? favor acessar abaixo para verificar como fica
http://teste.classifacilparaiso.com/otro/
obrigado pela ajuda pessoal
alguem saberia informar como resolver esse problema ou se nos links acima esta tendo mesmo o problema
vlw
bom pessoal.. estava com o mesmo problema e consegui resolver..
eu abri o dreamweaver crtl+J e salvei a codificação utf-8 sem bom..
repeti o processo no notepad ++ pra me certificar..
depois joguei o include na primeira linha do documento, antes mesmo de declarar o doctype..
deu certo..
estou trabalhando em localhost senão postava pra vcs verem...
brigadão wilker..
Amigo ecolagos,
tive que me cadastrar no forum para agradecer sua ajuda
estava com o mesmo problema,estava quebrando a cabeça e graças a voce
consegui arrumar o problema, um simples utf 8 sem bom resolveu rs
Obrigadão!
Posta o seu arquivo header.php e o arquivo que está recebendo o include. Porque o código não erra, quem erra e buga é o programador! =D