Ir para conteúdo

POWERED BY:

Arquivado

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

Renan.

Div fixa e imagem 'flutuando'

Recommended Posts

Bom dia, estou desenvolvendo um projeto, um tanto quanto ambicioso, de criar um site no estilo "rede social". O meu problema é que tenho conhecimentos avançados de PHP e HTML, mas de CSS ainda sou novato. Desejo fazer o seguinte:

 

prj.png

 

Quero que o menu do topo, que é mais escuro fique fixo, até ai tudo bem pois eu usaria o position:fixed;

 

Mas o problema é essa imagem, como eu faria para ela ficar fixa naquele ponto? exatamente como está?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Allex, foi o que eu disse no post que para deixar a div fixa eu vou fazer isso mesmo, o meu problema é com aquela imagem entende? gostaria de saber como faço pra deixar aquela imagem daquele jeito, meio que sobreposta! Alguém sabe?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acho que agora entendi, vejamos:

 

z-index:10; (quanto maior mais por cima a camada ficará)

 

Então seria algo tipo:

 

#topo img { position:relative; z-index:10; top:10px; left:30px; }

 

Algo mais ou menos assim.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, uma forma seria:

 

Cria uma div que seria o cabeçalho, digamos que 256px de altura e 100% de largura. Ela teria uma imagem como background de cor preta de 256px de altura e pode ser 1px de largura mesmo que fica repetindo horizontalmente, mas o background não preencheria todo o fundo e sim apenas 200px, ai dentro dessa div teriamos outra div com um limite de largura, geralmente 960px, com margin lateral automática assim ficaria centralizado, dentro dessa DIV de 960px de largura teria uma div ou img com a imagem dentro tendo uma margem de 24px da esquerda e borda preta como o background da primeira DIV.

 

Cara, você deve usar DIV's e pensar que estas DIV's são meras demarcações, a primeiro marcou toda a largura, independente da resolução do usurário, e uma altura X e a segunda DIV tem uma largura padrão para todas as resoluções.

 

PS: Não dar uma largura para a DIV que terá o conteúdo fica feio pois em resoluções altas ficará muito largo e o texto se perderá. A maioria do pessoal dá uma largura em torno de 960px e margem lateral automática.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado allex e Diegus, seguindo suas dicas eu consegui! Muito obrigado mesmo, o único problema que apareceu foi que quando a div se sobrepôs tive que criar um espaço de height pra não sumir conteúdo nenhum.

 

Caso estejam interessados no projeto estou realizando testes nesse servidor: http://mysmile.host.org

 

O projeto está em fase inicial ainda, mas qualquer coisa é só entrar em contato, obrigado novamente!

 

A imagem postada ali em cima era uma projeção feita no Photoshop, caso seja do interesse de alguém ai está como ficou a página original:

 

imgyqh.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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