Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
}content:"";
display:table;
}clear:both;
}
.cf{
*zoom:1;
}/* 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;
}/ 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;
}font-family:Arial,Verdana,sans-serif;
font-size:3.0em;
text-align:left;
color:#333;
float:left;
}font-family:Arial,Verdana,sans-serif;
font-size:1.4em;
text-align:left;
color:#333;
float:left;
padding-top:1em;
margin-left:2em;
}width:100%;
height:3em;
display:inline-block;
}list-style:none;
margin-top:1%;
background:#f6f6f6;
border:1px solid #ccc;
padding:1em;
}font-family:Arial, Helvetica, sans-serif;
font-size:1.4em;
color:#01224d;
text-decoration:none;
}color:#333;
text-decoration:underline;
}
aside{
width:24%;
float:right;
}width:100%;
height:3.3em;
border-bottom:1px solid #94854d;
}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;
}height:3em;
padding-top:5em;
}list-style:none;
margin:0.5em;
background:#f6f6f6;
border:1px solid #ccc;
padding:1em 4em;
display:inline-block;
}font-family:Arial, Helvetica, sans-serif;
font-size:1.8em;
color:#01224d;
text-decoration:none;
}color:#333;
text-decoration:underline;
}
/ ./Corpo /
/* FOOTER
//////////////////////////////////////*/
.footer{
width:100%;
height:40.3em;
margin-top:10em;
background-color:#001931;
border-top: 5px solid #94854d;
}max-width:120em;
height:39em;
margin:0 auto;
}height:8em;
width:100%;
border-bottom: 1px solid #011f44;
padding-top:3.1em;
}width:40%;
float:left;
position:relative;
}background-color:#FFF;
border:none;
width:80%;
height:25px;
}width:37px;
height:25px;
position:absolute;
text-indent:-9999px;
cursor:pointer;
border:none;
background:#FFF url(../imagens/icon-search.jpg) no-repeat;
}float:right;
margin-left:1em;
}
.footer-nav{
width:12%;
height:31em;
float:left;
}width:100%;
height:3.3em;
border-bottom:1px solid #011f44;
padding-top:0.6em;
}font-family:'Yanone Kaffeesatz',Arial,Verdana,sans-serif;
font-size:1.8em;
text-align:left;
color:#FFF;
display:inline;
}float:left;
}margin-top:1em;
padding: 0;
list-style: none;
display:block;
}font-family:Arial, Helvetica, sans-serif;
font-size:1.1em;
text-decoration: none;
color: #fff;
}text-decoration:underline;
}
.links-uteis{
width:16.66%;
height:31em;
float:left;
margin-left:10%;
}width:100%;
height:3.3em;
border-bottom:1px solid #011f44;
padding-top:0.6em;
}font-family:'Yanone Kaffeesatz',Arial,Verdana,sans-serif;
font-size:1.8em;
text-align:left;
color:#FFF;
display:inline;
}float:left;
}margin-top:1em;
padding: 0;
list-style: none;
display:block;
}font-family:Arial, Helvetica, sans-serif;
font-size:1.1em;
text-decoration: none;
color: #fff;
}text-decoration:underline;
}
.telefones-enderecos{
width:48.91%;
height:31em;
float:right;
margin-left:10%;
}width:100%;
height:3.3em;
border-bottom:1px solid #011f44;
padding-top:0.6em;
}font-family:'Yanone Kaffeesatz',Arial,Verdana,sans-serif;
font-size:1.8em;
text-align:left;
color:#FFF;
display:inline;
}margin-top:1em;
max-width:48%;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:1.1em;
line-height:1.5em;
color: #fff;
}margin-left:4%;
}.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;
} font-family: Arial,Verdana,sans-serif;
font-size: 1.4em;
text-align: left;
color: #333;
padding-top: 1em;
margin-left: 0;
float: none;
}
} 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>
<meta charset="utf-8">
<title>AMEPE na Mídia</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../../css/reset.css">
<link rel="stylesheet" href="../../css/publicacoes/amepeMidia.css">
<script src="../js/prefixfree.min.js"></script>
<script src="../js/html5shiv.min.js"></script>
</head>
<body>
<header class="topo">
<img src="../../imagens/logo.png" class="logo" alt="Logomarca AMEPE">
<h1>Associação dos Magistrados do Estado de Pernambuco</h1>
</header>
<div class="menu">
<nav aria-haspopup="true">
<ul>
<li><a href="#">Página Inicial</a></li>
<li><a href="#">Institucional</a>
<ul class="submenu">
<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>
<ul class="submenu">
<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>
<ul class="submenu">
<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>
<ul class="submenu">
<li><a href="#">Associação de Peritos</a></li>
<li><a href="#">CAMPE</a></li>
<li><a href="#">CNJ</a></li>
<li><a href="#">Diário Oficial de Pernambuco</a></li>
<li><a href="#">IMP</a></li>
<li><a href="#">Pernambucred</a></li>
<li><a href="#">Luta pela Justiça</a></li>
<li><a href="#">STF</a></li>
<li><a href="#">STJ</a></li>
<li><a href="#">TJPE</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>
<section id="main">
<header>
<h1>AMEPE NA MÍDIA</h1>
<h5>* Notícias sobre a AMEPE que circularam nos principais jornais</h5>
</header>
<aside>
<header>
<h1>ANOS ANTERIORES</h1>
</header>
<ul>
<li><a href="#">2009</a></li>
<li><a href="#">2008</a></li>
<li><a href="#">2007</a></li>
<li><a href="#">2006</a></li>
<li><a href="#">2005</a></li>
</ul>
</aside>
<div id="glbLtf">
<ul>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
<li><a href="#">ELEIÇÕES AMEPE 2009. <em>(Jornal do Commercio) - 06/12/2009</em></a></li>
</ul>
</div>
</section>
<div class="cf"></div>
<div class="footer">
<footer>
<section class="busca">
<form action="#" method="get">
<input type="search" placeholder="Realize sua busca">
<input type="submit">
</form>
<img src="../imagens/icon-you-tube.jpg">
<img src="../imagens/icon-twitter.jpg">
<img src="../imagens/icon-facebook.jpg">
<img src="../imagens/icon-mail.jpg">
</section>
<section class="footer-nav">
<header>
<h1>≡ MENU</h1>
</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>
<section class="links-uteis">
<header>
<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="#">CNJ</a></li>
<li><a href="#">Diário Oficial de Pernambuco</a></li>
<li><a href="#">IMP</a></li>
<li><a href="#">Pernambucred</a></li>
<li><a href="#">Luta pela Justiça</a></li>
<li><a href="#">STF</a></li>
<li><a href="#">STJ</a></li>
<li><a href="#">TJPE</a></li>
</ul>
</section>
<section class="telefones-enderecos">
<header>
<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 class="autor">
<div><h6>DESENVOLVIDO PELO SETOR DE INFORMÁTICA DA AMEPE</h6></div>
</div>
</body>
</html>Carregando comentários...