Div fixa e imagem 'flutuando'

[Renan. 0]

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:

 

 

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á?

[allex_carvalho 124]

Você teria que criar uma div (ex.: <div id="topo"><!--aqui vai todo o conteudo do topo--></div>) e dar o position fixed nela.

[Renan. 0]

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?

[allex_carvalho 124]

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.

[Diegus Miestro 21]

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.

[Renan. 0]

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: