Problemas com HTML + CSS

Eduardo Pokk · 10 de junho de 2015

Bom dia pessoal, tudo bem?

Estou com um pequeno problema....

Estou tentando produzir um site com HTML + CSS, usando divs...

O problema é que a div que eu classifico como "footer" fica no meio da tela! Não consigo solucionar isso.

Alguém poderia me ajudar?

HTML:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Pokk Clínica de Psicologia</title>



<link href="folha_estilo.css" rel="stylesheet" type="text/css" />

</head>



<body>

<div class="caixa_total">

<div class="logo"><img src="images/pokkclinica.jpg" width="200" height="68" alt="Pokk Clínica de Psicologia" /></div>

<div class="menu">

 <ul>

        <li><a href="index.html">Home</a></li>

        <li><a href="servicos.html">Serviços</a></li>

        <li><a href="CAPFR.html">CAPFR</a></li>

        <li><a href="parceiros.html">Parceiros</a></li>

        <li><a href="planos.html">Planos de Saúde</a></li>

      <li><a href="contato.html">Contato</a></li>

  </ul>

 <p> </p>

 <p> </p>

 <p> </p>

 <p> </p>

 <div class="boxes">

   <h3>Sobre a Clínica de Psicologia</h3>

   <span class="subtitle">Saiba mais sobre nós</span>

   <p>É um espaço formulado especialmente para <strong>atendimento psicoterápico</strong> e também para consultoria em <strong>Recursos Humanos</strong>, com atendimento personalizado ao <strong>público</strong>, <strong>empresas</strong> e <strong>escolas</strong>.

<br /><br />

Além de tudo isso, Clínica se desenvolve constantemente para orientar <strong>profissionais e estudantes da área da saúde</strong> e da educacional.

<br /><br />

A Pokk Clínica possui atendimento especializado para pessoas com <strong>Síndrome de Down</strong> e seus familiares.

<br /><br />

Também contamos com cursos eventuais para aprimoramento dos profissionais da área de psicologia, sempre com profissionais capacitados e atualizados.

<br /><br />

Seja no âmbito psicoterápico ou de Recursos Humanos, colocamos nossos serviços, sempre com práticas consistentes e atualizadas, à disposição, objetivando sempre a compreensão das necessidades de cada um e a busca constante do bem-estar emocional e físico, atendendo as necessidades e solicitações do mundo contemporâneo.</p>

 </div>



<div class="boxes">

   <h3>Responsabilidade</h3>

   <span class="subtitle">A responsabilidade sobre a clínica</span>

<p>A  Pokk Clínica de Psicologia é responsabilidade do  profissional  que organiza,  gerencia e presta serviços  ao público, ampliando e divulgando  a clínica e suas atividades.  <br /><br />

 Está cadastrada sob o <strong>CRP Jurídico</strong>: 06/4678<br />

 A responsabilidade técnica:<br /><br />

Eduardo Henrique Niess Pokk -   CRP: 06/73.583<br /><br />

Psicólogo clínico com experiência desde<strong> 2003</strong> anos na área de <strong>psicologia clínica</strong>, com extensão em <strong>Gestão de Pessoas</strong> pela FGV, consultor de <strong>recursos humano</strong>s,  <strong>coach</strong>.  <br /><br />

Participante ativo na elaboração de projeto de ação e tratamento da síndrome de <strong>Burnout</strong>.</br>

<br />

</p>

 </div>



 <div class="boxes">

   <h3>Horários</h3>

   <span class="subtitle">Confira os horários </span>

   <p>Nós percebemos, após anos de observação, que a necessidade de horário da maior parte da população se alterou conforme o tempo foi passando.<br />

     <br />

    Foi pensando nisso que também readequamos nossos horários à sua necessidade:</br><br />

  <br />

   <strong>Segunda-feira</strong>: das 09h00 às 23h00<br />

   <strong>Terça-feira</strong>: das 09h00 às 23h00<br />

   <strong>Quarta-feira</strong>: das 09h00 às 23h00<br />

   <strong>Quinta-feira</strong>: das 09h00 às 23h00<br />

   <strong>Sexta-feira</strong>: das 09h00 às 23h00<br />

   <strong>Sábado</strong>: das 08h00 às 18h00<br /><br />

   *Em casos excepcionais, atendemos além do horário durante a semana e/ou aos <strong>domingos</strong>.<br />

 </div>

</div>

<!--/*Caixa total termina aqui*/-->

 <div class="rodape">teste</div>

</body>

</html>

CSS:



body{

    background-color: #FFF;

    border: none;

    alignment-adjust: central;    

    margin:20px auto 0 auto;

    width: 960px;

    

    background:url(images/fundo1.png) repeat-x;

    }

.caixa_total .menu .boxes {

    height:auto;

    

}

    div.caixa_total{

    alignment-adjust: central;}

    

            

        div.menu ul{

        padding-top:10px;

        float:right;    

    list-style: none;

            

        }

        div.menu ul li{

    display: inline;

    margin-left: 10px;

    padding: 10px;

    border-left: dotted 1px #35486A;

    

        }

    

        div.menu ul li a{

    text-align-last: none;

    color: #35486A;

            }

    div.logo{

        float:left;

        

        }

    

div.boxes{

    float: left;

    width: 298px;

    height: auto;

    margin-left: 10px;

    margin-right: 10px;

    

    }

.menu .boxes .subtitle {

    color: #666;

    margin-top: 5px;

}


div.boxes h3 {

    color: #35486A;

    margin-bottom: 5px;

    }

Arley Fellipe · 10 de junho de 2015

Olá, a class rodape não foi declarada no css!

Eduardo Pokk · 10 de junho de 2015

Olá, a class rodape não foi declarada no css!

De qualquer forma... citando ou não citando (eu já fiz o teste)... ele continua aparecendo no meio da página.

DiF · 10 de junho de 2015

@Eduardo Pokk

O lance é que o css pode estar mal otimizado... então poderia gerar conflito nas regras.

Por via das dúvidas eu recomendo que você refaça as regras.. mas se atentando a dica do maujor(Maurício Samy Silva).

Que consiste em declarar o height como 100% para body e html e posicionar o elemento de rodapé com posição absoluta e bottom em zero.

http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php

Arley Fellipe · 11 de junho de 2015

De qualquer forma... citando ou não citando (eu já fiz o teste)... ele continua aparecendo no meio da página.

Ok, mostre o código da class rodape pra gente analisar.

.rodape{

}

Eduardo Pokk · 11 de junho de 2015

@Eduardo Pokk

O lance é que o css pode estar mal otimizado... então poderia gerar conflito nas regras.

Por via das dúvidas eu recomendo que você refaça as regras.. mas se atentando a dica do maujor(Maurício Samy Silva).

Que consiste em declarar o height como 100% para body e html e posicionar o elemento de rodapé com posição absoluta e bottom em zero.

http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php

Cara... eu acho que vou desistir... eu realmente fiz tudo o que havia no site e o erro continua sendo exatamente o mesmo.

Pior que esse site é super importante pra mim, porque, o que posso dizer é que eu não sou desenvolvedor, sou psicólogo e quebro a cabeça pra poder me virar e fazer as coisas sem gastar dinheiro (não porque sou mão de vaca, mas porque não tenho mesmo)... enfim..

Fiz de outro jeito, usando frames (ficou um bicho feio da ...) mas até que eu consiga fazer um site descente, é assim que vai ficar ...

se quiser ver, entra lá... www.pokk.com.br

Ok, mostre o código da class rodape pra gente analisar.

.rodape{

}

.rodape {position:absolute;width:100%;bottom:0; /* stick to bottom */}.rodape p {padding:1em;margin:0;}

#detalhe: com ou sem absoluto ou relativo nas posições da div inicial e final, trocadas, intercaladas, etc... o footer continua aparecendo no meio da página

DiF · 11 de junho de 2015

@Eduardo Pokk

Não desiste. Apenas tente aprender como funciona.

Pelo que eu vi no post inicial.. o erro pode ser de estrutura.. e css.. Eu vi o seu site usando o iframe. é uma péssima ideia usa-los.

Não vou mexer no seu código.. mas eu desenvolvi um modelo parecido com o que está tentando fazer... mas respeitando a semântica e usando algumas tags do html 5.

Veja o exemplo online: http://jsfiddle.net/uepzb6zv/

Explicação do exemplo

Basicamente seu site precisa ter 4 elementos a nível de bloco.. por exemplo um elemento delimitando o espaço, um para o topo, um para o conteúdo e outro para o rodapé.

Vamos dizer que o elemento DIV denominado "tudo" abrange toda a área. vamos delimitar ela em 960px.

O topo, vamos chamar de header( html 5), o conteúdo vamos chamar de article(html 5) e o rodapé vamos chamar de footer(html 5)

Estes 3 elementos ocupam seu espaço preenchendo o elemento inicial ficando um acima do outro.

Dentro de header, é incluso um elemento para inserir a imagem do logotipo e um elemento para conter o menu, usando a tag nav(html 5)

Perceba que dentro de header, possui dois elementos chamados section, este elemento equivale ao elemento DIV, mas na semântica do html 5, onde o elemento DIV é usado para estruturar e o section é usado para separar os blocos dentro de um elemento div, article.. footer e etc.

De resto, é só estilização de texto.

Chamo a atenção para ver que cada elemento possui um background de cor diferente.. justamente para você poder visualizar onde eles estão.. depois que entender a estrutura e como foi feita.. você retira o background dos elementos.. deixa na cor que quiser.

Eduardo Pokk · 11 de junho de 2015

@Eduardo Pokk

Não desiste. Apenas tente aprender como funciona.

Pelo que eu vi no post inicial.. o erro pode ser de estrutura.. e css.. Eu vi o seu site usando o iframe. é uma péssima ideia usa-los.

Não vou mexer no seu código.. mas eu desenvolvi um modelo parecido com o que está tentando fazer... mas respeitando a semântica e usando algumas tags do html 5.

Veja o exemplo online: http://jsfiddle.net/uepzb6zv/

Explicação do exemplo

Basicamente seu site precisa ter 4 elementos a nível de bloco.. por exemplo um elemento delimitando o espaço, um para o topo, um para o conteúdo e outro para o rodapé.

Vamos dizer que o elemento DIV denominado "tudo" abrange toda a área. vamos delimitar ela em 960px.

O topo, vamos chamar de header( html 5), o conteúdo vamos chamar de article(html 5) e o rodapé vamos chamar de footer(html 5)

Estes 3 elementos ocupam seu espaço preenchendo o elemento inicial ficando um acima do outro.

Dentro de header, é incluso um elemento para inserir a imagem do logotipo e um elemento para conter o menu, usando a tag nav(html 5)

Perceba que dentro de header, possui dois elementos chamados section, este elemento equivale ao elemento DIV, mas na semântica do html 5, onde o elemento DIV é usado para estruturar e o section é usado para separar os blocos dentro de um elemento div, article.. footer e etc.

De resto, é só estilização de texto.

Chamo a atenção para ver que cada elemento possui um background de cor diferente.. justamente para você poder visualizar onde eles estão.. depois que entender a estrutura e como foi feita.. você retira o background dos elementos.. deixa na cor que quiser.

Beleza, dif!!!!

Agora o footer fica no lugar dele, mas se eu escrevo um texto um pouco mais longo nas caixas do corpo "article", ela fica atrás do footer....

teoricamente, tendo a aplicação de "height" = auto, as caixas te texto deveriam, na teoria, estabelecer um tamanho, conforme o tamanho do texto que eu coloco, concorda?

segue abaixo a nova formulação:

HTML

<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="stilo.css" rel="stylesheet" type="text/css" /></head><body><div id="tudo">    <header>        <section id="logo">        <img src="images/pokkclinica.jpg" width="200" height="68" /> </section>        <section id="menu">            <nav>                <ul>                    <li>Home</li>                    <li>Sobre</li>                    <li>Serviços</li>                    <li>CAPFR</li>                    <li>Parceiros</li>                    <li>Planos</li>                    <li>Contato</li>                </ul>            </nav>        </section>        </header>    <article>    <section id="texto1">      <h1 class="titulo textos"></h1>        <p class="textos">           <h3>Psicoterapia</h3>   <span class="subtitle">O que é?</span><br />  A psicoterapia (do grego psykhē - mente, e therapeuein - curar;) é um tipo de terapia, cuja finalidade é tratar os problemas psicológicos, tais como depressão, ansiedade, dificuldades de relacionamento, entre outros problemas de saúde mental.<br /><br />  Por ser uma da área da saúde mental, a psicoterapia é a principal linha de tratamento para qualquer assunto referente ao psiquismo. Para isso, propõem intervenções psicológicas, cujos objetivos centrais são:<br /><br /><ul><li>restabelecer o funcionamento psíquico ótimo do paciente;</li><li>permitir que o paciente compreenda as causas do que lhe acomete, para que possa encontrar recursos psíquicos para lidar com suas dificuldades, problemas, etc;</li><li>desenvolver meios de agir no mundo, redefinindo seus traços de personalidade.</li><li>solucionar problemas pontuais, que o afligem, bem como, observar questões de cunho mais existencial.</li>    </ul>  </section>         <section id="texto1">      <h1 class="titulo textos"></h1>        <p class="textos">              <h3>Me formei em psicologia</h3>   <span class="subtitle">E agora?</span><br />            Se você optou por seguir a carreira de psicologia clíncia, conte conosco <br /><br />Foi para isso que nós tivemos a idéia de produzir o CAPFR - Centro de Apoio ao Psicólogo Recém Formado.<br /><br />Clique no link acima e saiba um pouco mais.</br>  </section>       <section id="texto1">      <h1 class="titulo textos"></h1>        <p class="textos">                      <h3>Tenho uma empresa pequena</h3>   <span class="subtitle">Como sustentar um RH?</span><br />  Não precisa se preocupar!<br />   Se você é um pequeno empresário e precisa de apoio de um RH, conte conosco!     <br />    Entre em contato conosco agora e tire suas dúvidas: <a href="mailto:[email protected]">[email protected]</a><br />          </p>  </section>                </article>      <div id="footer">           <h1 class="titulo textos"></h1>        <p class="textos">              <section id="texto2">        <p class="textos">                      Endereço:          Av. Fagundes Filho, 252, cj 107<br />          São Judas - São Paulo - SP<br />          </p>  </section>      <section id="texto2">             <p class="textos">   Responsável técnico:<br />   Eduardo Henrique Niess Pokk<br /><br />     Pokk Clínica de Psicologia e Recursos Humanos<br />CRP:<br />          </p>  </section>      <section id="texto2">    <p class="textos"> <nav>                <ul>                    <ul>                      <li><img src="images/face.png" width="25" height="25" /> </li>                                        <li><img src="images/tw.png" width="25" height="25" /></li>                </ul>            </nav>        </p>  </section>   </div>   </body></html>

CSS:

@charset "utf-8";/* CSS Document */*{margin: 0; padding: 0;}html, body{    width: 100%;    background: #FFF;}#tudo{    margin: 0 auto;    width: 960px;    height: 100%;    background: #FFFFFF;	}#tudo header{    display: table;    width: 100%;    height: 100px;   }#logo{    margin-top: 15px;    float: left;    width: 200px;    height: 68px;       text-align: center;    line-height: 68px;    }#menu{     float: left;    width: 760px;    height: 100px;   }#menu nav ul{    list-style: none;    margin: 20px;}#menu nav ul li{    float: left;    margin-left: 10px;    width: 90px;    height: 50px;    text-align: center;    line-height: 50px;}#tudo article{    width: 100%;    height: auto;    background: #528CA8;	}.textos{    padding: 10px;    text-align: justify;	height:auto;}.titulo{    color: #fff;    font-family: verdana;    font-weight: bold;}#texto1{	width: 298px;	height: auto;	float: left;	color: #333;	margin-left: 15px;}#texto2{	width: 298px;	height: auto;	float: left;	color: #FFF;	margin-left: 15px;	}#texto2 ul{	list-style: none;	alignment-adjust: central;}#texto2 ul li{	display: inline;	alignment-adjust: central;	}#footer{	width: 960px;	height: auto;	bottom: 0px;	position: absolute;	background-color: #006;}

Alguma sugestão?

DiF · 11 de junho de 2015

@Eduardo Pokk

O erro aconteceu por que você tentou mexer na estrutura que eu tinha feito. Note que você substituiu o elemento footer por um elemento div. Além disso, você usou ID em vários elementos ao invés de class.

A explicação é a seguinte: Quando precisamos repetir uma regra em N elementos, usamos "class", quando um elemento for único, ou seja usado uma vez, usamos ID.

Por conta disso um elemento id se sobrepõe sobre o outro.. fazendo o inverso do objetivo.

O posicionamento dos elementos lado a lado pode ser feito através do atributo display. colocando em "table" você força os elementos agirem como em uma tabela, sem precisar depender do atributo float que as vezes atrapalha.

Uma coisa que percebi no seu código é que existe erros de fechamento de tag ou elementos a mais, isso é comum. só é corrigido com prática!

Veja o meu exemplo atualizado. estude cada parte do código e do seu css e tente entender como funciona: http://jsfiddle.net/uepzb6zv/2/

Eduardo Pokk · 12 de junho de 2015

@Eduardo Pokk

O erro aconteceu por que você tentou mexer na estrutura que eu tinha feito. Note que você substituiu o elemento footer por um elemento div. Além disso, você usou ID em vários elementos ao invés de class.

A explicação é a seguinte: Quando precisamos repetir uma regra em N elementos, usamos "class", quando um elemento for único, ou seja usado uma vez, usamos ID.

Por conta disso um elemento id se sobrepõe sobre o outro.. fazendo o inverso do objetivo.

O posicionamento dos elementos lado a lado pode ser feito através do atributo display. colocando em "table" você força os elementos agirem como em uma tabela, sem precisar depender do atributo float que as vezes atrapalha.

Uma coisa que percebi no seu código é que existe erros de fechamento de tag ou elementos a mais, isso é comum. só é corrigido com prática!

Veja o meu exemplo atualizado. estude cada parte do código e do seu css e tente entender como funciona: http://jsfiddle.net/uepzb6zv/2/