Ir para conteúdo

POWERED BY:

Arquivado

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

marvi

Plano de fundo com CSS

Por , em Desenvolvimento frontend

Recommended Posts

marvi    0

marvi
Postado

Olá pessoal, vejo alguns sites em CSS que eles colocam um plano de fundo no site que fica no topo da página e de uma ponta a outra independente da resolução do site e ao mesmo tempo eles criam um rodapé de ponta a outra também acompanhando a altura do site sem cortar os coneteúdos e percebi que não é uma imagem toda de fundo... é como se fosse montada algo assim...

 

Para ter uma idéia vejam esses sites: http://www.peninsuladesign.co.uk/ e http://mtr-design.com/en/ por exemplo...

 

Como fazer esse processo? É em CSS isso não é?

 

Obrigado!

 

Marcelo

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

A primeira imagem, pode ser tanto um topo com 100% de width, como background do body mesmo.

E o rodapé, pode ser uma DIV posicionada no fim do documento, com 100% de width tb.. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
}
#new_body {
	position: relative;
	min-height: 100%;
}
 /* hack para IE6 que trata height como min-height */
* html #new_body { height: 100%; }
#topo {
	background-color: #f00;
}
#conteudo {
	heig ht: 900px;
	width: 600px;
	margin: 0 auto;
}
#rodape {
	background-color: #00f;
	position: absolute;
	bottom: 0;
	width: 100%;
}

</style>
</head>
<body>
<div id="new_body">
	<div id="topo">
		topo
	</div><!-- /topo -->



	<div id="conteudo">
		Conteudo
	</div><!-- /conteudo -->



	<div id="rodape">
		Rodape
	</div><!-- /rodape -->
</div><!-- /new_body -->


</body>
</html>
Veja se entende esse exemplo que fiz.

Compartilhar este post

Link para o post
Compartilhar em outros sites

marvi    0

marvi
Postado

William, pesquisando achei o seguinte:

 

Coloca um plano de fundo no topo do site de forma horizontal:

 

<style type="text/css">
<!--
body {
background-image: url('sf_grey_top.gif');
background-repeat: repeat-x

}
-->
</style>

Para colocar um rodapé no site é só inserir mais esse código

 

<style type="text/css">
<!--
* { margin: 0; padding: 0; }

/* Min-Height é usado por browsers modernos - "HEIGHT:AUTO" é necessário */

#rodape { width:100%; background-image: url('sf_grey_top.gif'); color:#fff; position: absolute; bottom:0px; height: 40px; margin:0px; }
* HTML #rodape { margin-bottom:0px; bottom:-1px; }
#rodape-conteudo { text-align:center; line-height: 40px; }
-->
</style>

Sendo assim, sintetizei os códigos:

 

<style type="text/css">
<!--
* { margin: 0; padding: 0; }
body {background-image: url('sf_grey_top.gif'); background-repeat: repeat-x }
#rodape { width:100%; background-image: url('sf_grey_top.gif'); color:#fff; position: absolute; bottom:0px; height: 40px; margin:0px; }
* HTML #rodape { margin-bottom:0px; bottom:-1px; }
#rodape-conteudo { text-align:center; line-height: 40px; }
-->
</style>

A questão agora é o meio? Se eu for colocar uma imagem e como fazer para ela ficar ajustada ou determinado espaço entre o topo e o rodapé?

 

Aproveitando... o conteúdo que fica no meio se for grande de mais acaba passando do rodapé... não tem como o rodapé acompanhar o coneteudo do site? Tipo: se tem uma seção com um texto comprido de mais, acaba entrando pelo rodapé.

Compartilhar este post

Link para o post
Compartilhar em outros sites

marvi    0

marvi
Postado

Eu acho que resolvir essa questão:

 

Aproveitando... o conteúdo que fica no meio se for grande de mais acaba passando do rodapé... não tem como o rodapé acompanhar o coneteudo do site? Tipo: se tem uma seção com um texto comprido de mais, acaba entrando pelo rodapé.

 

Re: #conteudo { margin: 0 auto; text-align: left; position: relative; min-height: 100%; height: auto; height: 100%; }

 

Só colocar essa linha no CSS e claro a div:

 

<body topmargin="0">

<div id="conteudo">

 

Certo, não é? Ou tem algo, macete, que o pessoal faz com o CSS?

 

Acho que o que coloquei não foi bom assim... alguem tem dicas para essas coisas?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você testou oque passei?

É praticamente o mesmo que você colocou, só que simplificado.

A idéia, é que se for imagem, ela tenha um repet-y...

 

Para esticar o conteudo, fazendo um efeito de 100%, temos o seguinte:

http://forum.imasters.com.br/index.php?showtopic=291579

Compartilhar este post

Link para o post
Compartilhar em outros sites

marvi    0

marvi
Postado

William, é a mesma coisa então? Ok... eu quis centralizar a tabela mãe no meio, tipo align=center, mas só deu certo com FireFox, como faço para o Internet Explorer também? Fiz assim:

 

margin-left: auto;

margin-right: auto;

 

}

-->

</style>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito