Rodapé

Fernando Henrique de Souza · Agosto 27, 2013

Olá pessoal estou finalizando o site de um cliente mais não encontro onde raios ajusto a altura da página e ela teima em sobrar uma altura após o rodapé, somente na página inicial, por favor se alguém puder me ajudar, será de grande valia!

Obrigado.

Restaurante Villa Verde

Wilherme · Agosto 27, 2013

Poste seu código para podermos ajudar

Fernando Henrique de Souza · Agosto 27, 2013

<!doctype html>

<html lang="pt-BR" class="no-js">

<head>

<!--[if lt IE 9]>

<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

<title>Restaurante Villa Verde e Biruta Pizzaria</title>

<!--[if gte IE 9]>

Cufon.set('engine', 'canvas');

</script>

<![endif]-->

Cufon.replace('h1')('h2')('h3')('h4')('h5')('h6');

Cufon('#nav', {color: '#ffffff',

hover: {textShadow: '0 0 1px 50px #fff'}});

</script>

</head>

<body>

</div>

<span>Restaurante Villa Verde</span>

</h1></a>

</div>

<li><a href="/buffet/">Buffet</a></li>

<li><a href="/cardapio/">Cardápio</a></li>

<li><a href="#">Contato</a>

<li><a href="/faleconosco/">Fale conosco</a></li>

<li><a href="/trabalheconosco/">Trabalhe conosco</a></li>

</ul>

</li>

</ul>

</div>

</header>

</div>

$(window).load(function() {

$('#slider').nivoSlider();

});

</script>

</div>

</div>

</div>

<!-- <div class="parceiros">

<h2>Trabalhamos somente com as melhores marcas!</h2>

<span>Sadia</span>

</h2></a>

<span>Aurora</span>

</h2></a>

<span>Frimesa</span>

</h2></a>

<span>Seara</span>

</h2></a>

<span>Vigor</span>

</h2></a>

<span>Bunge</span>

</h2></a>

</div> -->

<<div class="cartoes">

</div>

</div>

</body>

</html>

/*

css reset

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

body{

background: url("/imagens/bg.jpg") repeat;

}

h1.logotipo {

width: 184px; height: 184px;

background: url("imagens/logotipo.png") no-repeat;

position: relative!important;

top:5px!important;

left: 90px!important;

z-index:9998;

}

h1.logotipo span {

display: block;

width: 0;

height: 0;

overflow: hidden;

}

.tel{

position: absolute;

margin: -193px 0 0 535px;

z-index:9997;

}

h2.delivery{

margin: -200px 0 0 530px;

}

.limite{

width: 950px;

height:900px;

margin: auto;

background:url(imagens/bg-sombra.png);

}

#menu{

position:relative!important;

top: -78px!important;

left: 340px!important;

z-index: 9999;

background:url(imagens/menu.png)no-repeat;

width: 540px;

height: 73px;

}

#nav {

width: 540px;

height: 30px;

}

#nav li a {

margin-top: 15px;

padding: 10px;

display: block;

text-align: center;

font-size: 30px;

color: white;

list-style: none;

}

#nav li a:hover {

text-decoration: underline; /*Hover*/

}

#nav li:hover ul { display: block;

}

ul li {

float: left;

width: 130px;

position: relative;

}

.down {

display: none;

background:url(imagens/hover-f.png);

width: 168px;

height: 125px;

position:absolute;

top: 49px;

right: -20px;

}

.down li a{

width: 100px !important;

height: 40px !important;

margin-top: -10px !important;

font-size:20px !important;

position:relative;

top: 20px;

right: -20px;

}

.bg-slider{

float:left;

position:relative;

top: -15px;

left: 75px;

}

.bg-fundo{

background:url(imagens/bg-topo.png)no-repeat bottom center;

width: 900px;

margin: auto;

height: 145px;

z-index:-1;

}

.divider{

position: relative;

top: 140px;

background:url(imagens/divider.png)repeat-x;

height:24px;

}

.divider-baixo{

position: relative;

top: -270px;

left:25px;

background:url(imagens/divider.png)repeat-x center;

width: 900px;

height:24px;

}

h2{

color: #ffffff;

font-size:25px;

text-align: center;

padding: 10px;

margin-top:-30px;

}

#apres{

font-family: "Trebuchet ms";

font-size: 14px;

text-align: justify;

width: 900px;

height: 150px;

margin: 0 auto;

position: relative;

top: 55px;

line-height:20px;

}

#apres img{

padding-top: 10px;

margin: 0 auto;

}

.chamada1{

color: #fff;

width:260px;

float: left;

margin-right:20px;

margin-left:25px;

}

.chamada2{

color: #fff;

width :250px;

float : left;

margin-left:15px;

}

.chamada3{

color: #fff;

width:250px;

float :left;

margin-left:40px;

}

.cartoes{

width: 900px;

height:65px;

margin: 60px 0 0 0;

}

.parceiros{

position:relative;

top:100px;

width: 100%;

height:135px;

background:#5F8E40;

}

.parceiros h2{

margin-right: 10px;

margin-top:-10px;

}

h2.sadia {

width: 120px; height: 69px;

background: url("imagens/sadia-a.png") no-repeat left center;

float: left;

}

h2.sadia span {

display: block;

width: 0;

height: 0;

overflow: hidden;

}

h2.sadia:hover{background: url("imagens/sadia-b.png")no-repeat left center;

}

h2.aurora{

width: 120px; height: 69px;

background: url("imagens/aurora-a.png") no-repeat left center;

float: left;

}

h2.aurora span {

display: block;

width: 0;

height: 0;

overflow: hidden;

}

h2.aurora:hover{background: url("imagens/aurora-b.png")no-repeat left center;

}

h2.frimesa{

width: 120px; height: 69px;

background: url("imagens/frimesa-a.png") no-repeat left center;

float: left;

}

h2.frimesa span {

display: block;

width: 0;

height: 0;

overflow: hidden;

}

h2.frimesa:hover{background: url("imagens/frimesa-b.png")no-repeat left center;

}

h2.seara{

width: 120px; height: 69px;

background: url("imagens/seara-a.png") no-repeat left center;

float: left;

}

h2.seara span {

display: block;

width: 0;

height: 0;

overflow: hidden;

}

h2.seara:hover{background: url("imagens/seara-b.png")no-repeat left center;

}

h2.vigor{

width: 120px; height: 69px;

background: url("imagens/vigor-a.png") no-repeat left center;

float: left;

}

h2.vigor span {

display: block;

width: 0;

height: 0;

overflow: hidden;

}

h2.vigor:hover{background: url("imagens/vigor-b.png")no-repeat left center;

}

h2.bunge{

width: 120px; height: 69px;

background: url("imagens/bunge-a.png") no-repeat left center;

float: left;

}

h2.bunge span {

display: block;

width: 0;

height: 0;

overflow: hidden;

}

h2.bunge:hover{background: url("imagens/bunge-b.png")no-repeat left center;

}

.rodape{

width: 900px;

height: 60px;

background: url("/imagens/divider.png") repeat center;

position:relative;

top: 10px;

}

h3{

color: #fff;

font-size: 20px;

font-weight: 200;

padding:20px 0 0 15px;

}

.face{

width: 100px;

position: relative;

top: -11px;

left: 360px

}

Diéssica · Agosto 27, 2013

Fernando,

eu analisei todo o seu código, do HTML ao CSS. Eu diria que o problema é a estrutura HTML/CSS do website, já que o HTML veio acompanhado de uma formatação CSS totalmente incorreta. Você utilizou muito position desnecessariamente, e desconhecer a verdadeira função de um position junto de top, left[...] em um código é um erro bem grande e trabalhoso de ajeitar.

Se eu fosse você, reestruturaria TOTALMENTE o site. O código está mal pensado e, consequentemente, mal desenvolvido.

...Mas caso não tenha mais tempo para estudar (lamento se esse for o seu caso), a "solução" está no valor da propriedade top no elemento .divider-baixo. Altere-o e verá que a margem do rodapé se dá pela manipulação incorreta dos elementos. Me arrisco a dizer que é o máximo que se pode fazer nessa situação.

Refiz uma parte do seu código rapidinho aqui me baseando nas imagens do seu site para mostrar como tudo é mais simples com um código melhor estruturado :seta: http://jsfiddle.net/fWARM/

Uma observação sobre: Eu particularmente não faria com tantas imagens assim como foi feito. Usei o seu site como base para mostrar que para nem tudo se é necessário position. Não vicie nisso. Estude todas as propriedades do CSS e elementos do HTML (de linha, de bloco) que puder.

Algumas referências interessantes:

:seta: Maujor

:seta: HTML/CSS: The Right Way

:seta: Mozilla Developer Network

:seta: HTML Validator

:seta: CSS Validator

Felipe Espinosa Fernandes · Agosto 27, 2013

Boas dicas da Diéssica... soh adicionando uma observação para o Fernando, de uma olhada em HTML5 e semanticas.

O código está muito confuso devido aos usos abusivos e inadequados das "div", existem tantas outras tags que poderiam ser utilizadas e mais bem aplicadas.

Sugestão:
http://tableless.com.br/html-5-semantica-e-o-que-e-importante-na-web/#.Uhzx-hu1GXw

Entrar

Arquivado

Rodapé

Recommended Posts

Fernando Henrique de Souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wilherme 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fernando Henrique de Souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Felipe Espinosa Fernandes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Girls From Your Town - Anonymous Casual Dating - No Selfie

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante