Ir para conteúdo

Arquivado

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

Diefferson Moro

Problema com rodapé

Por , em Desenvolvimento frontend

Recommended Posts

Diefferson Moro    1

Diefferson Moro
Postado

E ai pessoal, BLZ?

 

Estou desenvolvendo este site e estou enfrentando um problema.

 

O problema é o seguinte, preciso colocar o rodapé do site, porém, ele não fica no fim da página. Para que ele fique onde eu quero preciso estar informando a quantos pixels quero ele do topo, mas eu queria que isso fosse automatico, porque o tamanho do conteudo na página nem sempre será do tamanho que configurei como o inicio do rodapé, ai ele acaba sobrepondo o conteudo quando tem muito.

 

Se alguém puder me ajudar eu agradeço.

 

Código da página:

<?php 

require_once 'config.php';
require_once 'database.php';

?>

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
	<meta charset="utf-8"/>
	<title>Título</title>
	<link rel="stylesheet" href="estilo.css">
	<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
	<div id="tudo">
		<div id="header">
			<div>
				<img src="img/logo.png" id="site-logo">
			</div>
			<div>
				<a href="index"><img src="img/home.png" id="inicio-incone"></a>
			</div>
			<div>
				<a href="mailto:"><img src="img/contact.png" id="email-incone"></a>
			</div>
			<div>
				<a id="inicio-texto" href="index">Início</a>
			</div>
			<div>
				<a id="email-texto" href="mailto:">E-mail</a>
			</div>
			<div id="zona-barra-busca"> </div>
			<div id="texto-busca">Buscar no site:</div>
			<form method="post" action="buscar3.php" id="busca">
				<input type="search" name="busca" placeholder="Ex: Exemplo" id="busca-caixa" required="busca">
				<input type="submit" value="Buscar" id="busca-botao">
			</form>
			<div id="zona-barra-slide"> </div>
			<div id="zona-slide"> </div>
			<nav id="menu">
				<ul>
					<li id="li1"><a href="index">Início</a></li>
					<li id="li2"><a href="quemsomos">Quem Somos</a></li>
					<li id="li3"><a href="produtos">Produtos</a></li>
					<li id="li4"><a href="servicos">Serviços</a></li>
					<li id="li5"><a href="projetos">Projetos</a></li>
					<li id="li6"><a href="dicas">Dicas</a></li>
					<li id="li7"><a href="novidades">Novidades</a></li>
					<li id="li8"><a href="orcamento">Orçamento</a></li>
					<li id="li9"><a href="contato">Contato</a></li>
				</ul>
			</nav>
		</div>
		<div id="conteudo">
			<div id="zona-conteudo">
				<div id="conteudo-site">
					
				</div>
				<div id="novidades">
					<div id="titulo-novidades-conteudo">Novidades</div>
					
				</div>
				<div id="dicas">
					<div id="titulo-dicas-conteudo">Confira nossas dicas</div>
					
				</div>
				</div>
			<div id="zona-atendimento">
				<div>
					
				</div>
			</div>
			<div id="zona-newsletter">
				<div id="zona-newsletter-titulo">Recebe nossas novidades</div>
				<div id="zona-newsletter-descricao">Cadastre seu e-mail abaixo e receba nossas novidades.</div>
				<div id="zona-newsletter-form">
					<form action="enviar-newsletter.php" method="post">
						<p>
							<label id="zona-newsletter-form-nome">Nome:</label><br>
							<input id="zona-newsletter-form-nome-input" type="text" name="nome" required="required">
						</p>
						<p>
							<label id="zona-newsletter-form-e-mail">E-mail:</label><br>
							<input id="zona-newsletter-form-e-mail-input" type="email" name="e-mail" required="required">
						</p>
						<input id="zona-newsletter-form-enviar" type="submit" name="enviar" value="Enviar">
					</form>
				</div>
			</div>
		</div>
		<div id="rodape">
			<div id="zona-rodape"> </div>
			
		</div>
	</div>
</body>
</html>

Código css:

body{
	background-image: url("img/bg.png");
	z-index: 200;
	top: 0px;
	width:810px;
	margin:0 auto;
	overflow-x: hidden;
}
#tudo{
	position: absolute;
}
#site-logo{
	position: absolute;
	z-index: 12;
	left: 0px;
	top: 0px;
	width: 200px;
	height: 181px;
	border: 0px;
}
#inicio-incone{
	position: absolute;
	left: 300px;
	top: 32px;
	width: 40px;
	height: 40px;
}
#email-incone{
	position: absolute;
	left: 300px;
	top: 98px;
	width: 40px;
	height: 40px;
}
#inicio-texto{
	position: absolute;
	left: 347px;
	top: 42px;
	width: 40px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	color: #ffffff;
}
#email-texto{
	position: absolute;
	left: 347px;
	top: 107px;
	width: 46px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	color: #ffffff;
}
#texto-busca{
	position: absolute;
	left: 461px;
	top: 72px;
	width: 120px;
	height: 25px;
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
}
#busca{
	position: absolute;
	left: 587px;
	top: 72px;
}
#busca-caixa{
	width: 135px;
	height: 20px;
	box-shadow: 2px;
	margin-right: 5px;
}
#busca-botao{
	width: 70px;
	height: 20px;
	background: linear-gradient(to bottom, #3e9140 0%,#29612b 100%);
	border: 0px;
	border-radius: 5px;
	font-family: Arial;
	font-size: 13px;
	color: #ffffff;
	cursor: pointer;
}
#busca-botao:hover{
	width: 70px;
	height: 20px;
	background: #54c120;
	border: 0px;
	border-radius: 5px;
}
#zona-barra-busca{
	position: absolute;
	left: 440px;
	top: 28px;
	width: 5px;
	height: 120px;
	border-radius: 5px;
	border: 0px;
	background: linear-gradient(to bottom, #3e9140 0%,#8df12a 100%);
}
#zona-barra-slide{
	position: absolute;
	left: 0px;
	top: 190px;
	width: 850px;
	height: 6px;
	border-radius: 5px;
	border: 0px;
	background: linear-gradient(to bottom, #3e9140 0%,#8df12a 100%);
}
#zona-slide{
	position: absolute;
	left: 0px;
	top: 200px;
	width: 850px;
	height: 260px;
	border-radius: 5px 5px 0px 0px;
	border: 0px;
	background: linear-gradient(to bottom, #3e9140 0%,#29612b 100%);
}
#menu ul{
	position: absolute;
	z-index: 8;
	margin: 0px;
	left: 0px;
	top: 460px;
	width: 810px;
	height: 40px;
	border-radius: 0px 0px 5px 5px;
	border: 0px;
	background: linear-gradient(to bottom, #3e9140 0%,#29612b 100%);
}
#li1{
	position: absolute;
	list-style: none;
	left: 0px;
	top: 0px;
	width: 60px;
	height: 40px;
	border-radius: 0px 0px 0px 5px;
}
#li1:hover{
	list-style: none;
	background: #54c120;
}
#li1 a{
	position: absolute;
	left: 10px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	width: 60px;
	height: 40px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#li1 a:active{
	position: absolute;
	left: 10px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #000000;
	font-family: Arial;
	text-decoration: none;
}
#li2{
	position: absolute;
	list-style: none;
	left: 60px;
	top: 0px;
	width: 120px;
	height: 40px;
}
#li2:hover{
	list-style: none;
	background: #54c120;
}
#li2 a{
	position: absolute;
	left: 5px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#li2 a:active{
	position: absolute;
	left: 5px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #000000;
	font-family: Arial;
	text-decoration: none;
}
#li3{
	position: absolute;
	list-style: none;
	left: 180px;
	top: 0px;
	width: 100px;
	height: 40px;
}
#li3:hover{
	list-style: none;
	background: #54c120;
}
#li3 a{
	position: absolute;
	left: 15px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#li3 a:active{
	position: absolute;
	left: 15px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #000000;
	font-family: Arial;
	text-decoration: none;
}
#li4{
	position: absolute;
	list-style: none;
	left: 280px;
	top: 0px;
	width: 100px;
	height: 40px;
}
#li4:hover{
	list-style: none;
	background: #54c120;
}
#li4 a{
	position: absolute;
	left: 15px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#li4 a:active{
	position: absolute;
	left: 15px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #000000;
	font-family: Arial;
	text-decoration: none;
}
#li5{
	position: absolute;
	list-style: none;
	left: 380px;
	top: 0px;
	width: 100px;
	height: 40px;
}
#li5:hover{
	list-style: none;
	background: #54c120;
}
#li5 a{
	position: absolute;
	left: 15px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#li5 a:active{
	position: absolute;
	left: 15px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #000000;
	font-family: Arial;
	text-decoration: none;
}
#li6{
	position: absolute;
	list-style: none;
	left: 480px;
	top: 0px;
	width: 70px;
	height: 40px;
}
#li6:hover{
	list-style: none;
	background: #54c120;
}
#li6 a{
	position: absolute;
	left: 12.5px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#li6 a:active{
	position: absolute;
	left: 12.5px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #000000;
	font-family: Arial;
	text-decoration: none;
}
#li7{
	position: absolute;
	list-style: none;
	left: 550px;
	top: 0px;
	width: 108px;
	height: 40px;
}
#li7:hover{
	list-style: none;
	background: #54c120;
}
#li7 a{
	position: absolute;
	left: 11.5px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#li7 a:active{
	position: absolute;
	left: 11.5px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #000000;
	font-family: Arial;
	text-decoration: none;
}
#li8{
	position: absolute;
	list-style: none;
	left: 658px;
	top: 0px;
	width: 111px;
	height: 40px;
}
#li8:hover{
	list-style: none;
	background: #54c120;
}
#li8 a{
	position: absolute;
	left: 12px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#li8 a:active{
	position: absolute;
	left: 12px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #000000;
	font-family: Arial;
	text-decoration: none;
}
#li9{
	position: absolute;
	list-style: none;
	left: 770px;
	top: 0px;
	width: 80px;
	height: 40px;
	border-radius: 0px 0px 5px 0px;
}
#li9:hover{
	list-style: none;
	background: #54c120;
}
#li9 a{
	position: absolute;
	left: 10px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#li9 a:active{
	position: absolute;
	left: 10px;
	top: 10px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #000000;
	font-family: Arial;
	text-decoration: none;
}

/*CSS Conteúdo*/
#zona-conteudo{
	position: absolute;
	left: 0px;
	top: 521px;
	width: 565px;
	min-height: 327px;
	margin: 0px;
	padding: 0px;
	border-radius: 5px;
	background: linear-gradient(to bottom, #3f9118 0%,#29612b 100%);
}
#conteudo-site{
	position: relative;
	top: 0px;
	max-width: 555px;
}
#titulo-conteudo{
	position: relative;
	z-index: 100;
	left: 5px;
	top: 5px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 19px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#texto-conteudo{
	position: relative;
	z-index: 99;
	left: 5px;
	top: 32px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 15px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#texto-conteudo a{
	position: relative;
	left: -253px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: bold;
	font-size: 15px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#texto-conteudo a:hover{
	position: relative;
	left: -253px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: bold;
	font-size: 15px;
	color: #d5d5d5;
	font-family: Arial;
	text-decoration: underline;
}
#novidades{
	position: relative;
}
#titulo-novidades-conteudo{
	position: relative;
	left: 5px;
	top: 90px;
	width: 240px;
	height: 30px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 19px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#novidades-conteudo{
	position: relative;
	left: -235px;
	top: 120px;
	width: 240px;
	height: 30px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 19px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#novidades-conteudo a{
	position: relative;
	left: 0px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#novidades-conteudo a:hover{
	position: relative;
	left: 0px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: underline;
}
#icon-novidades{
	padding-right: 25px;
	background: url(img/icon-novidades.png) no-repeat left center;
	text-decoration: none;
}
#dicas{
	position: relative;
}
#titulo-dicas-conteudo{
	position: relative;
	left: 270px;
	top: 68px;
	width: 240px;
	height: 30px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 19px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#dicas-conteudo{
	position: relative;
	left: 90px;
	top: 98px;
	width: 300px;
	height: 30px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 19px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#dicas-conteudo a{
	position: relative;
	left: 0px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#dicas-conteudo a:hover{
	position: relative;
	left: 0px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 18px;
	color: #d5d5d5;
	font-family: Arial;
	text-decoration: underline;
}
#icon-dicas{
	padding-right: 25px;
	background: url(img/icon-dicas.png) no-repeat left center;
	text-decoration: none;
}
#zona-atendimento{
	position: absolute;
	left: 615px;
	top: 520px;
	width: 207px;
	height: 100px;
	margin: 0px;
	padding: 0px;
	border-radius: 5px;
	background: linear-gradient(to bottom, #69f128 0%,#1a3d1b 100%);
}
#zona-newsletter{
	position: absolute;
	left: 590px;
	top: 627px;
	width: 260px;
	height: 220px;
	margin: 0px;
	padding: 0px;
	border-radius: 5px;
	background: linear-gradient(to bottom, #3f9118 0%,#29612b 100%);
}
#zona-newsletter-titulo{
	position: absolute;
	left: 10px;
	top: 5px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: bold;
	font-size: 15px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#zona-newsletter-descricao{
	position: absolute;
	left: 10px;
	top: 22px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: normal;
	font-size: 15px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#zona-newsletter-form{
	position: absolute;
	left: 0px;
	top: 65px;
	width: 260px;
	height: 152px;
	margin: 0px;
	padding: 0px;
}
#zona-newsletter-form-nome{
	position: absolute;
	left: 15px;
	top: 15px;
	width: 50px;
	height: 20px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: bold;
	font-size: 13px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#zona-newsletter-form-e-mail{
	position: absolute;
	left: 15px;
	top: 70px;
	width: 50px;
	height: 20px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: bold;
	font-size: 13px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
}
#zona-newsletter-form-nome-input{
	position: absolute;
	left: 10px;
	width: 236px;
	height: 23px;
	margin: 0px;
	padding: 0px;

}
#zona-newsletter-form-e-mail-input{
	position: absolute;
	left: 10px;
	top: 90px;
	width: 236px;
	height: 23px;
	margin: 0px;
	padding: 0px;

}
#zona-newsletter-form-enviar{
	position: absolute;
	left: 80px;
	top: 125px;
	width: 100px;
	height: 25px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: bold;
	font-size: 13px;
	color: #ffffff;
	font-family: Arial;
	text-decoration: none;
	background: none;
	border: 0px;
}
#zona-newsletter-form-enviar:hover{
	position: absolute;
	left: 80px;
	top: 125px;
	width: 100px;
	height: 25px;
	margin: 0px;
	padding: 0px;
	display: inline;
	font-weight: bold;
	font-size: 13px;
	color: #5c5c5c;
	font-family: Arial;
	text-decoration: none;
	background: #e0e0e0;
	border-radius: 6px;
	border: 1px solid;
	border-color: #959595;
	cursor: pointer;
}

/*CSS Rodapé*/

#rodape{
	position: relative;
	top: 900px;
	height: 0px;
}
#zona-rodape{
	position: relative;
	left: 0px;
	top: -38px;
	width: 850px;
	height: 169px;
	border-radius: 5px;
	margin: 0px;
	background: linear-gradient(to bottom, #3f9118 0%,#29622a 100%);
}
#para-conhecer-texto{
	position: absolute;
	left: 20px;
	top: -29px;
	width: 100px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	color: #ffffff;
}
#inicio-texto-2{
	position: absolute;
	left: 20px;
	top: 1px;
	width: 100px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}
#inicio-texto-2:hover{
	text-decoration: underline;
}
#quem-somos-texto{
	position: absolute;
	left: 20px;
	top: 14px;
	width: 100px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}
#quem-somos-texto:hover{
	text-decoration: underline;
}
#produtos-texto{
	position: absolute;
	left: 20px;
	top: 27px;
	width: 100px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}
#produtos-texto:hover{
	text-decoration: underline;
}
#servicos-texto{
	position: absolute;
	left: 20px;
	top: 40px;
	width: 100px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}
#servicos-texto:hover{
	text-decoration: underline;
}
#projetos-texto{
	position: absolute;
	left: 20px;
	top: 53px;
	width: 100px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}
#projetos-texto:hover{
	text-decoration: underline;
}
#dicas-texto{
	position: absolute;
	left: 20px;
	top: 66px;
	width: 100px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}
#dicas-texto:hover{
	text-decoration: underline;
}
#novidades-texto{
	position: absolute;
	left: 20px;
	top: 79px;
	width: 100px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}
#novidades-texto:hover{
	text-decoration: underline;
}
#para-contatar-texto{
	position: absolute;
	left: 189px;
	top: -29px;
	width: 100px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	color: #ffffff;
}
#contato-texto{
	position: absolute;
	left: 189px;
	top: 1px;
	width: 115px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}
#contato-texto:hover{
	text-decoration: underline;
}
#orcamento-texto{
	position: absolute;
	left: 189px;
	top: 14px;
	width: 115px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}
#orcamento-texto:hover{
	text-decoration: underline;
}
#atendimento-online-texto{
	position: absolute;
	left: 189px;
	top: 27px;
	width: 115px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}
#atendimento-online-texto:hover{
	text-decoration: underline;
}
#floricultura-sol-nascente-texto{
	position: absolute;
	left: 366px;
	top: -29px;
	width: 189px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	color: #ffffff;
}
#cnpj-texto{
	position: absolute;
	left: 366px;
	top: -15px;
	width: 189px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	color: #ffffff;
}
#inscricao-Estadual-texto{
	position: absolute;
	left: 366px;
	top: -2px;
	width: 189px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	color: #ffffff;
}
#hamilto-silva-moro-texto{
	position: absolute;
	left: 366px;
	top: 27px;
	width: 189px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	color: #ffffff;
}
#responsavel-tecnico-texto{
	position: absolute;
	left: 366px;
	top: 40px;
	width: 189px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	color: #ffffff;
}
#crea-texto{
	position: absolute;
	left: 366px;
	top: 53px;
	width: 189px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	color: #ffffff;
}
#sonia-r-k-moro-texto{
	position: absolute;
	left: 366px;
	top: 80px;
	width: 189px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	color: #ffffff;
}
#proprietaria-texto{
	position: absolute;
	left: 366px;
	top: 93px;
	width: 189px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	color: #ffffff;
}
#tecnica-texto{
	position: absolute;
	left: 366px;
	top: 106px;
	width: 189px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	color: #ffffff;
}
#copyright{
	position: absolute;
	left: 20px;
	top: 110px;
	width: 290px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	color: #ffffff;
}
#celular-img{
	position: absolute;
	left: 571px;
	top: -29px;
}
#celular-numero{
	position: absolute;
	left: 634px;
	top: -20px;
	width: 200px;
	height: 40px;
	text-decoration: none;
	font-weight: bold;
	font-family: Arial;
	font-size: 28px;
	color: #ffffff;
}
#facebook-icon{
	position: absolute;
	left: 588px;
	top: 58px;
}
#facebook-texto{
	position: absolute;
	left: 628px;
	top: 64px;
	width: 170px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 15px;
	color: #ffffff;
}
#facebook-texto a{
	position: absolute;
	width: 170px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 15px;
	color: #ffffff;
}
#desenvolvido{
	position: absolute;
	left: 646px;
	top: 107px;
	width: 200px;
	height: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	color: #000000;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diefferson Moro    1

Diefferson Moro
Postado

Leandro valew por responder, mas acho que você não entendeu meu problema.

 

É o seguinte, o rodapé já está no centro da página, o problema é que ele não fica la no final onde deveria, para isso preciso informar a localização dele, entende.

 

Usar position relative ou absolute não muda em nada nele, porque ainda continuo tendo que informar a que distancia do topo ele tem que ficar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

stromdh    15

stromdh
Postado

vc está usando position: absoluto pra muitos itens.

 

faz o seguinte... na div tudo tu seta position: relative pois essa div está encapsulando todo o conteúdo do site, ela não precisa ser absolute, deixa como relative para que os demais objetos tomem ela como referencia.

 

dae no rodapé tu seta position: absolute; bottom: 0;

 

só isso... talvez tenha que por um width: 100% e centralizar o cara.

Compartilhar este post

Link para o post
Compartilhar em outros sites

stromdh    15

stromdh
Postado

cara, eu colei todo o teu codigo em uma página html aqui... tu tem um problema estrutural de html e css.

 

tu setou uma altura pro body... 810px. sem falar que tem muitos elementos com position: absolute, top e height definidos

 

Não precisa disso. Tu tem que setar o html e o body pra irem até o fim da página (height: 100%), a mesma coisa com a div que encapsula todo o teu conteúdo, o restante vai na ordem de carregamento do html e tum mexe de leve no css, sem setar position absolute pra ninguém, a não ser pro footer, e com bottom 0 pra ele colar na base.

 

eu to meio sem tempo pra poder compilar um html aqui pra ti, mas eu mudaria essa estrutura inteira.

 

tenta retirar os height e os position absolute dos teus elementos e vai postando que te ajudo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mário Lucas Régis    1

Mário Lucas Régis
Postado

O interessante em 1º lugar seria você identificar o que é cabeçalho conteúdo e rodapé da seguinte forma:

 

tudo o que for cabeçalho você coloca entre <header> </header>

tudo o que for conteúdo da pagina entre <section> </section>

tudo o que for rodapé entre <footer> </footer>

 

faz primeiro esses passos aí.

 

cuidados nesses usos de position: absolute; por que se não vai bagunçar tudo !

 

ai depois vc colocar uma div para o header outra para section e outra para footer vai diminuir a quantidade de div e semanticamente vai ficar bem mais organizado seu código .

 

aí vc vai ter 3 div 4 como a div="tudo" ela será absoluta tendo poder hierárquico sobre tudo o que contém ela vc não vai correr o risco de quando diminuir ou aumentar o zoom de sua pagina ela se desmontar toda. depois posta o resultado pra gente!

 

abraço!!

Compartilhar este post

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

  • Conteúdo Similar

    • ment0r
      Remover cabeçalho e rodapé na impressão
      Por ment0r
      Boa tarde pessoal, tudo bem?

      É possível remover o cabeçalho e rodapé da impressão de uma página html via php, css ou javascript? Já adianto que não gostaria de gerar pdf, mas sim saber se é possível remover ou não.
      Obrigado a todos.
       

    • a52
      Repetir rodapé em todas as páginas sem sobrescrever a tabela
      Por a52
      Boa tarde. Estou tentando imprimir rodapé de forma fixa em todas as páginas. Com o código abaixo eu consigo fazer, porém, acaba sobrescrevendo algumas linhas da tabela. Tentei utilizar @pages mas lendo sobre o assunto descobri que nas versões mais recentes do chrome já não funciona mais.
       
      <style type="text/css" media="print">     table { page-break-inside:auto; margin-bottom: 10px; }     tr    { page-break-inside:avoid; page-break-after:auto; }     thead { display:table-header-group }     tfoot { display:table-footer-group }     /* .fixedhh td { height: 50px; } */     div.footer {         display: block;         position: fixed;         bottom: 0;         /* height: 45px; */     }          /* @media print {         div#pages {             display: table-footer-group;             counter-increment: page;         }         div#pages:after {             content:"Página " counter(page);          }     } */ </style> <div class='footer'> <label style='font-family:verdana;font-size:10px;font-weight:bold;'>Assinatura: ________________________________________________<br>Por ser verdade, assino e dou fé ao presente documento</label> <div id='pages' class='pages'></div> </div>   É um código legado que armazena todo o conteúdo numa tag $html em php e depois imprime na tela. Existe alguma outra alternativa para esse caso? Obrigado pela atenção.    
    • zetabyte00
      Atributo Opacity não funciona em elementos dentro da tag <footer>
      Por zetabyte00
      Tenho um página HTML em que quando atribuo "opacity: 0.8;" a tag <footer>. 
      Eu não consigo atribuir "opacity: 1;" aos outros elementos (<div> e <img> por exemplo) dentro da referida tag <footer>.
       
      Ou seja, eu quero a tag <footer> opaca, mas quero eliminar a opacidade dos elementos dentro desta tag. Como soluciono isto?
       
    • vicentepc
      problema de impressão com duas colunas dinâmicas com html e rodapé
      Por vicentepc
      Prezado(a)s:
      Estou tentando imprimir conteúdo de questões em duas colunas dinâmicas via php, mas gerando html, sendo que no final de cada página deve-se imprimir um rodapé centralizado na página. Esse rodapé não deve ser impresso nas duas colunas. Conforme o exemplo da imagem a seguir:
      A imagem apresenta um rodapé sendo impresso de forma errada e só é impresso na primeira página. Note que esse rodapé deve ser impresso em toda a extensão da página e as questões devem ser impressas em duas colunas dinâmicas.
      Utilizo um loop para obter as informações de cada questão em php, sendo que esse conteúdo está dentro de uma div definida com a classe two (css). Segue os respectivos códigos.
      <?php echo '<link rel="stylesheet" href="sigaiws_arquivoCSSphp.php"/>'; echo '<html>'; echo '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'; include "adodb/adodb.inc.php"; include "sigaiws_conectaAdodb.php"; if (isset($_GET['prova'])) { $identificacao = $_GET['prova']; $sql = "select questoesprova.numeroQuestao, professor.matricula, professor.nome, disciplina.codigoDaDisciplina, identificacaoprova.identificacao, identificacaoprova.titulorodape,questoes.alternativaA, questoes.alternativaB, questoes.alternativaC, questoes.alternativaD, questoes.enunciado, questoes.resposta from questoesprova inner join professor on questoesprova.fk_professor = professor.id inner join disciplina on questoesprova.fk_disciplina = disciplina.id inner join identificacaoprova on questoesprova.fk_identificacaoProva= identificacaoprova.id inner join questoes on questoesprova.fk_questoes = questoes.id "; $sql=$sql." where identificacaoprova.identificacao ='".$identificacao."'"; $sql=$sql." order by questoesprova.numeroQuestao"; /*if (!$result->EOF) { //echo '<div align="center"><h3><b>Professor - Matricula : '.$result->fields["matricula"].' - Nome : '.$result->fields["nome"].' - Ano / Semestre : 2018 / 2</b></h3></div>'; } */ echo '<div class="two">'; //id='content text-center'>"."<br>"; //echo "<div id='pageFooter'><br>"; $result=$conexao->Execute($sql); $rodape=""; if (!$result->EOF) $rodape=$result->fields["titulorodape"]; $result=$conexao->Execute($sql); while (!$result->EOF) { // $texto0="<div><br>"; $texto1=" <h3><b>Questão : ".$result->fields["numeroQuestao"]."</b></h3><br/>"; $texto2=" <b>Enunciado</b></br>".$result->fields["enunciado"]."<br/>"; $texto3=" <b>Alternativa A</b></br>".$result->fields["alternativaA"]."<br/>"; $texto4=" <b>Alternativa B</b></br>".$result->fields["alternativaB"]."<br/>"; $texto5=" <b>Alternativa C</b></br>".$result->fields["alternativaC"]."<br/>"; $texto6=" <b>Alternativa D</b></br>".$result->fields["alternativaD"]."<br/>"; // $texto7="</div><br>"; $texto8="<br>"; // $texto9="&nbsp"; // $texto10="<div class='footer'>"; // $texto11=$result->fields["titulorodape"]; // $texto12="</div>"; $textor=""; $textor=$texto1.$texto2.$texto3.$texto4.$texto5.$texto6.$texto8; //$texto9.$texto10.$texto11.$texto12; echo htmlspecialchars_decode($textor); echo "<div class='footer'>".$rodape."</div>"; $result->MoveNext(); } echo "</div>"; // echo "<div style='page-break-inside: avoid;'>".$rodape."</div>"; } //if isset <?php header("Content-Type: text/css; charset=UTF-8"); ?> h1 { text-align: center } count::before { counter-increment: section; content: "\A I am flag " counter(section) ".\A "; font-weight: bold; white-space: pre; } @media print { .two { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; } .one { column-count: 1; -webkit-column-count: 1; -moz-column-count: 1; } input[type="button"] { display: none } } .footer { column-count: 1; position: fixed; text-align: center; bottom: 0; } .genClass5667 { } html { position: relative; min-height: 100%; } body { margin: 0 0 60px; /* bottom = footer height */ } Por favor, me ajudem. 
      Um abração a todos!
    • rafinhafv
      [Resolvido] Criar rodapé
      Por rafinhafv
      Preciso criar esse rodapé no site e não consigo criar... alguem pode me auxiliar?

×

Informação importante

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

  Aceito