Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Eduardo_555

problema com rodape em layout responsivo?

Por , em Desenvolvimento frontend

Recommended Posts

Eduardo_555    4

Eduardo_555
Postado

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' rel='stylesheet' type='text/css'>
<SCRIPT LANGUAGE="JavaScript">
		function disableselect(e){
		return false
		}
		function reEnable(){
		return true
		}
//if IE4+
	document.onselectstart=new Function ("return false")
	document.oncontextmenu=new Function ("return false")
//if NS6	
	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;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

pmmartinelli    13

pmmartinelli
Postado

Eduardo, explique melhor seu problema.

 

Rodei o teu codigo e não encontrei problemas com o footer.

Aliás, no teu código não há nada dentro do Footer. Será que não faltou o botão e o copyright?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eduardo_555    4

Eduardo_555
Postado

a sim agradeço mas resolvi o problema, só coloquei ele com position :fixed, e criei uma margin para espaçar entre o menu e ele, e ali e verdade, copiei o código antes de colocar o copry no footer.

 

mas agora tenho outro problema, tenho um botão de voltar ao lado, do copry, e ele sempre fica por baixo do copry

 

criando assim a barra de rolagem, sera que o problema é o position fixed

 

ta ai o código correto

<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' rel='stylesheet' type='text/css'>
<SCRIPT LANGUAGE="JavaScript">
		function disableselect(e){
		return false
		}
		function reEnable(){
		return true
		}
//if IE4+
	document.onselectstart=new Function ("return false")
	document.oncontextmenu=new Function ("return false")
//if NS6	
	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">
	<h6>© Direitos reservados a APR Assessoria Empresarial - v 1.0<h6>
</div>
<div class="img">
	<a href="inicio.html"><img src="midia/retorno.png"></a>
</div>
</body>
</html>

e o 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%;
}
.img img{
	height:40px;
	width:40px;
	bottom:0px;
	position:relative;
}
.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 65px 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;
}
h6{
	font-size:15px;
	position:fixed;
	bottom:0;
	text-align:center;
	width:100%;
	color:#ffffff;
	margin-top:100px;
	float:left;
}
.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;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eduardo_555    4

Eduardo_555
Postado

ola valeu pela dica

 

mas eu resolvi diferente

 

oque estava bloqueando de ficar perto dos botoes era a margin dos botoes que eu havi colocado 60px sabese la porquekk

 

dai reduzi

 

pra 2px e pronto

 

resolvido!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Kisha
      [Orçamento] Desenvolvimento Site Responsivo
      Por Kisha
      Estou procurando um programador web para desenvolver um site front responsivo, de preferência pessoas com referências e trabalhos já feitos.
       
      Contato via discord: quando eu tinha uma glock#5547
    • 4Unknow
      Duplicar botão. Não estou conseguindo.
      Por 4Unknow
      Boa noite comunidade da Imasters, como vocês estão?

      Pessoal peguei um botão responsivo com popup, mas não consigo adicionar mais dele um do lado do outro.
      Vou deixar o conteúdo dele aqui se alguém puder me dar uma luz. Só queria copiar ele para adicionar mais dois botões um ao lado do outro.

      Quem puder me ajudar, ficaria agradecido.

      segue código:

      index.html:
       
      <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Alterações Robô Everest</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <h1> Configurações Robô Everest </h1> <h2> Data: 14/04/2021</h2> <button type="button" class="main-btn-rect popup-btn" data-popup="popup-reg">Modo Agressivo</button> <div id="popup-reg" class="popup"> <div class="popup-content"> <div class="event-header"> <h6>Don't be shy, say hi!</h6> </div> Stop Loss: 255<br> Stop Gain: 30<br><br> Ou a seu gosto!<br><br> Desvio Envelope: 0.12<br><br> Pausas nas operações: 10:00,11:00,10:30,12:30<br> <span class="fade-out main-btn-circle">╳</span> </div> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script> </body> </html>
      script.js:
       
      $(document).ready(function(){ $('.popup-btn').click(function(){ var popupBlock = $('#'+$(this).data('popup')); popupBlock.addClass('active') .find('.fade-out').click(function(){ popupBlock.css('opacity','0').find('.popup-content').css('margin-top','350px'); setTimeout(function(){ $('.popup').removeClass('active'); popupBlock.css('opacity','').find('.popup-content').css('margin-top',''); }, 600); }); }); });
      style.css:
       
      @import url('https://fonts.googleapis.com/css?family=Lobster'); @import url('https://fonts.googleapis.com/css?family=Roboto'); body{ margin: 0; padding: 0; height: 100vh; font-family: 'RobotoLight', sans-serif; border-bottom: 1px solid #FFFFF0; background: #00c6ff; background: -webkit-linear-gradient(to right, #0072ff, #00c6ff); background: linear-gradient(to right, #0072ff, #00c6ff); overflow: hidden; } button { text-decoration: none; border: none; } h1 { position: absolute; display: inline-table; top: 20%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; text-transform: uppercase; letter-spacing: 2px; color: #FFFFF0; } h2 { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); font-size: 25px; text-align: center; color: #FFFFF0; } .popup-btn{ position: absolute!important; top: 55%; left: 50%; transform: translate(-50%,-50%); } .main-btn-rect, .main-btn-circle{ position: relative; margin: 0; font-family: 'Roboto', sans-serif; color: #FFFFF0; background-color: rgb(252, 79, 79); text-transform: uppercase; font-size: 25px; letter-spacing: 1px; outline: none; cursor: pointer; z-index: 100; } .main-btn-rect { padding: 10px 80px; line-height: 30px; } .main-btn-rect:before, .main-btn-rect:after{ position: absolute; content: ''; top:0; width: 0%; height: 100%; background-color: rgba(255, 255, 240, 0.2); -webkit-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; } .main-btn-rect:before { left: 0; } .main-btn-rect:after { right: 0; } .main-btn-rect:hover:before, .main-btn-rect:hover:after{ width: 50%; } .main-btn-circle{ height: 40px; width: 40px; -webkit-border-radius: 50%; border-radius: 100%; line-height: 40px; -webkit-transition: box-shadow 0.3s; -o-transition: box-shadow 0.3s; transition: box-shadow 0.3s; } .main-btn-circle:hover{ -webkit-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); -moz-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); } .popup{ position: fixed; top: 100%; width: 100%; height: 100%; z-index: 10001; } .popup.active{ top:0; background-color: rgba(3, 3, 3, 0.98); transition: background-color .6s ,opacity .6s; } .popup .main-btn-rect{ padding: 10px 100px; } .popup .popup-content{ position: absolute; top: 50%; left: 50%; max-height: 568px; min-width: 320px; margin-top: 150px; padding: 25px; background-color: #FFFFF0; color: #070000; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transition: margin .6s; -webkit-transition: margin .6s; -moz-transition: margin .6s; -o-transition: margin .6s; } .popup.active .popup-content{ margin-top: 0px; } .popup-content h6{ display: table; font-size: 16px; text-align: center; margin: 10px auto; font-family: 'Roboto',sans-serif; text-transform: uppercase; font-weight: 100; } .form-group{ position: relative; width: 90%; margin: 0px auto; } form#send input, form#send textarea{ position: relative; margin-bottom: 32px; width: 100%; height: 29px; font-family: 'RobotoLight', sans-serif; text-indent: 20px; background-color: transparent; outline: 0; border: none; border-bottom: 1px solid #070000; -webkit-transition: border 0.6s; -o-transition: border 0.6s; transition: border 0.6s; } form#send input:focus, form#send textarea:focus{ border-bottom: 1px solid rgb(63, 173, 168); } form#send label{ position: absolute; top: 0; line-height: 28px; -webkit-transition: color .5s; -o-transition: color .5s; transition: color .5s; } form#send input:focus + label, form#send textarea:focus + label{ color: rgb(63, 173, 168); } form#send .txt{ line-height: 22px; left: 2px; } form#send .main-btn-rect { position: relative; display: block; padding: 12px 80px; margin: 0px auto; font-size: 14px; } form#send .main-btn-rect i { margin-right: 5px; } .popup .fade-out{ position: absolute; top: -20px; right: -20px; text-align: center; font-size: 15px; } .share-wrap{ position: absolute; display: inline-table; top: 67%; left: 50%; transform: translate(-50%, -50%); padding: 15px; text-align: center; } .share-btn{ color: #FFFFF0; padding: 7px 25px; text-decoration: none; cursor: pointer; font-weight: 100; font-size: 14px; font-family:'Lobster', sans-serif; background-color: rgba(63, 173, 168, .8); text-transform: uppercase; border-radius: 5px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .share-btn:hover{ color: #FFFFF0; text-decoration: none; background-color: rgba(63, 173, 168, 1.0); } .resp-sharing-button__link, .resp-sharing-button__icon { display: inline-block } .resp-sharing-button__link { text-decoration: none; color: #fff; margin: 2px; } .resp-sharing-button { border-radius: 5px; transition: 25ms ease-out; padding: 6px 9px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .resp-sharing-button__icon svg { width: 1em; height: 1em; margin-right: 0.4em; vertical-align: top } .resp-sharing-button--small svg { margin: 0; vertical-align: middle } .resp-sharing-button__icon, .resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle { fill: #fff; stroke: none } .resp-sharing-button--facebook { background-color: #3b5998; border-color: #3b5998; } .resp-sharing-button--facebook:hover, .resp-sharing-button--facebook:active { background-color: #2d4373; border-color: #2d4373; } .resp-sharing-button--twitter { background-color: #55acee; border-color: #55acee; } .resp-sharing-button--twitter:hover, .resp-sharing-button--twitter:active { background-color: #2795e9; border-color: #2795e9; } .resp-sharing-button--linkedin { background-color: #0077b5; border-color: #0077b5; } .resp-sharing-button--linkedin:hover, .resp-sharing-button--linkedin:active { background-color: #046293; border-color: #046293; } @media only screen and (max-width: 768px){ h1 {font-size: 25px;} h2 {font-size: 14px;} form#send .main-btn-rect {padding: 7px 60px; font-size: 14px;} .popup-btn{padding: 7px 60px; font-size: 14px;} } Tentei copiar o código do index.html mas não aparece os outros botões.
      Puderem me ajudar agradeço.

      Um abraço.
    • kaionr
      [Resolvido] COMO centralizar um Pop-up de forma responsiva?
      Por kaionr
      Olá, estou com uma dificuldade para posicionar um elemento. 
      Se trata de um pop-up que aparece na tela ao clicar. Acontece que esse pop-up não fica centralizado em todas as telas dependendo da resolução.
      No momento estou usando o position absolute, a div é essa abaixo: 
      .form-structor { background-color: #222; border-radius: 15px; height: 550px; width: 450px; position: absolute; top: -100px; left: 170px; overflow: hidden; } Também já tentei:
      {position: relative; top: 50%; left: 50%;}
       
       
      Alguém pode me ajudar? 
      Qual propriedade eu utilizo para ficar centralizado tanto horizontal e quanto vertical em qualquer resolução?
    • macdor300a
      Como fazer download de arquivos em browser mobile desenvolvido em Delphi Berlim
      Por macdor300a
      Boa Noite a todos, desenvolvi varios projetos em Delphi 7 a ultima versão que estava acostumado,  apos ter abandonado a area por mais de 15 anos. hoje estou voltando a mexer em algumas coisas estou criando um webbrowser mobile android com o berlim, e com uma finalidade especifica.

      Ate ai tudo certo, pois estar tudo funcionando da maneira que desejava, porem; quando acesso uma area de download da pagina que criei e clico no botao para descarregar o PDF simplismente o download não inicia e simplesmente nao faz nada. alguem poderia min dar uma dica de como proceder pois estou min reindetificando novamente com o Delphi apos todos esses anos e sem contar que estar tudo diferente no berlim
    • jcvlanova
      Layout de página com linhas curvas
      Por jcvlanova
      Galera, dei uma olhada no Site https://www.fastly.com/ e percebi que a página é estruturada em tópicos circundados, divididos por uma espécie de caixas, boxes formados por linhas e curvas, alguém saberia me dizer como é possível fazer essas linhas curvas uma página html ???
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito