problema com rodape em layout responsivo?
Ola pessoas do forum..
é o seguinte, tenho um codigo html que formula o menu do meu do site.
nele temos diversos botoes, que eu criei com divs alinhadas,
embaixo destes botoes tem o rodape, com o copry, e uma seta para voltar a pagina anterior, porem
sempre que eu vou alinhar este botao, e o cpry no fundo ele vai ficando no meio da pagina e sobrescrevendo o conteudo
do menu e agora vou colocar o codigo, se voces juntarem da pra vizualiza.
<DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style123456789/menu.css"/>
<link href='[https://fonts.googleapis.com/css?family=Fjalla+One'](https://fonts.googleapis.com/css?family=Fjalla+One) rel='stylesheet' type='text/css'>
<SCRIPT LANGUAGE="JavaScript">
function disableselect(e){
return false
}
function reEnable(){
return true
} document.onselectstart=new Function ("return false")
document.oncontextmenu=new Function ("return false") if (window.sidebar){
document.onmousedown=disableselect
dosument.onclick=reEnable
}
</script>
</head>
<body>
<div class="logo">
<img src="midia/LL.png" height="130px" width="130px">
</div>
<div class="titulo">
<h1>FRIGORÍFICO (Tipos de Compra)</h1>
</div>
<div class="container1">
<div class="linha">
<div class="tile vermelho">
<a href="menu.html" style="color:#ffffff">FRIGORÍFICO</a>
<div class="tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile azul">
<a href="ativo_imobilizado.html" style="color:#ffffff">Ativo Imobilizado</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile ciano">
<a href="ativo_imobilizado.html" style="color:#ffffff">Transporte:Compra de MP, ME E MI</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile verde_desbot">
<a href="ativo_imobilizado.html" style="color:#ffffff">Carvão</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile rosa">
<a href="ativo_imobilizado.html" style="color:#ffffff">Embalagens de Papelão</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile marrom">
<a href="ativo_imobilizado.html" style="color:#ffffff">Etiquetas</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile ceu">
<a href="ativo_imobilizado.html" style="color:#ffffff">Lenha</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile marrom">
<a href="ativo_imobilizado.html" style="color:#ffffff">Transporte:Compra Mat.Diversos</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile verde_desbot">
<a href="ativo_imobilizado.html" style="color:#ffffff">Prestação de Serviço</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile rosa">
<a href="ativo_imobilizado.html" style="color:#ffffff">Embalagens Plásticas</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile vermelho">
<a href="ativo_imobilizado.html" style="color:#ffffff">Outras Embalagens</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile ciano">
<a href="ativo_imobilizado.html" style="color:#ffffff">Energia Elétrica</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile vermelho">
<a href="ativo_imobilizado.html" style="color:#ffffff">Óleo Diesel(prod acabado)</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile azul">
<a href="ativo_imobilizado.html" style="color:#ffffff">Gás Industrial</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile rosa">
<a href="ativo_imobilizado.html" style="color:#ffffff">Manutenção Geral</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile ceu">
<a href="ativo_imobilizado.html" style="color:#ffffff">MP:Temperos e Condimentos</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile azul">
<a href="ativo_imobilizado.html" style="color:#ffffff">Medicamentos Veterinários</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile verde_desbot">
<a href="ativo_imobilizado.html" style="color:#ffffff">Man.Veículos Trans.Prod Acabado</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile marrom">
<a href="ativo_imobilizado.html" style="color:#ffffff">MP:Milho e farejo</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile ciano">
<a href="ativo_imobilizado.html" style="color:#ffffff">Telefone</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile vermelho">
<a href="ativo_imobilizado.html" style="color:#ffffff">Manutenção Industrial</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile ciano">
<a href="ativo_imobilizado.html" style="color:#ffffff">Óleo Diesel(caminhões MP)</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile marrom">
<a href="ativo_imobilizado.html" style="color:#ffffff">Man.Veiculos Transp. Mat prima</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile marrom">
<a href="ativo_imobilizado.html" style="color:#ffffff">MP:C.M.S</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile marrom">
<a href="ativo_imobilizado.html" style="color:#ffffff">MP:Carne Bovina</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile marrom">
<a href="ativo_imobilizado.html" style="color:#ffffff">MP:Carne de Frango</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile marrom">
<a href="ativo_imobilizado.html" style="color:#ffffff">MP:Carne Suína</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
<div class="tile marrom">
<a href="ativo_imobilizado.html" style="color:#ffffff">MP:Suplementos/Núcleo</a>
<div class=" tilemenor branco">
<a href="menu.html"><img src="midia/suino_bordo.png"></a>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>css
body{
overflow-x:hidden;
width:100%;
height:100%;
font-family: 'Fjalla One', sans-serif;
background:#a1312f;
color: #000000;
padding:0%;
margin:0%;
}h1{
font-family:'Fjalla One', sans-serif;
color:#ffffff;
font-size:30px;
padding:10px;
}h2{
position:absolute;
bottom:32px;
left:2px;
width:80%;
}
.container1{
background:#a1312f;
width:100%;
height:100px;
padding:10px;
}
.linha{
width:auto;
padding:0px;
height:120px;/*120px;*/
display:table;
text-align:center;
margin:0px 0px 0px 50px;
float:left;
}
.tile{
float:left;
padding:2px;
height:110px;
width:160px;
border-radius:7px;
text-align:center;
margin:5px 0px 0px 5px;
position:relative;
}
.tilemenor{
border-radius:10px;
margin:3px 0px 10px 25px;
height:55%;
width:65%;
position:absolute;
bottom:0px;
}
.footer{
position:absolute;
bottom:0px;
background:#ffffff;
height:7.8125%;/*60px;*/
width:100%;
}.logo img{
height:80px;/130px;/
width:80px;/130px;/
float:right;
}img{
height:50px;/50px;/
width:50px;/50px;/
display:inline;
margin:10px;
}.tile a{
color:#ffffff;
text-decoration:none;
font-size:14px;
}
.branco{
background:#ffffff;
}
.vermelho{
background:#E9967A;
}
.azul{
background:#4682B4;
}
.amarelo{
background: #E8E8E8;
}
.verde_desbot{
background:#8FBC8F;
}
.marrom{
background:#DEB887;
}
.ceu{
background:#ADD8E6;
}
.rosa{
background:#9370DB;
}
.ciano{
background:#5F9EA0;
}Discussão (4)
Carregando comentários...