Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lorena85

layout elástico como fazer

Recommended Posts

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:

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.