Menu com imagem por cima do conteúdo

[ilustrando 0]

Meus caros amigos, recorro aos mestres para tentar tirar uma dorzinha de cabeça que estou tendo aqui (acredite, remédio não adianta em nada...rsrsrs).

 

Seguinte, se alguém puder me ajudar ou saber qual o caminho seguir para que eu consiga fazer o que tenho em mente, ficaria muito agradecido.

 

O que estou tentando fazer é ter um menu no topo de um site, mas este menu possui uma imagem (png) no centro com fundo transparente. O problema é que esta imagem, ou o menu, tem que ficar em cima do resto do conteúdo, isso eu consegui fazer mas os outros itens do menu ficam por trás da imagem.

 

Bom, melhor que falar é mostrar o que esta acontecendo, então aqui esta o dito cujo:

 

http://www.ilustrandodesign.com.br/testes/teste_cabecalho/

 

A forma que ele tem que ficar é assim:

 

 

Se alguém souber o caminho para que isso se resolva (isso se for possível, é claro), desde já gradeço.

 

:)

[Marcos Xavier 189]

Testei no firefox

 

Altere

 

   <a href="#" ><li>
            <img src="logo_metal.png"style="width:270px; " />
            </li></a>

Procura setar os estilos sempre no arquivo .css.

 

Para deixar a imagem sem borda, sem precisar duplicar código, no css reset acresecente

 

border:none;

[ilustrando 0]

Olá Marcos Xavier, muito obrigado pela sua atenção.

 

Mas o que ocorreu é que ao alterar desta forma, fica certinho mesmo o menu, com três links em cada lado, o problema é que o que estou tentando fazer é deixar a parte da ponta por cima do conteúdo, da mesma forma como esta na imagem, a única solução que Eu encontrei foi deixando um style na imagem do logo:

 

<img src="logo_metal.png" width="250" height="148" border="0" style="width:270px; z-index:999; position:absolute; float:left; display:block;" />

 

 

Desta forma, o conteúdo (no caso a imagem que se refere a um banner) fica por baixo da ponta do logo, mas os links Galeria, Aulas e Contato ficam em baixo ou atrás da imagem.

 

Eu testei aqui a forma que me passou e o único problema é que não fica da forma que tem que ficar na imagem, com o conteú do site por baixo da ponta da imagem.

[angelorubin 142]

Boa tarde,

 

Uma margin negativa ali não resolve?

 

.banner{ width:900px; height:auto; min-height:436px; margin:-60px auto; overflow:hidden; padding:2px; }

 

Aqui resolveu, veja - http://jsfiddle.net/angelorubin/gpWzz/3/embedded/result/

[Marcelo Garbin 30]

Opaa,

E se você fazer 3 div's?? menu esquerda, logo, menu direita ?? valeuu..

[ilustrando 0]

Meus caros amigos, fiz aqui o que vocês me passaram e de acordo com as informações de vocês fazendo pequenos ajustes pois agora estou jogando direto no site, consegui resolver este problema.

 

Muito obrigado por tomarem seu tempo para me ajudarem.

 

Forte abraço!