Background 3colunas

[Neri Junior 0]

Bem li um tópico por inteiro sobre esse assunto porem nao entendi bulufaz nenhuma, bom vou mostrar uma imagem do que eu quero:

 

 

 

deu para entender?

nao? vamos la

 

tenho a 1imagems (bg_left.png) que ficara no lado esquerdo do conteudo e outra imagem(bg_right.png) que ficara no lado direito do conteudo, agora, a questão é, como fazer?

 

Espero que entendam!

Obrigado!

[roberto182 0]

Eu faria algo do tipo:

 

CODE

<style>

#container

{

float:left;

background-image: xxx.jpg;

}

#bgesquerdo

{

float:left;

background-image: yyy.jpg;

}

#conteudo

{

float:right;

background-image: www.jpg;

}

#bgdireito

{

float:right;

background-image: kkk.jpg;

}

</style>

 

<div id="container">

<div id="bgesquerdo">

</div>

<div id="conteudo">

</div>

</div>

<div id="bgdireito">

</div>

 

[Neri Junior 0]

infelismente nao funcionou

alguem tem mais alguma ideia?

Obrigado!

[William Bruno 1501]

é "simplesmente" um layout com 3 colunas?

Não é o "background" que tem 3 colunas...

 

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

Já leu esse?

[webflex 0]

Olá,

 

Eu faria:

CSS

.bgEsquerda { float: left; background-image: xxx.jpg; width: comprimentoPX; heigth: alturaPX; }
.bgCentro { float: left; }
.bgCentroTopo { position: relative; background-image: yyy.jpg; width: comprimentoPX; heigth: alturaPX; }
.bgCentroBaixo { position: relative; background-image: zzz.jpg; width: comprimentoPX; heigth: alturaPX; }
.bgDireita { float: left;  background-image: www.jpg; width: comprimentoPX; heigth: alturaPX; }

HTML

<div class="bgEsquerda"></div>
<div class="bgCentro"><div class="bgCentroTopo"></div><div class="bgCentroBaixo"></div></div>
<div class="bgDireita"></div>

Não testei o código, mas à partida seria algo assim do genero. Se tiver problemas no topo e baixo veja se é da propriedade position.

Aguardo uma resposta amigo ;).

 

Cumps \o/

[Neri Junior 0]

vo tentar explicar de novo:

 

tenho a imagem bg_left.PNG que será o fundo do lado esquerdo.

outra imagem bg_right.PNG que será o fundo do lado direito.

o fundo do conteudo é #373737.

 

ou sejá:

<style>

#bg_left{
   float: ??????;
   background: imagens/bg_left.PNG repeat-y;
   height: 100%;
   width: 130px;
} 

#conteudo{
	float: ??????;
	margin: 0 20% 0 20%;
	background: #373737;
	border: 1px solid #232323;
}

#bg_right{
   float: ??????;
   background: imagens/bg_right.PNG repeat-y;
   height: 100%;
   width: 130px;
} 


</style>

o problema é o float e o html das divs

Obrigado!

[William Bruno 1501]

#bg_left{
   float: left;
}
 #conteudo{
	float: left;
}
#bg_right{
   float: right;;
}

e

<div id="bg_left"></div>
<div id="conteudo"></div>
<div id="bg_right"></div>

[No Rain 0]

Eu partiria do principio que a gente quer 3 divs, cada qual com um tamanho e um fundo.

 

Isso no html fica simples com o código

 

<div id="fundoesq"></div>

<div id="conteudo"></div>

<div id="fundodir"></div>

o esquema está no css.

 

div#fundoesq {
	 width: 205px;
	 background: imagens/bg_left.PNG repeat-y;
	 float: left;

}

div#conteudo {
	 width: 752px;
	background: #373737;
	border: 1px solid #232323;
	 float: left;

}

div#fundodir {
	 width: 205px;
	 background: imagens/bg_right.PNG repeat-y;
	 float: left;

}

esse código só não influencia na altura, que poderia ser de 100%.

 

no seu ultimo código voce deixou uma margem de 20% para a div do conteúdo. não entendi muito bem o porque dessa margem ou se era apenas um código de exemplo, Mas no meu código, seguindo sua imagem de exemplo, a imagem de fundo esquerdo e direito tería esse tamanho de 205 incluindo a sombra que existe de fundo da parte central do layout.

 

 

e esse meu código funciona para um fundo central da cor #373737 sem o desenho do topo/conteudo que tem na sua imagem de exemplo.

 

Tá bem simplificado o código mas acho que funciona heeh

[No Rain 0]

Eu partiria do principio que a gente quer 3 divs, cada qual com um tamanho e um fundo.

 

Isso no html fica simples com o código

 

<div id="fundoesq"></div>

<div id="conteudo"></div>

<div id="fundodir"></div>

o esquema está no css.

 

div#fundoesq {
	 width: 205px;
	 background: imagens/bg_left.PNG repeat-y;
	 float: left;

}

div#conteudo {
	 width: 752px;
	background: #373737;
	border: 1px solid #232323;
	 float: left;

}

div#fundodir {
	 width: 205px;
	 background: imagens/bg_right.PNG repeat-y;
	 float: left;

}

esse código só não influencia na altura, que poderia ser de 100%.

 

no seu ultimo código voce deixou uma margem de 20% para a div do conteúdo. não entendi muito bem o porque dessa margem ou se era apenas um código de exemplo, Mas no meu código, seguindo sua imagem de exemplo, a imagem de fundo esquerdo e direito tería esse tamanho de 205 incluindo a sombra que existe de fundo da parte central do layout.

 

 

e esse meu código funciona para um fundo central da cor #373737 sem o desenho do topo/conteudo que tem na sua imagem de exemplo.

 

Tá bem simplificado o código mas acho que funciona heeh

[Neri Junior 0]

esse é o problema a div do centro a conteudo nao tem tamanho ela ajusta conforme a resolução!

[Giovani 104]

A questão é sobre o background ou sobre a construção do layout?

Por favor, tente ser um pouco mais específico, pois eu não entendi nada.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Neri Junior 0]

certo vamos la

 

1ª DIV o bg_left tem de ter no minimo 130px de largura por 100% de altura com uma imagem bg_left.png

2ª DIV do conteudo ela deve ser ajustavel a qual sejá a resolução do usuario com o background de cor solida 373737

3ª DIV o bg_right igual a div bg_left porem muda a imagem bg_right.png

 

entenderam?

OBrigado!

[Baguerinha 0]

certo vamos la

 

1ª DIV o bg_left tem de ter no minimo 130px de largura por 100% de altura com uma imagem bg_left.png

2ª DIV do conteudo ela deve ser ajustavel a qual sejá a resolução do usuario com o background de cor solida 373737

3ª DIV o bg_right igual a div bg_left porem muda a imagem bg_right.png

 

entenderam?

OBrigado!

 

hehehe... já começo rindo pois vou só criticar, porém criticas a meu ver construtivas.

 

primeiramente..

 

você quer 3 colunas(div):

 

|--------|--------|--------|

|__1__|__2__|__3__| Certo?

 

 

Coluna 1:

- Vai ter uma imagens de fundo (bg_left.png) [Mude a extensão de *PNG para *JPG ou *GIF];

- Como a altura vai ser em % creio que a imagem vai ser apenas uma tirinha que se repetirá para baixo (repeat-Y) ;

- Caso seja imagem estática é mais interessante estipular um valor para height;

- Ajuste o posicionamento (position:absolute; top: [0];left: [0]).

 

Coluna 2:

- Ajuste o posicionamento (position:absolute; top: [0];left: [valor da prop. width div(coluna1)]).

- height: 100%;

 

Coluna 3:

- Mesma coisa que coluna 1;

- Ajuste o posicionamento (position:absolute; top: [0];left: [valor da prop. width div(coluna1)+valor da prop. width div(coluna2)]).

 

 

Se for isso que entendi basta ajustar agora para seu site.. ahhh e nem critiquei tanto assim =)

 

abraço

[Giovani 104]

Sinceramente continuo na mesma :wacko:

entenderam?