layout elástico como fazer

lorena85 · Julho 31, 2012

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:

..:: 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

Willian Makoto · Julho 31, 2012

CSS:

#topo{
width:100%;
height:80px;
margin:0px auto;
background:#CCCCCC;
}
#conteudo{
width:960px;
margin:0px auto;
height:auto;
background:#0033CC;
}
#rodape{
width:100%;
height:190px;
margin:0px auto;
clear:both;
position:relative;
background:#FF0000;
}

html:


<div id="topo">
</div>

<div id="conteudo">

   <div style="height:100px;">
       COnteúdo da pg aqui, (height:100px)
   </div>

</div>

<div id="rodape">
</div>

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

lorena85 · Julho 31, 2012

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

Willian Makoto · Julho 31, 2012

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

André do Vale · Julho 31, 2012

<!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;
}
body {
text-align: center;
}
#topo, #rodape {
clear: both;
height: 100px;
background: gray;
}
#topo, #rodape, #conteudo {
text-align: left;
}
#conteudo {
width: 960px;
display: inline-block;
margin: 0 auto;
background: #CCC;
}
.box {
float: left;
height: 400px; /*teste de altura do box*/
}
</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:

lorena85 · Julho 31, 2012

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

Willian Makoto · Julho 31, 2012

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>
body{
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;
}
.box{width:100px;height:190px;background:#CCCCCC;margin:20px;float:left;}
</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

André do Vale · Julho 31, 2012

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;
}
html {
height: 100%;
}
body {
min-height: 100%;
text-align: center;
position: relative;
}
#topo, #rodape {
clear: both;
height: 100px;
background: gray;
}
#topo, #rodape, #conteudo {
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>

lorena85 · Julho 31, 2012

Exatamente o rodapé sempre grudado la baixo, vlw pela ajuda! muito mesmo

Willian Makoto · Julho 31, 2012

Uma dúvida Lorena Ribeiro...

Tu queres este rodapé fixo?

tipo o topo do facebook?

(rola o conteúdo e o rodapé fica)

[]'s

lorena85 · Julho 31, 2012

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!

Arquivado

layout elástico como fazer

Recommended Posts

lorena85 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Willian Makoto 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

lorena85 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Willian Makoto 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

lorena85 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Willian Makoto 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

lorena85 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Willian Makoto 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

lorena85 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sound Designer

Orientação - Jav + MySql

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante