2

Quando eu utilizo o require_once para fazer a inclusão do topo do site, ele deixa um espaço superior no topo de aproximadamente 8px, mesmo no CSS eu utilizando body{ padding: 0; margin: 0; border: 0; }; o problema permanece.

Segue meu código CSS completo:

body{
    padding: 0;
    margin: 0;
    border: 0;
}
.guaraparivirtual-topo {
position:relative;
width:1215px;
height:110px;
background-image:url(http://guaraparivirtual.com.br/novo-gv/logo.png);
background-repeat:no-repeat;
background-position:1% 50%;
margin: 0 auto;
background-color:#D5D5D5;
}

Agora segue o HTML completo e com o require_once:

<!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" />
<meta http-equiv="Content-Language" content="pt-br">
<meta name="description" content="Guarapari, Cidade Saude, guarapari es, espírito santo, fotos, verão, sol, mar, praias, tv, comidas tipicas, telefones úteis, horario de ônibus, turismo rural, empresas.">
<meta name="keywords" content="Brasil, Brazil, Guarapari, Cidade Saude, guarapari es, guarapari espírito santo, guarapari fotos, guarapari brasil, verão em guarapari">
<meta name="Author" content="Gladison Luciano Perosini" />
<meta name="reply-to" content="[email protected]" />
<meta name="robots" content="Follow" />
<title>:: Guarapari Virtual :: O Site da Cidade Saúde - Guarapari-ES</title>
<link href="guarapari-css.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="fonte.css">

</head>

<body>
<?php require_once('guarapari-topo-site-virtual.php'); ?>
</body>
</html>

Segue também o conteúdo do require_once:

<div class="guaraparivirtual-topo"></div>

Está tudo aí os arquivos, mas não consegui encontrar o problema.

Se eu pegar o conteúdo do arquivo de inclusão e colocar direto na página ele funciona certinho e sem o espaço superior, mas e eu utilizar o arquivo de inclusão ele dá este espaço.

Podem me ajudar?

Aguardo e obrigado

7
  • tem como colocar apenas o começo da página guarapari-topo-site-virtual.php ? Commented 19/05/2016 às 13:23
  • @VictorGomes me explica melhor o que devo fazer Commented 19/05/2016 às 13:28
  • Olha só pra não haver espaços pra erros (mesmo eu acreditando que não seja esse o problema) elimine os espaços, antes de <link..> e </head> e <body> Commented 19/05/2016 às 13:30
  • @VictorGomes fiz o que me orientou e não deu certo Commented 19/05/2016 às 13:31
  • 1
    Veja se a condificação dos arquivos está igual. Tente salvar tudo codificado como UTF-8 without BOM
    – KaduAmaral
    Commented 19/05/2016 às 18:08

2 Respostas 2

1

Acredito que pode ser utilizado as funções top e position pra "reforçar" a posição no topo da página.

Vou dar um pequeno e simples exemplo na utilização dessas funções, o exemplo pode ser visto aqui ou abaixo.

div {
    width: 200px;
    height: 50px;
    margin-left: -100px; /* metade da largura */
    margin-top: 0px; /* metade da altura */
    position: absolute;
    top: 0%;
    left: 50%;
    border: 1px solid blue;
}
<div>
    Topo absoluto
</div>

O "segredo" ta no position: absolute; e no margin-top com a combinação de top

0

Testei exatamente como tem. Aqui está a imagem do meu monitor:

inserir a descrição da imagem aqui

Acho que deve ter algures uma margin/padding e não tenha dado conta, ou talvez tenha alguma propriedade que atue em todas todas a div

4
  • Verifiquei tudo o que solicitou e nada. rss Continua o espaço superior. Commented 19/05/2016 às 13:38
  • Se eu pegar o conteúdo do arquivo de inclusão e colocar direto na página ele funciona certinho e sem o espaço superior, mas e eu utilizar o arquivo de inclusão ele dá este espaço. Commented 19/05/2016 às 13:39
  • Estranho estar assim no seu navegador. Aqui estou com dois computadores no escritório e o espaço superior permanece. Rss Commented 19/05/2016 às 13:56
  • Talvez tenha alguma propriedade que atue em todas todas a div e não reparado. Tenho inspecionar o elemento no seu browser e veja se descobre de onde vem isso. Botão direito no browser e clique em inspecionar elemento, ou ctrl+shift+i
    – Miguel
    Commented 19/05/2016 às 13:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .