Ir para conteúdo

POWERED BY:

Arquivado

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

jon10

Background de site adaptável ao tamanho do mesmo

Por , em Desenvolvimento frontend

Recommended Posts

jon10    0

jon10
Postado

Ae galera tranquilo?

Então eu estou terminando um site em PHP, mas eu preciso colocar um fundo bom nele,eu ja sei que estilo vou usar mas eu queria fazer uma coisa semelhante a esse site:

http://wsolucoes.com.br/

 

se vocês puderem dar uma olhada,ao dar menos zoom no site,o fundo fica junto com o corpo do mesmo,e eu nao sei como fazer isso,se alguem souber como fazer e puder explicar,vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

bruno_mosciatti    22

bruno_mosciatti
Postado

Isso é o básico de html/css amigão, aconselho a dar uma estudadinha ! Você tem que tratar o body com margin 0 auto, blz? Define uma largura. Esses são os primeiros passos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Boa tarde, jon10.

 

Segue abaixo uma implementação simples do que você esta querendo:

 

HTML:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Fundo Expansivo</title>

	<link rel="stylesheet" href="css/main.css">
</head>
<body>
	<header id="header">
		<div class="content">
			<h1>Título Cabeçalho</h1>
			<p>Descrição do Cabeçalho</p>
		</div>
	</header><!-- #header -->

	<article id="article" class="content">
		<h2>Título do Artigo</h2>
		<p>Descrição do Artigo</p>
	</article><!-- #article -->

	<footer id="footer">
		<div class="content">
			<p>Tel. 9999-9999</p>
			<p>Cel. 9 1234-1234</p>
			<p>Direitos Reservados</p>
		</div>
	</footer><!-- #footer -->
</body>
</html>

CSS:

* { margin: 0; border: none; padding: 0; list-style: none; }

.content { margin: 0 auto; width: 960px; }

#header {
	height: 200px;
	background-color: red;
	border-bottom: 20px solid blue;
	color: #FFF;
}

#article { height: 600px; }

#footer {
	height: 150px;
	background-color: red;
	border-top: 20px solid blue;
	color: #FFF;
}

Por padrão o valor da propriedade width é auto, no caso de um elemento em bloco (display: block;), se tiver o valor de width como auto, o comportamento é se adptar a largura do browser, conforme o #header e o #footer.

A classe .content tem um width (largura) de 960px alinhado ao centro, para alinhar ao centro foi utilizado a técnica de deixar o valor da propriedade margin como 0 auto. Caso você não conheça os tipos de declaração do CSS recomendo o post do Bruno Leite.

 

Acho que é só! Se tiver alguma dúvida só falar.

Abs!

Compartilhar este post

Link para o post
Compartilhar em outros sites

jon10    0

jon10
Postado

vo tenta aqui mas to boiando um pouco,eu entendi aqui fiz um exemplo com seu codigo e funcionou mas colocar no meu codigo eu nao estou conseguindo heheh,ae complicou

Compartilhar este post

Link para o post
Compartilhar em outros sites

jon10    0

jon10
Postado

ae galera vlw,eu usei os exemplos ae do pessoal,e apliquei no body a propriedade la no margin,0px auto,e to conseguindo aki vlw galera

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