Ir para conteúdo

POWERED BY:

Arquivado

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

Rodrigo B.A

Sombra com backgroub-image

Por , em Desenvolvimento frontend

Recommended Posts

Rodrigo B.A    0

Rodrigo B.A
Postado

Olá!

Estou querendo fazer um layout com o container principal com sombra, tentei botar uma imagem de fundo branca com sombra feita na propria imagem, ai no rodape, inclui uma div com sombra e borda arredondada, so que o mesmo quando eu incluo um conteudo a mais, desce todo o corpo do site, e o rodape sai junto, desfaucando tudo......

 

Gostaria de saber se tem como fazer o radape acompanhar o corpo principal, ou se vcs conhecem alguma outra alternatica para inserir sobra no layout todo.

 

Grato pela ajuda

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Boas,

 

Amigo Rodrigo seria possível deixar o seu código para a gente puder analisar ou até mesmo o código ficar online e você colocar dois exemplos do que se está tratando. Assim facilita mais para o pessoal aqui do forum.

 

Cumprimentos

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

agora ficou mais facil te ajudar!!!

 

coloque uma imagem de fundo na div e mande-a repetir verticalmente e alinhe-a a esquerda!

 

assim:

 

#sua_div {
	 background: #FFF url(bg.gif) repeat-y top left;
}

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

infelizmente terá que fazer o que eu disse acima, porem duas vezes!

 

uma para cada canto, terá que criar duas div ou usar dois elementos que já estão na sua página!

 

se não conseguir, posta o trecho do código que te ajudamos!

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo B.A    0

Rodrigo B.A
Postado

bom aqui esta o layout pretendido o inicio dele, só quero por sombra neste quadrado todo principal o layout todo

 

http://www.datawebe.com.br/fundo/

 

Aqui esta o codigo

 

 

<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="principal">
  <div id="topo">
<div id="menu">sad </div>
</div>


</div>


</body>
</html>

Aqui esta a CSS

 

#principal {
	height: 740px;
	width: 700px;
	margin: auto;
	background-repeat: no-repeat;
	padding: 2px;
	border: 1px solid #999999;
}
#principal #topo {
	background-image: url(images/topo.jpg);
	background-repeat: no-repeat;
	height: 270px;
	width: 725px;
	margin-left: 5px;
	margin-right: 5px;
}
#principal #topo #menu {
	height: 259px;
	width: 232px;
	margin-left: 35px;
}

#principal #rodape {
	background-image: url(images/rodape.jpg);
	height: 25px;
	width: 707px;
	clear:both;
}
#principal #conteudo {
	height: 250px;
	width: auto;
	padding: 5px;
}
#principal #esq {
	background: #FFF url(bg.gif) repeat-y top left;
	height: auto;
	width: 25px;
obrigado desde ja

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Boas,

 

Bom isso assim torna mais difícil, pois o conteúdo não deve de ser estático, logo você terá que fazer pelo menos três slices (topo do rectângulo com sombra, fim do rectângulo com sombra, um bocado do meio com sombra). Não sei se percebeu a ideia dos slices, depois é só você dividir em três divs (uma div topo com a imagem de topo, outra div fundo com imagem de fundo do rectângulo, e uma div 'principal' na qual terá todo o seu conteúdo, i.e.:

 

HTML:

 

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

CSS:

 

#topo { background-image: url(topo.png); }

#principal { background: url(centro.png) repeat-y; }

#fundo { background-image: url(fundo.png); }
Claro que depois no CSS você terá que jogar com as posições.

 

Isto é só uma dica, existem outras maneiras, mas acho que não é preciso tanto.

 

Cumprimentos

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