Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Willian mendes da maya

Imagem em cima do menu e menu nao fica clicavel

Recommended Posts

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>

 

Sem título.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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!

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×