Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Beleza pessoal
Galera queria fazer um layout elástico, aqueles layout que quando dá o zoom ele se estica junto com o browser.
um exemplo de layout que eu quero paracido e o do http://getninjas.com.br/
fiz um desenho do exemplo do layout:
/applications/core/interface/imageproxy/imageproxy.php?img=http://1.bp.blogspot.com/-Lg0h-dY7rbs/UBdeZaYceqI/AAAAAAAAAL8/Avsms8uSlb4/s1600/layout.png&key=a169f489c482225cf723ed480b4a281b75ce8d93e7245525b954ee8bdb9fdb95" alt="layout.png" />
..:: Informações ::..
o cabeçalho:largura: elastico e de altura: 80px
o conteudo: largura de 960 px e altura:auto; (OBS.: a coluna conteudo tem que ficar centralizado)
o rodape:largura elastico e de altura: 190px
já quebrei muito a cabeça aqui preciso muito da ajuda de vocês de como montar esse tipo de layout, agradeço já abraços
Quando eu coloquei um float:left; numa div(box) dentro da div conteudo, ela ficou estranha!
o css da div .box que dei float:left;
.box{width:100px;height:190px;background:#CCCCCC;margin:20px;float:left;}
no html
<div id="topo">
</div>
<div id="conteudo">
<div style="height:100px;">
COnteúdo da pg aqui, (height:100px)
</div>
<div class='box'></div>
</div>
<div id="rodape">
</div>e o rodapé tbm não ficou em baixo
hmm...
troque a css do conteúdo para:
#conteudo{
width:960px;
margin:0px auto;
min-height:100%;
overflow:hidden;
background:#0033CC;
}ah, outra coisa...
eu quis dizer com "embaixo" q a div fica abaixo de todas as divs, e não colada no rodapé...
sempre dava problema para mim, mas a solução é essa.
só coloquei para que no futuro, caso haja algum problema você já tenha a solução
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste</title>
<style type="text/css">margin: 0;
border: none;
padding: 0;
}text-align: center;
}clear: both;
height: 100px;
background: gray;
}text-align: left;
}
#conteudo {
width: 960px;
display: inline-block;
margin: 0 auto;
background: #CCC;
}
.box {
float: left;</style>
</head>
<body>
<div id="topo">
</div>
<div id="conteudo">
<div class="box">
Conteúdo da pg aqui, (height:100px)
</div>
</div>
<div id="rodape">
</div>
</body>
</html>Problema do float resolve-se alterando o display do pai. :thumbsup:
Agora sim, obrigado pela ajuda! :grin:
mas só tem uma coisa, o rodapé não fica em baixo quando e dado o zoom ele não fica em baixo e sim grudado no layout de cima :ermm:
tem como me ajudar
Olha Lorena Ribeiro, pelo que eu entendi dando um
margin-bottom:10px;
na div conteudo resolve o seu problema...olha como eu fiz:
<!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"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>margin:0px auto;
}
#topo{
width:100%;
height:100px;
margin:0px auto;
background:#CCCCCC;
}
#conteudo{
width:960px;
margin:0px auto;
min-height:100%;
overflow:hidden;
background:#0033CC;
margin-bottom:10px;
margin-top:10px;
}
#rodape{
width:100%;
height:100px;
margin:0px auto;
clear:both;
position:relative;
background:#FF0000;
}</style>
<body>
<div id="topo">
</div>
<div id="conteudo">
<div class="box"></div>
</div>
<div id="rodape">
</div>
</body>
</html>espero q seja isso...
bj's
Lorena, você quer manter o rodapé sempre grudado lá embaixo? Veja se ajuda:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste</title>
<style type="text/css">margin: 0;
border: none;
padding: 0;
}height: 100%;
}min-height: 100%;
text-align: center;
position: relative;
}clear: both;
height: 100px;
background: gray;
}text-align: left;
}
#conteudo {
width: 960px;
display: inline-block;
background: #CCC;
margin: 0 auto 100px auto;
}
#rodape {
position: absolute;
width: 100%;
bottom: 0;
}
.box {
float: left;
}
</style>
</head>
<body>
<div id="topo">
</div>
<div id="conteudo">
<div class="box">
Lorem ipsum<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Dolor sit amet
</div>
</div>
<div id="rodape">
</div>
</body>
</html>Exatamente o rodapé sempre grudado la baixo, vlw pela ajuda! muito mesmo
Uma dúvida Lorena Ribeiro...
Tu queres este rodapé fixo?
tipo o topo do facebook?
(rola o conteúdo e o rodapé fica)
[]'s
Willian o rodapé sempre lá em baixo mas não fixo que nem o do facebook, digo sempre lá em baixo, quando o usuario aumenta o zoom mais quem 100% da pagina ele sempre fique colado na parte de baixo!
André fiz um teste no navegador do Internet Explore 7 e 8 cons o comando em html e css que você me passou, o layout ficou meio que fora de linha(estranho), no restantes dos outros navegadores(firefox, chrome) ficou do geito que eu quero!
Tem como resolver esse problema do Internet Explore, que fique igual do firefox, chrome!
CSS:
html:
Defina um width:100%; e um margin:0px auto; assim ele vai ficar "elástico".
no rodapé, eu coloquei a propriedade clear:both e position:relatve para ele sempre ficar abaixo de todos os elementos.
espero ter ajudado
sd's