CSS - com Rodapé

Jhoy Ascari · Novembro 20, 2012

E aí galera tudo certo? Meu primeiro tópico aqui então se eu fizer algo errado favor avisem.

Seguinte, estou com um problema bem "normal" que muita gente já postou até mesmo nesse fórum e pra mim nda resolveu, não consigo encontrar a solução a ponto de estar pensando em criar toda a página novamente :upset:/>

O rodapé simplesmente não fica alinhado no fim da página, ele alinha abaixo do conteúdo estou usando entre muitas dicas que já li aqui e pelo google afora a dica do @Guilherme Oderdenge:

#wrapper{
   position: relative; /* opcional */
   height: 100%;
min-height:100%;
}

#footer{
   width: 100%;
   height: 100px;
   position: absolute;
}

E simplesmente não tem jeito de funcionar <_</>

Segue link da imagem no meu Google Drive:

Imagem do Site com Espaço depois do Rodapé

Segue abaixo os fontes completos da página e dos dois styles css, coloquei em spoiler pra não pegar tanto espaço:

contato.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta name="keywords" content="" />
   <meta name="description" content="" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title>Monte Santana</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="icon" href="images/favicon.ico" />
   <link href="http://fonts.googleapis.com/css?family=Abel" rel="stylesheet" type="text/css" />
   <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
   <link href="css/contato.css" rel="stylesheet" type="text/css" media="screen" />
   <script type="text/javascript" src="jquery/jquery.min.js"></script> 

<script>
  $(function(){	
	  $('#enviar_contato').click(function(){						  
	  	  // Pega valores dos campos
		  var nome = $("#nome").val();
		  var email = $("#email").val();
		  var msg = $("#msg").val();
		  var fade = (navigator.appName != "Microsoft Internet Explorer");

		  // Verifica se não estão vazios
		  if (nome!='' & email!='' & msg!='')
		  {				  
			  $('.loading').show();
			  $('form')[0].reset();

			  if (fade)
				  $('#form-contato').fadeTo("slow", 0.3);

			  $.post("envia.php",{nome: nome, email:email, msg:msg},
				  function(retorno){
					  $('.loading').fadeOut();
					  $('#resposta').html(retorno).fadeIn();						  						  					  

					  if (fade)
						  $('#form-contato').fadeTo("slow", 1);	 

					  $('#resposta').fadeOut(3000);
			  }) 
		  }else{
			$('#resposta').html("Existem campos incompletos no formulário!<br />Favor preencher todos os dados.").fadeIn(); 				 
			$('#resposta').fadeOut(3000);
		  }
		  return false;
	  })
  })	
</script>
</head>
<body>
<div id="wrapper" style="min-height:100%; padding-bottom:100px;">
<div id="header-wrapper">
	<div id="header">
		<div id="menu1">
			<ul>
				<li><a href="index.php">Principal</a></li>
				<li><a href="#">Vinhos</a></li>            
				<li><a href="#">Histórico</a></li>                            
			</ul>
		</div>

		<a href="index.php"><span id="logo"></span></a>
           <!-- Logo -->

		<div id="menu2">
			<ul>
				<li><a href="#">Localização</a></li>
                   <li><a href="#">Galeria</a></li>
                   <li><a href="contato.php">Contato</a></li>                    
			</ul>
		</div>
	</div>
	<!-- end #header --> 

</div>            

<div class="contato">
	<h2 class="title">Fale conosco</h2>

       <hr />
	<div class="entry">
       	<div id="esquerda">       
			<p><h3><img src="images/MsTacas.png" alt="" />Monte Sant'Ana</h3></p>

			<p>
            	Linha Sant'Ana | São Marcos - RS<br />
	            Fone (54)3291-7587 | (54)9973-9896<br />
    	        montesantana@montesanta.com.br
            </p>

               <img src="images/MsContato.jpg" alt="" style="border:1px dotted #FFFFFF"/>
           </div>

           <div id="direita">           
             <p><h3><img src="images/MsTacas.png" alt="" />Se preferir entre em contato pelo formulário.</h3></p>

             <div class="loading">
                 <p><img src="images/loading.gif" alt=""/> <h3>Enviando </h3></p>
             </div>

             <div id="resposta"></div>

             <form action="envia.php" method="post" id="form-contato">

             <fieldset>
                 <label for="nome">Nome:</label>
                 <input type="text" class="width230" name="nome" id="nome"  />

                 <label for="email">E-mail:</label>
                 <input type="text" class="width230" name="email" id="email" />

                 <label for="observações">Observações:</label>
                 <textarea rows="5" class="width230" cols="3" name="msg" id="msg"></textarea><br />

                 <input class="botao" type="submit" value="Enviar" name="enviar" id="enviar_contato" />
             </fieldset>

             </form>
           </div>
	</div>
</div>        

<div style="clear: both;"> </div>
</div>

<div id="footer">
   <p>Linha Sant'Ana | São Marcos - RS | CEP 95190-000 | Fone (54)3291-7587 | (54)9973-9896</p>
   <p>Copyright (c) 2012 montesantana.com. Todos os direitos reservados. Design by <a href="http://www.ztech.inf.br">Jhonatan Ascari</a>.</p>
</div>
<!-- end #footer -->
</body>
</html>

style.css

body {
margin: 0;
padding: 0;
height:100%;
font-family: 'Abel', sans-serif;
font-size: 14px;
color: #383838;
background: url(../images/main-background-bg.png) repeat top right; 
}

h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #221D1D;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 2.4em;
}

h3 {
font-size: 1.6em;
}

p, ul, ol {
margin-top: 0;
line-height: 180%;
}

ul, ol {
}

a {
text-decoration: none;
color: #AE4D5A;
}

a:hover {
text-decoration: none;
color:#C00;	
}

#wrapper {
padding: 0;
}

/* Header */

#header-wrapper {
overflow: hidden;
height: 270px;
background: url(../images/header-wrapper-bg.png) repeat-x left top; 
}

#header {
overflow: hidden;
width: 950px;
height: 300px;
margin: 0 auto;
}

/* Logo */

#logo {
float: left;
width: 254px;
height: 300px;
margin: 0px auto;
padding: 135px 0 0 0;
background: url(../images/logo-bg.png) no-repeat left top;
color: #FFFFFF;
}

#logo h1, #logo p {
margin: 0;
padding: 0;
}

#logo h1 {
letter-spacing: -1px;
text-align: center;
text-transform: lowercase;
font-size: 3.8em;
}

#logo p {
margin-top: -10px;
padding: 0 0 0 10px;
text-align: center;
font-size: 15px;
color: #FFFFFF;
} 

#logo p a {
color: #FFFFFF;
}

#logo a {
border: none;
background: none;
text-decoration: none;
color: #FFFFFF;
}

/* Menu */

#menu1 {
float: left;
width: 348px;
height: 300px;
}

#menu1 ul {
float: right;
margin: 0px;
padding: 117px 0px 0px 0px;
list-style: none;
}

#menu1 li {
float: left;
margin: 0px 18px;
}

#menu1 a {
display: block;
height: 50px;
line-height: 50px;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-size: 20px;
color: #FFFFFF;
}

#menu1 a:hover {
color:#C00;	
}

#menu2 {
float: right;
width: 348px;
}

#menu2 ul {
float: left;
margin: 0px;
padding: 117px 0px 0px 0px;
list-style: none;
}

#menu2 li {
float: left;
margin: 0px 18px;
}

#menu2 a {
display: block;
height: 50px;
line-height: 50px;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-size: 20px;
color: #FFFFFF;
}

#menu2 a:hover {
color:#C00;	
}

/* Page */

#page {
width: 920px;
margin: 0 auto;
padding: 0px 20px 0px 20px;
background: url(rgba.php?r=0&g=0&b=0&a=30) repeat;	
background: rgba(0,0,0,.3); 
color: #F6F6F6
}

#page-bgtop {
padding: 0px;
}

/* Content */

#content {
float: left;
width: 600px;
padding: 10px 0px 0px 0px;
}

.post {
background:url(../images/MsTacas2.png) no-repeat top left
}

.post .title {
margin-bottom: 10px;
padding: 12px 0px 20px 50px;
letter-spacing: -.5px;
color: #FFF; 
}

.post .title a {
color: #FFFFFF;
border: none;
}

.post .meta {
height: 30px;
margin: 0px;
padding: 0px 0px 0px 0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}

.post .meta .date {
float: left;
height: 24px;
padding: 3px 15px;
color: #BBBBBB;
}

.post .meta .posted {
float: right;
height: 24px;
padding: 3px 15px;
color: #BBBBBB;
}

.post .meta a {
color: #BBBBBB;
}

.post .entry {
padding: 0px 0px 20px 0px;
text-align: justify;
}

/* Sidebar */

#sidebar {
float: right;
width: 280px;
padding: 30px 0px 0px 0px;
color: #F6F6F6;
background:url(../images/MsWine.png) no-repeat top left
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
margin: 0;
padding: 0;
}

#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}

#sidebar li li {
line-height: 35px;
border-bottom: 1px dotted #873842;
margin: 0px 0px;
border-right: none;
}

#sidebar li a {
padding-left: 20px;
background: url(../images/seta.gif) no-repeat left 1px;
}

#sidebar li a:hover {
text-decoration: none;
color:#C00;	
}

#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}

#sidebar h2 {
padding: 0px 0px 30px 40px;
letter-spacing: -.5px;
font-size: 1.8em;
color: #F6F6F6;
}

#sidebar p {
margin: 0 0px;
padding: 10px 30px 20px 30px;
text-align: justify;
}

#sidebar a {
border: none;
color: #F6F6F6;
}

/* Footer */

#footer {
height: 100px;
width:100%;
background: url(rgba.php?r=0&g=0&b=0&a=30) repeat;		
background: rgba(0,0,0,.3);	
}

#footer p {
margin: 0;
padding-top: 20px;
line-height: normal;
text-align: center;
color: #FFFFFF;
}

#footer a {
color: #FFFFFF;
}

#three-columns {
overflow: hidden;
width: 960px;
margin: 0px auto;
padding: 30px 0px;
color: #FFFFFF;
}

#three-columns h2 {
padding: 0px 0px 0px 0px;
font-size: 30px;
color: #FFFFFF;
padding-bottom:5px;
}

#three-columns #column1 {
float: left;
width: 270px;
height:180px;
margin-right: 30px;
padding:5px 15px 5px 15px;
background: url(rgba.php?r=0&g=0&b=0&a=30) repeat;		
background: rgba(0,0,0,.3);
}

#three-columns #column2 {
float: left;
width: 270px;
height:180px;
background: url(rgba.php?r=0&g=0&b=0&a=30) repeat;		
background: rgba(0,0,0,.3);	
padding:5px 15px 5px 15px;	
}

#three-columns #column3 {
float: right;
width: 270px;
height:180px;	
background: url(rgba.php?r=0&g=0&b=0&a=30) repeat;		
background: rgba(0,0,0,.3);	
padding:5px 15px 5px 15px;	
}

.link-style {
display: inline-block;
margin-top: 5px;
padding: 5px 15px;
background: #3F181D;
/*	border-radius: 10px; */
color: #FFFFFF;
}

.link-style2 {
display: inline-block;
margin-top: 10px;
padding: 10px 25px;
background: #3F181D;
border-radius: 10px;
font-size: 20px;
color: #FFFFFF;
}

#welcome {
width: 960px;
margin: 0px auto;
padding: 10px 0px;
color: #FFFFFF;
}

#welcome h2 {
padding: 0px 0px 20px 0px;
color:#FFF;
}

#welcome h2 a {
color: #FFFFFF;
}

#welcome a {
color: #FFFFFF;
}

contato.css

@charset "utf-8";

#wrapper{
   position: relative; /* opcional */
   height: 100%;
min-height:100%;
}

#footer{
   width: 100%;
   height: 100px;
   position: absolute;
}

.contato {
width: 960px;
padding: 10px 0px;
color: #FFFFFF;
margin: 0 auto;
min-height:100%;
height:100%;
position:relative;
}

.contato h2 {
margin-bottom: 0px;
padding: 12px 0px 0px 110px;
letter-spacing: -.5px;
color: #FFF; 	
background:url(../images/contato.png) no-repeat bottom left	;
}

.contato h3 {
padding: 0px 0px 0px 0px;
letter-spacing: -.5px;
color: #FFF; 
}

.contato hr {
border-width: 0; 
height: 1px;
background-color:#CCC;
margin-left:50px;
margin-right:50px;
}

.contato .entry {
padding: 12px 50px 0px 50px;
text-align: justify;
height:220px;;
min-height:100%;
}

.contato #esquerda{
float:left;
}

.contato #direita{
float:right;
}

.contato fieldset {
border: 0;
margin: 0;
padding: 0;
}

.contato input{
width:100%;
padding:3px;
margin-bottom:5px;
border:1px solid #c0c0c0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
background-color:#FFF;
}

.contato textarea{
padding:3px;
margin-bottom:5px;
border:1px solid #c0c0c0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px; 
overflow:auto;
line-height:1.6em;
background-color:#FFF;	
}

.contato input:focus, textarea:focus{
border-color:#600;
}

.contato label{
display:block; 
margin-top:5px;
}

.contato .width230{
width:100%;
}

.contato .loading, #resposta{
width:100%; 
background-color:#000;
border:1px dotted #FFF; 
font-size:14px;
color:#FFF;
padding:3px; 
text-align: center;
margin: 0; 
display:none;
}

.contato .loading img{
vertical-align:middle;
}

.contato .botao {
width:102%;
height:40px;
background: url(rgba.php?r=0&g=0&b=0&a=30) repeat;	 
background: rgba(0,0,0,.3);  
font-weight: bold;
color:#FFF;	
}

Sei que é bastante código e algumas coisas estão meio confusas ainda, mas ainda preciso otimizar e dar uma limpada geral, aguardo qualquer luz.

PS: Funciona no IE mas não no Chrome ou Firefox.

Obrigado

Bergs · Novembro 20, 2012

chegou a usar as propriedades left e bottom do position no rodapé?

Jhoy Ascari · Novembro 20, 2012

chegou a usar as propriedades left e bottom do position no rodapé?

Usei:

bottom: 0px

Neste caso funciona mas quando diminuo o tamanho da página o rodapé fica por cima do conteúdo, mesmo usando padding na div superior a do rodapé.

Jhoy Ascari · Novembro 20, 2012

To quase desistindo e reescrevendo a página, algo que era pra ser simples acabou virando um bixo de sete cabeças. :sick:

Entrar

Arquivado

CSS - com Rodapé

Recommended Posts

Jhoy Ascari 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bergs 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhoy Ascari 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhoy Ascari 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sound Designer

Orientação - Jav + MySql

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante