empurrar conteúdo para baixo

saulo69 · Maio 6, 2015

Bom pessoal, estou com um problema no browser do android, quando vou responsivar, o conteúdo da #main fica por cima do footer. Nos outros browsers consigo ver normalmente... Segue código:

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300);

body{

font-size:62.5%; /* Define 10px = 1em */

}

/* utilidades

//////////////////////////////////////*/

*, *:before, *:after{

box-sizing: border-box;

}

.cf:before, .cf:after{

content:"";

display:table;

}

.cf:after{

clear:both;

}

.cf{

*zoom:1;

}

/* ./utilidades*/

/* TOPO

//////////////////////////////////////*/

.topo{

width:100%;

height:15em;

background-image:url(../imagens/bgTop.jpg);

background-repeat:repeat-x;

position:relative;

}

.topo img{

position:absolute;

left:50%;

;

margin-top:1em;

max-width:100%;

}

.topo h1{

font-family:'Yanone Kaffeesatz',Arial,Verdana,sans-serif;

font-size:2.4em;

text-align:center;

padding-top:5em;

color:#134172;

}

/* ./TOPO */

.menu{

width:100%;

height:4em;

background-color:#01224d;

}

nav{

margin:0 auto;

padding:0;

max-width:120em;

display:none;

}

/* ./MENU */

/* Corpo */

#main{

max-width:120em;

margin:0 auto;

padding-top:4em;

}

#main #glbLtf{

width:65%;

float:left;

}

#main > header{

width:100%;

margin-bottom:4em;

padding-bottom:5em;

}

#main > header h1{

font-family:Arial,Verdana,sans-serif;

font-size:3.0em;

text-align:left;

color:#333;

float:left;

}

#main > header h5{

font-family:Arial,Verdana,sans-serif;

font-size:1.4em;

text-align:left;

color:#333;

float:left;

padding-top:1em;

margin-left:2em;

}

#glbLtf ul{

width:100%;

height:3em;

display:inline-block;

}

#glbLtf ul li{

list-style:none;

margin-top:1%;

background:#f6f6f6;

border:1px solid #ccc;

padding:1em;

}

#glbLtf ul li a{

font-family:Arial, Helvetica, sans-serif;

font-size:1.4em;

color:#01224d;

text-decoration:none;

}

#glbLtf ul li a:hover{

color:#333;

text-decoration:underline;

}

aside{

width:24%;

float:right;

}

aside header{

width:100%;

height:3.3em;

border-bottom:1px solid #94854d;

}

aside header h1{

font-family:'Yanone Kaffeesatz',Arial,sans-serif;

font-size:2.4em;

text-align:left;

color:#134172;

border-bottom:3px solid #01224d;

padding-bottom:0.15em;

display:inline;

}

aside ul{

height:3em;

padding-top:5em;

}

aside ul li{

list-style:none;

margin:0.5em;

background:#f6f6f6;

border:1px solid #ccc;

padding:1em 4em;

display:inline-block;

}

aside ul li a{

font-family:Arial, Helvetica, sans-serif;

font-size:1.8em;

color:#01224d;

text-decoration:none;

}

aside ul li a:hover{

color:#333;

text-decoration:underline;

}

/* ./Corpo */

/* FOOTER

//////////////////////////////////////*/

.footer{

width:100%;

height:40.3em;

margin-top:10em;

background-color:#001931;

border-top: 5px solid #94854d;

}

.footer footer{

max-width:120em;

height:39em;

margin:0 auto;

}

footer .busca{

height:8em;

width:100%;

border-bottom: 1px solid #011f44;

padding-top:3.1em;

}

.busca form{

width:40%;

float:left;

position:relative;

}

.busca form input[type=search]{

background-color:#FFF;

border:none;

width:80%;

height:25px;

}

.busca form input[type=submit]{

width:37px;

height:25px;

position:absolute;

text-indent:-9999px;

cursor:pointer;

border:none;

background:#FFF url(../imagens/icon-search.jpg) no-repeat;

}

.busca img{

float:right;

margin-left:1em;

}

.footer-nav{

width:12%;

height:31em;

float:left;

}

.footer-nav header{

width:100%;

height:3.3em;

border-bottom:1px solid #011f44;

padding-top:0.6em;

}

.footer-nav header h1{

font-family:'Yanone Kaffeesatz',Arial,Verdana,sans-serif;

font-size:1.8em;

text-align:left;

color:#FFF;

display:inline;

}

.footer-nav ul{

float:left;

}

.footer-nav li{

margin-top:1em;

padding: 0;

list-style: none;

display:block;

}

.footer-nav li a {

font-family:Arial, Helvetica, sans-serif;

font-size:1.1em;

text-decoration: none;

color: #fff;

}

.footer-nav li a:hover {

text-decoration:underline;

}

.links-uteis{

width:16.66%;

height:31em;

float:left;

margin-left:10%;

}

.links-uteis header{

width:100%;

height:3.3em;

border-bottom:1px solid #011f44;

padding-top:0.6em;

}

.links-uteis header h1{

font-family:'Yanone Kaffeesatz',Arial,Verdana,sans-serif;

font-size:1.8em;

text-align:left;

color:#FFF;

display:inline;

}

.links-uteis ul{

float:left;

}

.links-uteis li{

margin-top:1em;

padding: 0;

list-style: none;

display:block;

}

.links-uteis li a {

font-family:Arial, Helvetica, sans-serif;

font-size:1.1em;

text-decoration: none;

color: #fff;

}

.links-uteis li a:hover {

text-decoration:underline;

}

.telefones-enderecos{

width:48.91%;

height:31em;

float:right;

margin-left:10%;

}

.telefones-enderecos header{

width:100%;

height:3.3em;

border-bottom:1px solid #011f44;

padding-top:0.6em;

}

.telefones-enderecos header h1{

font-family:'Yanone Kaffeesatz',Arial,Verdana,sans-serif;

font-size:1.8em;

text-align:left;

color:#FFF;

display:inline;

}

.telefones-enderecos p{

margin-top:1em;

max-width:48%;

float:left;

font-family:Arial, Helvetica, sans-serif;

font-size:1.1em;

line-height:1.5em;

color: #fff;

}

.telefones-enderecos p:last-child{

margin-left:4%;

}

/* ./FOOTER */

.autor{

padding-top:1em;

width:100%;

height:3.6em;

background-color:#94854d;

}

.autor div{

max-width:120em;

margin:0 auto;

}

.autor div h6{

max-width:120em;

text-align:right;

font-family:'Yanone Kaffeesatz',Arial,Verdana,sans-serif;

font-size:1.4em;

color:#FFF;

}

@media (max-width: 1000px){

#main{

max-width: 120em;

margin: 0 auto;

padding:2em 1em 0 1em;

}

#main > header {

width: 100%;

margin-bottom: 2.5em;

padding-bottom: 0;

}

#main > header h1 {

font-family: Arial,Verdana,sans-serif;

font-size: 3em;

text-align: left;

color: #333;

float: none;

}

#main > header h5 {

font-family: Arial,Verdana,sans-serif;

font-size: 1.4em;

text-align: left;

color: #333;

padding-top: 1em;

margin-left: 0;

float: none;

}

@media (max-width: 640px){

aside {

width: 100%;

height: auto;

margin: 5em 0;

float:none;

}

aside ul {

padding-top: 5em;

display:table;

}

#main #glbLtf {

width: 100%;

float:none;

}

<!doctype html>

<html>

<head>

<title>AMEPE na Mídia</title>

</head>

<body>

<h1>Associação dos Magistrados do Estado de Pernambuco</h1>

</header>

<ul>

<li><a href="#">Página Inicial</a></li>

<li><a href="#">Institucional</a>

<li><a href="#">Agenda do Presidente</a></li>

<li><a href="#">Armas e Munições</a></li>

<li><a href="#">Art. do Jud. na Imprensa</a></li>

<li><a href="#">Ata de Fundação</a></li>

<li><a href="#">Atas da AMEPE</a></li>

<li><a href="#">Atos da Presidência</a></li>

<li><a href="#">Código de Org. Judiciária</a></li>

<li><a href="#">Coordenadorias</a></li>

<li><a href="#">Diretorias e Funções</a></li>

<li><a href="#">Escala de Ferias</a></li>

<li><a href="#">Estatuto Social</a></li>

<li><a href="#">Lista de Antiguidades</a></li>

<li><a href="#">Ofícios da Presidência</a></li>

<li><a href="#">Plantões do Judiciário</a></li>

<li><a href="#">Portarias</a></li>

<li><a href="#">Processos do CNJ</a></li>

<li><a href="#">Provimento do TJPE</a></li>

<li><a href="#">Relação de Juízes</a></li>

<li><a href="#">Resoluções AMEPE</a></li>

<li><a href="#">Tabela de Subs. aut.</a></li>

</ul>

</li>

<li><a href="#">Sedes</a>

<li><a href="#">Paula Baptista</a></li>

<li><a href="#">Rodolfo Aureliano</a></li>

<li><a href="#">Social</a></li>

<li><a href="#">Campestre</a></li>

</ul>

</li>

<li><a href="#">Publicações</a>

<li><a href="#">AMEPE na Mídia</a></li>

<li><a href="#">Cadernos AMEPE</a></li>

<li><a href="#">Judicatura</a></li>

<li><a href="#">Literatura Jurídica</a></li>

<li><a href="#">Literatura Universal</a></li>

<li><a href="#">Túnel do Tempo</a></li>

</ul>

</li>

<li><a href="#">Convênios</a></li>

<li><a href="#">Multimídia</a></li>

<li><a href="#">Links Úteis</a>

<li><a href="#">Associação de Peritos</a></li>

<li><a href="#">CAMPE</a></li>

<li><a href="#">Diário Oficial de Pernambuco</a></li>

<li><a href="#">Pernambucred</a></li>

<li><a href="#">Luta pela Justiça</a></li>

</ul>

</li>

<li><a href="#">Fale Conosco</a></li>

<li><a href="#">Ouvidoria</a></li>

</ul>

<h2><a href="#"><img src="../../imagens/icon-cadeado.png">Área do Associado</a></h2>

</nav>

</div>

<h1>AMEPE NA MÍDIA</h1>

<h5>* Notícias sobre a AMEPE que circularam nos principais jornais</h5>

</header>

<aside>

<h1>ANOS ANTERIORES</h1>

</header>

<ul>

</ul>

</aside>

<ul>

<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>

</ul>

</div>

</section>

</form>

</section>

</header>

<ul>

<li><a href="#">Página Inicial</a></li>

<li><a href="#">Institucional</a></li>

<li><a href="#">Sedes</a></li>

<li><a href="#">Publicações</a></li>

<li><a href="#">Convênios</a></li>

<li><a href="#">Multimídia</a></li>

<li><a href="#">Links Úteis</a></li>

<li><a href="#">CAMPE</a></li>

<li><a href="#">Pernambucred</a></li>

<li><a href="#">Fale Conosco</a></li>

<li><a href="#">Ouvidoria</a></li>

</ul>

</section>

<h1><img src="../imagens/icon-links-uteis.jpg"> LINKS ÚTEIS</h1>

</header>

<ul>

<li><a href="#">Associação de Peritos</a></li>

<li><a href="#">CAMPE</a></li>

<li><a href="#">Diário Oficial de Pernambuco</a></li>

<li><a href="#">Pernambucred</a></li>

<li><a href="#">Luta pela Justiça</a></li>

</ul>

</section>

<h1><img src="../imagens/icon-localizacao.jpg"> TELEFONES E ENDEREÇOS</h1>

</header>

<p>

SEDE ADMINISTRATIVA<br>

Rua do imperador, 207, CEP:50010-240, Santo Antônio, Recife-PE <br>

Fone: (81) 3224.3251 Fax: (81) 3224.6977<br><br>

SEDE APOIO<br>

Av. Desembargador Guerra Barreto, S/N - Joana Bezerra. Recife - PE. <br>

Fone: (81) 3181-0459 / (81) 3181-0460 / Fax: (81) 3222.7379

</p>

<p>

SEDE SOCIAL<br>

Rua Pe. Nestor Alencar, 6501, CEP:54460-020, Candeias, Jaboatão dos Guararapes-PE <br>

Fone: (81) 3469.7071<br><br>

SEDE CAMPESTRE<br>

Rua Gov. Eraldo Gueiros Leite, 265, Lot. Alpes Suíços, CEP:55640-000, Gravatá-PE <br>

Fone: (81) 3533.1149

</p>

</section>

</footer>

</div>

<div><h6>DESENVOLVIDO PELO SETOR DE INFORMÁTICA DA AMEPE</h6></div>

</div>

</body>

</html>

guilomaker · Maio 6, 2015

aqui esta normal!

eu só coloquei um reset nas margens e paddings

* {margin:0; padding:0;}

o main esta se mantendo la em cima e o fotter la em baixo sem ninguem sobrepor ninguem.

saulo69 · Maio 6, 2015

aqui esta normal!

eu só coloquei um reset nas margens e paddings

* {margin:0; padding:0;}

o main esta se mantendo la em cima e o fotter la em baixo sem ninguem sobrepor ninguem.

Olá, vc testou no browser do próprio android? No meu está sobrepondo...

Valeu irmão!

guilomaker · Maio 6, 2015

Olá, você testou no browser do próprio android? No meu está sobrepondo...

Valeu irmão!

eu não uso android, eu testo pelo toggle device mode do chrome, não tenho 100% de certeza se ele simula um navegador mobile mesmo.

vamos esperar pra ver se alguem responde ai.

saulo69 · Maio 7, 2015

[inline]#glbLtf ul{
width:100%;
height:3em;
display:inline-block;
}
[/inline]
O problema estava aqui...

Entrar

Arquivado

empurrar conteúdo para baixo

Recommended Posts

saulo69 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

guilomaker 31

Compartilhar este post

Link para o post

Compartilhar em outros sites

saulo69 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

guilomaker 31

Compartilhar este post

Link para o post

Compartilhar em outros sites

saulo69 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fazer busca no Banco de dados usando vários critério

agregar dados em VBA excel

Sistema não funciona corretamente

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante