Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal
Estou aprendendo a produzir layouts em tabless só que estou tendo um pouco de dor de cabeça com uma coisinha:
Eu quero colocar uma div onde estará o conteúdo com 100% de altura, coloquei body e html com height de 100% também conforme vi em alguns tutoriais disso pela net, procurei pelo forum masi não axei nada referente a esse tipo de problema que é assim:
Eu tenho um Topo e Um "meio" abaixo do topo, e logo abaixo do "meio" vem o conteúdo, essa div que tem o conteúdo tem 100% de height, só que: ela fica com o tamanho exato da janela em vez de apenas ocupar o restante do espaço na janela.
Ou seja
Tamanho do meu documento = janela toda (div de conteudo) + tamanho do topo + tamanho do "meio" + tamanho do rodapé
=
Barra de rolagem desnessessária.
O que eu devo fazer pra ela entender que é somente o restante do espaço??
Meu código é esse:
index.php
<?php include("header.php");// somente processamento de config PHP . Nada de HTML aqui. ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<title><?php echo TITULO_SITE; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/estilo.css" type="text/css" />
<link rel="stylesheet" href="css/layout.css" type="text/css" />
</head>
<body>
<?php include("topo.php"); ?>
<div id="layoutBorder" align="center">
<div id="centroTopo">
<img id="imgCentroTopo" src="imagens/pic01.jpg" width="335" height="193" alt="Informação" />
<div id="menu1CT"></div>
<div id="menu2CT"></div>
</div>
<div id="content">Conteúdo</div>
<?php include("footer.php"); ?>
</div>
</body>
</html>Meu arquivo layout.css
@charset "utf-8";
/ CSS Document /
body,td,th {
font-family: Trebuchet MS, Verdana, Geneva, sans-serif;
color: #000000;
} background-color: #241765;
margin: 0px;
padding: 0px;
} height: 100%;
}
#topoLaranja{
background-color: #F9B205;
width:100%;
height: 170px;
}
#conteudoTop{
width: 668px;
height: 150px;
background-color:#FFF;
}
#logo{
top: 48px;
left: 48px;
position: relative;
}
#slogan{
top: 42px;
left: 120px;
position: relative;
}
#layoutBorder{
height:100%;
}
#centroTopo{
width: 668px;
height: 193px;
background-color: #d4d5d6;
}
#menu1CT{
width: 147px;
height: 193px;
background-color: #bebebe;
float:left;
}
#menu2CT{
width: 186px;
height: 193px;
background-color: #d4d5d6;
float:left;
}
#imgCentroTopo{
float:left;
}
#content{
width: 668px;
height: 100%;
background-color: #fff;
text-align:left;
}Agredeço desde já.
Olha . . .essa é a parte de cima do layout:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.shinkyokushin.com.br/image1.jpg&key=9b1585be76a1ee578b3b7de2b57d516fab2b078d87d883338a05afd86bae0eba" alt="Imagem Postada" />
E essa a parte de baixo mostrando como que esta sobrando:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.shinkyokushin.com.br/image2.jpg&key=26913ff84ce70aa7d157c396855fe1b21adc083ba6d4fb792ec4584544329a54" alt="Imagem Postada" />
Ele ta dando o tamanho da janela pra DIV e o documento soma o tamanho dos elemntos.
Já peguei outros exemplos na net e sempre que coloco conteúdo acima da div que tem 100% da rolagem devido a esse problema.
Pode postar o link? Aqui não estou conseguindo. =/
Link: http://furia.ws/kb/
Entendi o problema, mas não entendi o que quer fazer.
Eu colocaria um min-height e um height setado em auto:
height: auto;
min-height: 500px;>
Entendi o problema, mas não entendi o que quer fazer.
Eu colocaria um min-height e um height setado em auto:
height: auto;
min-height: 500px;Então Matheus, o que eu quero é que a página fique com 100% de aproveitamento da altura, ou seja, quando o conteúdo não chegar até o rodapé, a div ir ainda assim até o final ficando o rodapé encerrando a página e SEM ROLAGEM, já tentei de tudo, min-height, um monte de coisa e cheguei a seguinte conclusão:
CSS não faz tudo que uma tabela pode fazer =/
E essa conclusão vem até mesmo do CSS do famoso LIGHTBOX que quando vai mostrar a foto, que fica aquela div semi-transparent com 100% de altura e 100% de largura, se você tem rolagem e desce, ela não acompanha a altura mais, diferente de uma tabela.
Não que eu esteja dizendo que devemos fazer com tabela, mas quem é acostumado a fazer layout onde a célula vai ocupar o restante da janela, com CSS > pode esquecer. Fazer Div ficar com 100% de altura do inicio ao final da página sem nada antes dela é fácil, tenta fazer depois de um conteúdo.
Bom, enquanto não acho uma solução meu rodapé vai ficar no meio da página mesmo caso não haja conteúdo suficiente para ir ao final dela.
Conclusão final:
100% pra uma tabela = "TODA a página ou RESTANTE da Página";
100% pra uma DIV = "Tamanho da janela do seu browser porque 'RESTANTE' não ta no dicionário do CSS";Agradeço a vocês pela ajuda.
Utilize float junto com margin para posicionar. ;)
>
Utilize float junto com margin para posicionar. ;)
Mas o que adianta se minha div continuará tendo o tamanho da minha janela? Axo que não entendeu o que eu quero! Ta tudo no que eu escrevi ali no meu post anterior.
Mesmo lendo seu penúltimo post, não entendi. :unsure:
E minha resposta continua sendo a mesma. Use float junto ao margin para posicionar seus elementos. Você está usando position onde não há necessidade.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
>
Mesmo lendo seu penúltimo post, não entendi. :unsure:
E minha resposta continua sendo a mesma. Use float junto ao margin para posicionar seus elementos. Você está usando position onde não há necessidade.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Thiago, é que eu sou novato em tabless, por isso devo estar usando aí umas coisas que nem eram necessárias, mas como eu fiz e deu certo hehehe, aí eu deixei.
Então cara, tentar explicar de novo:
Imagina que a altura do meu browser seja 1000px (só exemplo . . . 1000 pra arredondar rs)
Aí eu tenho um conteúdo no topo de 400px
1000 - 400 = 600px restante
Aí eu tenho um rodapé de 50px
600 - 50 = 550px restantes
Aí esse "restante" tem que ser ocupado pela DIV, o que eu fazia com a tabela era dar 100% de height pra célula.
Se eu dar 100% de height pra essa DIV, ela terá em vez de 550px, 1000px que é a altura da janela.
Total do documento então: 400px de topo + 1000px de Div + 50px de rodapé = 1450px
Ou seja:
Se a altura da minha janela era de 1000px e mesmo sem ter conteúdo no documento suficiente pra chegar ao final dela (janela), ela terá barra de rolagem de + 450px.
É isso que esta ocorrendo no meu documento se você observar.
Entendeu? =/
Se eu conseguir fazer essa div ficar com o restante da largura 550px. eu vou dominar o mundo com tabless eu axo, porque é a única coisa que estou quebrando a cabeça pra fazer. Quer dizer, nem to mais . . . porque já desisti desse lance de 100%, se não tiver conteúdo vai ficar pela metade da janela mesmo até um dia que eu tiver mais tempo pra estudar isso.
Vlw a atenção ae Thiagão!! =]
Acho que entendi agora o que quer. Ohe isso http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php
Com esse tutorial vai ter o efeito que deseja. ;)
OwwWwWpa . . . . é exatamente isso Thiagão!!! Vlw mesmo cara. Finalizou minhas dúvidas em CSS.
Agora é só eu estudar isso mais um pouco e aplicas nos meus layouts.
Brigadão mesmo!! flw http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
Que bom que resolveu. :D
Desculpa pelo desentendimento da pergunta. Não estava estendendo mesmo. :blink:
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Eu não entendi. http://forum.imasters.com.br/public/style_emoticons/default/upset.gif
Pode postar uma imagem de como quer que fique?
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif