Imagem em cima do menu e menu nao fica clicavel

Willian mendes da maya · 26 de setembro de 2016

Preciso que a imagem de logo fique em cima do menu mas dessa forma a propriedade onMouseOver e o elemento <a> nao fica clicavel. Propriedade onMouseOver também esta ficando estranho, pois diminue o tamanho do botao. Sei que deve ser algo simples de resovler mas sou estudante e estou desenvolvendo o primeiro site, ficaria grato pela ajuda.

@charset "utf-8";
/* CSS Document */

	body {
		border: 0px;
	}

	div#header {
		background-image:url(../../../Documents/Sites/SiteFarraCerta/images/backgroundheader.jpg);
		background-repeat:repeat-x;
		height: 1500px;
		width: 1280px;
		position:absolute;
		top: 0px;
		left: 50%;
		margin-left: -640px;
	}
	
	img#logo {
	height: 254px;
	width: 373px;
	position: absolute;
	left: 50%;
	margin-left: -186px;
	z-index: 3;
	}
	
	img#box {
		height: 43px;
		width: 129px;
		position:absolute;
		top: 140px;	
		left: 50%;
		margin-left: -87px;
		display:block;
		z-index: 1;
	}
	
	img#servicosbox {
		height: 43px;
		width: 129px;
		position: absolute;
		top: 140px;
		left: 682px;
		display:block;
		z-index: 1;
		}
		
	img#agendabox {
	height: 43px;
	width: 129px;
	position: absolute;
	top: 140px;
	left: 424px;
	display: block;
	z-index: 1;
		}
		
	img#contatobox {
		height: 43px;
		width: 129px;
		position: absolute;
		top: 140px;
		left: 811px;
		display:block;
		z-index: 1;
		}
		
	img#homebox {
		height: 43px;
		width: 129px;
		position: absolute;
		top: 140px;
		left: 295px;
		display:block;
		z-index: 1;
		}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Farra Certa</title>

<link rel="stylesheet" type="text/css" href="estilos.css">

</head>

<body>

<div id="header"> 
	<img src="../../../Documents/Sites/SiteFarraCerta/images/logo.png" usemap="#agenda" id="logo">
    
		<a href="#"><img id="box" src="../../../Documents/Sites/SiteFarraCerta/images/menu/box.png" onMouseOver="this.src='../../../Documents/Sites/SiteFarraCerta/images/menuhover/boxhover.png'" onMouseOut="this.src='../../../Documents/Sites/SiteFarraCerta/images/menu/box.png'"></a>
		<a href="#"><img id="homebox" src="../../../Documents/Sites/SiteFarraCerta/images/menu/home.png" onMouseOver="this.src='../../../Documents/Sites/SiteFarraCerta/images/menuhover/homehover.png'" onMouseOut="this.src='../../../Documents/Sites/SiteFarraCerta/images/menu/home.png'"></a>
        <a href="#"><img id="servicosbox" src="../../../Documents/Sites/SiteFarraCerta/images/menu/servicos.png" onMouseOver="this.src='../../../Documents/Sites/SiteFarraCerta/images/menuhover/servicoshover.png'" onMouseOut="this.src='../../../Documents/Sites/SiteFarraCerta/images/menu/servicos.png'"></a>
        <a href="#"><img src="../../../Documents/Sites/SiteFarraCerta/images/menu/agenda.png" name="agendabox" id="agendabox" onMouseOver="this.src='../../../Documents/Sites/SiteFarraCerta/images/menuhover/agendahover.png'" onMouseOut="this.src='../../../Documents/Sites/SiteFarraCerta/images/menu/agenda.png'"></a>
        <a href="#"><img id="contatobox" src="../../../Documents/Sites/SiteFarraCerta/images/menu/contato.png" onMouseOver="this.src='../../../Documents/Sites/SiteFarraCerta/images/menuhover/contatohover.png'" onMouseOut="this.src='../../../Documents/Sites/SiteFarraCerta/images/menu/contato.png'"></a>
</div>

</body>
</html>

DiF · 27 de setembro de 2016

@Willian mendes da maya Basicamente é um problema de estrutura.

Dentro do div id=header você separa o menu do elemento onde terá o logo.

então sugiro fazer desta forma:

<div id="header">
  <div id="logo">
     <img src="" alt="" > 
  </div>
  
  
  <div id="menu"></div>
</div>

Vendo seu código, falta elementos.

Se não vai usar listas não ordenadas, use o elemento <nav> para menus.

No css. sempre defina para nível de bloco com display: block para que cada elemento parente fique um a cima do outro.. e não um em cima do outro.

Também vi que você faz um uso excessivo de position absolute.

Vou dar uma dica.

No elemento pai, você define como absoluto, mas seus filhos como relativo!

Willian mendes da maya · 7 de outubro de 2016

muito obrigado , me ajudou muito.

Entrar

Imagem em cima do menu e menu nao fica clicavel

Posts recomendados

Willian mendes da maya

Link para o comentário

Compartilhar em outros sites

DiF

Link para o comentário

Compartilhar em outros sites

Willian mendes da maya

Link para o comentário

Compartilhar em outros sites

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos