Ir para conteúdo

POWERED BY:

Arquivado

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

joazweb

[Resolvido] background personalizado + layout no centro

Por , em Desenvolvimento frontend

Recommended Posts

joazweb    0

joazweb
Postado

Ola Pessoal,

 

Eu gostaria de saber qual a melhor maneira de obter o seguinte resultado utilizando CSS.. Imagem Postada

.. eu sei como fazer pra centralizar o layout, mas se eu eu quizer fazer o background dessa meneira?

terei que criar uma div a esquerda e outra a direita da div central? como fazer pra isso funcionar certo nos navegadores?

sei fazer isso com tabelas, mas eu quero aprender usando CSS, peco que por favor me deem uma luz.. :unsure:

Compartilhar este post

Link para o post
Compartilhar em outros sites

MartinsV    0

MartinsV
Postado

e ai joazweb, beleza?

 

você pode fazer assim ó:

 

Crie uma div chamada "background", como a primeira e última div (logo depois da abertura da tag "body" e logo antes do seu fechamento) e coloque o background do jeito q você quiser (pode ser uma imagem, sl)

 

Depois, você cria uma div chamada "tudo" ou "conteudo", ou qualquer nome q queira, e coloca esta div central... Sendo esta "dentro" da div "background"..

 

Acredito q seria assim... eu faria assim, veja se é isso q você quer http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

joazweb    0

joazweb
Postado

e ai joazweb, beleza?

 

você pode fazer assim ó:

 

Crie uma div chamada "background", como a primeira e última div (logo depois da abertura da tag "body" e logo antes do seu fechamento) e coloque o background do jeito q você quiser (pode ser uma imagem, sl)

 

Depois, você cria uma div chamada "tudo" ou "conteudo", ou qualquer nome q queira, e coloca esta div central... Sendo esta "dentro" da div "background"..

 

Acredito q seria assim... eu faria assim, veja se é isso q você quer http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Abraços

Ola MartinsV, primeiramente obrigado pela atencao..

entao eu sei fazer dessa meneira ai.. soh q seria ideal se eu fosse colocar somente uma imagem como background no caso ali eu vou precisar de tres ou duas, por que tem a parte pink que tem a sombra e depois tem a outra parte a esquerda, e tambem eu acho que teria que repartir em duas imagens pois seria legal colocar uma imagem com height de 700.. ou mais pixels para ficar de fundo? ai que nao sei oq eu devo fazer se devo criar outra div, se devo usar um float..

 

Nao eh possivel que alguem ja nao tenha feito algo parecido.. :mellow:

 

continuo aguardando sugestoes

Compartilhar este post

Link para o post
Compartilhar em outros sites

MartinsV    0

MartinsV
Postado

Ah, desculpe, eu falei errado... acredito q o jeito certo seria colocando o background na body, mas do msm jeito eu só estava usando uma imagem...

 

Veja só um exemplo q eu fiz. Tamanho, imagem e cores você deve mudar de acordo com a sua necessidade...

 

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
<style>
body {
		background-image: url("lugar onde está a imagem");
		background-repeat: no-repeat;
}

#conteudo {
		position:absolute;
		top: 130px;
		left: 350px;
		background: gray;
		width: 30%;
}
</style>
</HEAD>

<body>


<div id="conteudo">
<p>Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo 
Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo 
Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo 
Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo 
Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo 
Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo 
Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo Conteúdo </p>
</div>

</BODY>
</HTML>

(eu apenas usei uma imagem... porém você deve ter a imagem q você quer usar para background em algum lugar, certo...)

 

Veja se deu agora, abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Militar    0

Militar
Postado

Se preferir faz assim

 

<style type="text/css">

 

body {

 

backgorund:url sua imagem;

}

 

ela vai aparecer no fundo todo

 

depois disso você faz uma div (tudo) centralizada

 

margin:0px auto;

 

entedeu??

 

espero ter ajudado

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

joazweb    0

joazweb
Postado

Se preferir faz assim

 

<style type="text/css">

 

body {

 

backgorund:url sua imagem;

}

 

ela vai aparecer no fundo todo

 

depois disso você faz uma div (tudo) centralizada

 

margin:0px auto;

 

entedeu??

 

espero ter ajudado

 

abraço

galera valeu pela ajuda.. mas eu me refiro por exemplo e se eu for colocar aquela sombra que esta destacada em pink, como vcs fariam ? criariam outra div com float? no caso seria ideal eu criar uma imagem com 700px ou mais pra usar de BG?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Nenhum nem outro, já tive que montar varios layouts com fundo em degrade que teve sombra da area de conteudo e tal, e de muito tempo pra ca fui mudando minha forma de montar.

 

A última que utilizei foi a mais leve e mais pratica de todas.

 

O FUNDO

Exporte a tira mais fina possivel de fundo para que seja leve para carregar.

 

Largura do fundo

A largura do fundo se não tiver nenhum efeito alem do degrade exporte com 1px, agora se tiver alguma textura junto do degrade como linhas diagonais exporte a largura necessária para que quando ela repita lateralmente o fundo repita perfeitamente

Altura do fundo

A altura você deverá exportar até o momento que o fundo atinge sua cor solida, o seu por exemplo, nesse screenhot que você mandou o último código de cor que eu capturei foi esse #E2E2E2

 

Na certa não é esse, mas supondo que quando acaba todo o efeito ele va para essa cor.

Código

background: #E2E2E2 url(imagens/fundo.jpg) repeat-x;
Acredito que nem preciso comentar sobre o código né, vai jogar a imagem como background, fazer ela repetir horizontalmente e jogar o fundo cinza quando não tiver imagem para cubrir o background

 

A SOMBRA

Para esse passo é bom você ler esse tópico

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

 

 

TEM DUAS FORMAS:

Forma 1: Tabela

 

Exportar o fundo

A sombra você estaria utilizando de uma forma simples.

Exporta uma PNG com 1px de altura e com fundo transparente e SOMENTE A SOMBRA DIREITA, e repita o processo pra esquerda.

No site

Se estiver fazendo em tabela crie 3 colunas

 

Supondo que a sombra que você exportou para a esquerda tenha 15px de largura.

 

As medidas seriam

 

Coluna 1: 15px

Coluna 2: Area do conteudo, vai do tamanho que vocÊ estiver montando 776px, 950px e etc..

Coluna 3: 15px

 

Então a Coluna 1 e 3 você jogaria uma class com a imagem de fundo correspondente a sobra de cada celula (A class você vai saber como jogar depois que ler o tópico.

 

Forma 2: Tableless ou Tabela

Essa funciona tanto com Div's quanto com Tabela.

 

Exportar o fundo

Você exportaria em uma imagem só todo o fundo da area de conteudo junto das sombras com 1px de altura. (da forma anterior: Coluna 1 + Coluna 2 + Coluna 3) mas não esqueça... FUNDO TRANSPARENTE

No site

Crie sua div de conteudo normal, apenas adiciona a PNG como fundo da sua div, de a div a largura total da imagem, e para o conteudo não cair sobre as sombras, só você dar um padding na esquerda e direita.

 

Bom procurei explicar da melhor forma possivel, dessa forma fica muito leve e não é dificil de se fazer.

 

Digo isso por pratica porque ja tive que montar varios sites assim.

 

Se você fizer da segunda forma não deixe de ler isso.

http://forum.imasters.com.br/index.php...mp;#entry879450

 

Esse problema de ficar por tras do fundo é só com link e input, mas só usar esse css do position relative que ja resolve todos os problemas. beleza.

 

Flw velho.. se cuida ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

Anderson Narciso    3

Anderson Narciso
Postado

Nenhum nem outro, já tive que montar varios layouts com fundo em degrade que teve sombra da area de conteudo e tal, e de muito tempo pra ca fui mudando minha forma de montar.

 

A última que utilizei foi a mais leve e mais pratica de todas.

 

O FUNDO

Exporte a tira mais fina possivel de fundo para que seja leve para carregar.

 

Largura do fundo

A largura do fundo se não tiver nenhum efeito alem do degrade exporte com 1px, agora se tiver alguma textura junto do degrade como linhas diagonais exporte a largura necessária para que quando ela repita lateralmente o fundo repita perfeitamente

Altura do fundo

A altura você deverá exportar até o momento que o fundo atinge sua cor solida, o seu por exemplo, nesse screenhot que você mandou o último código de cor que eu capturei foi esse #E2E2E2

 

Na certa não é esse, mas supondo que quando acaba todo o efeito ele va para essa cor.

Código

background: #E2E2E2 url(imagens/fundo.jpg) repeat-x;
Acredito que nem preciso comentar sobre o código né, vai jogar a imagem como background, fazer ela repetir horizontalmente e jogar o fundo cinza quando não tiver imagem para cubrir o background

 

A SOMBRA

Para esse passo é bom você ler esse tópico

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

 

 

TEM DUAS FORMAS:

Forma 1: Tabela

 

Exportar o fundo

A sombra você estaria utilizando de uma forma simples.

Exporta uma PNG com 1px de altura e com fundo transparente e SOMENTE A SOMBRA DIREITA, e repita o processo pra esquerda.

No site

Se estiver fazendo em tabela crie 3 colunas

 

Supondo que a sombra que você exportou para a esquerda tenha 15px de largura.

 

As medidas seriam

 

Coluna 1: 15px

Coluna 2: Area do conteudo, vai do tamanho que vocÊ estiver montando 776px, 950px e etc..

Coluna 3: 15px

 

Então a Coluna 1 e 3 você jogaria uma class com a imagem de fundo correspondente a sobra de cada celula (A class você vai saber como jogar depois que ler o tópico.

 

Forma 2: Tableless ou Tabela

Essa funciona tanto com Div's quanto com Tabela.

 

Exportar o fundo

Você exportaria em uma imagem só todo o fundo da area de conteudo junto das sombras com 1px de altura. (da forma anterior: Coluna 1 + Coluna 2 + Coluna 3) mas não esqueça... FUNDO TRANSPARENTE

No site

Crie sua div de conteudo normal, apenas adiciona a PNG como fundo da sua div, de a div a largura total da imagem, e para o conteudo não cair sobre as sombras, só você dar um padding na esquerda e direita.

 

Bom procurei explicar da melhor forma possivel, dessa forma fica muito leve e não é dificil de se fazer.

 

Digo isso por pratica porque ja tive que montar varios sites assim.

 

Se você fizer da segunda forma não deixe de ler isso.

http://forum.imasters.com.br/index.php...mp;#entry879450

 

Esse problema de ficar por tras do fundo é só com link e input, mas só usar esse css do position relative que ja resolve todos os problemas. beleza.

 

Flw velho.. se cuida ^^

 

Mando benzaço parcero,

repeat-x da fatia dentro da div fica show de bola.

 

To com uma duvida aqui, tipo backgroud do meu cabeçalho é como esses esquema ai mostra, mas no IE não aparece a "tira" só o fundo branco, testei no Opera, firefox, Avant browser, ta tudo perfeito mesnos no IE.

E ta de boa background: #fff url('img/back.gif') repeat-x;

Solução?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

hehhe vlw ^^

 

Quanto a sua dúvida.. posta o código todo ai, ou melhor ainda a pagina no ar pra gente analisar ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

joazweb    0

joazweb
Postado

Puxaa!! Valeu Nick.. era JUSTAMENTE oq eu estava procurando!

 

ainda bem que alguem conseguiu entender oq eu precisava hehee...

 

muito obrigado mesmo!!

 

abraços!! =]

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