Ir ao conteúdo
  • Cadastre-se
TheDomo

Código html, por link na imagem do header pelo code

Recommended Posts

Ola estou com uma duvida em um código, e simples queria por uma imagem que fica no header(ela ja está tenho o código) porém queria que ela possui link (Ao clicar nela ser redirecionado para outra pagina)

header{
position: relative;
overflow:hidden;
margin: auto;
background:url((https://1.bp.blogspot.com/-_xP01C9Dc0c/V3aTOjhARuI/AAAAAAAAAFc/H2XLn8dUIdw8Wgw6bewY_6GZFZMACaRPgCLcB/s1600/Sem%2BT%25C3%25ADtulo-4.png) no-repeat center bottom;
height: 270px;
margin-top:0px;
width: 100%;}
.gambar-neptune{
position: absolute;
top:0px;
right: 0px;
background:url(https://4.bp.blogspot.com/-56VNHLVfvdA/V3ac9VZWP7I/AAAAAAAAAGM/aDl9bHGDR8UKnACm3iyRTyIYRe6IAMRIwCLcB/s1600/header.png) no-repeat center center;
width: 561px;
height:752px;
z-index: 1;}

 

a parte que queria( a imagem ) e esse código

background:url(https://4.bp.blogspot.com/-56VNHLVfvdA/V3ac9VZWP7I/AAAAAAAAAGM/aDl9bHGDR8UKnACm3iyRTyIYRe6IAMRIwCLcB/s1600/header.png) no-repeat center center;
width: 561px;
height:752px;
z-index: 1;}

Alguém saberia qual seria o code para colocar ai?

procurei em diversos sites e fórum mas nenhum foi útil e resolveu o meu problema  

Compartilhar este post


Link para o post
Compartilhar em outros sites

@TheDomo Olá,  primeiramente seja bem vindo em nosso Fórum do Clube do Hardware.

 

O que você postou aí é somente o CSS.

 

Para acrescentar um link no seu header com imagem em background, você precisa colocar a marcação de hipertexto dentro do elemento header cujo a classe é .gambar-neptune  e então definir no CSS com display block e com as mesmas dimensões do header(width e height)

Isso fará com que o elemento <a> pegue nível de bloco preenchendo todo o elemento pai

 

Veja o exemplo prático aqui: https://jsfiddle.net/hn8e4r1v/

 

Contudo podes fazer apenas colocando o elemento <a> e o elemento  de header dentro dele: https://jsfiddle.net/hn8e4r1v/1/

 

 

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Poderia me dar uma explicação melhor, kkk  não entendi queria saber onde colocar e como colocar os code, sou muito iniciante em programação

 

Ah e Obrigado pelas boas vindas ^-^

Compartilhar este post


Link para o post
Compartilhar em outros sites

@TheDomo Basicamente não tenho muito o que explicar.

Pois isso é uma questão mais básica das básicas do html.

 

Um link (marcação de hipertexto )nada mais é do que o uso da tag <a>  em conjunto com o atributo  "href"

Ou seja,

<a href="http://www.google.com">Google </a>

Este é um link.

Uma uma imagem linkada seria:

<a href="http://www.google.com/">
   <img src="http://www.seusite.com.br/imagem.jpg" />
</a>  

Agora no seu caso, você não tem uma imagem inserida no html, mas sim uma imagem inserida como background de um elemento DIV.

Então para isso você precisa definir para o elemento em si que ele fique a nível de bloco. ou seja, ocupam toda largura disponível no elemento e criam uma linha invisível antes e depois de si próprio.

 

Para isso você deixa  setado no CSS que o elemento <a> responsável pelo link deve ter o mesmo width e height do elemento DIV e informar que o atributo "display" tenha o valor "block".  Este é o jeito convencional.

 

<div class="link">
  <a href="#"></a>
</div>

No exemplo acima, por CSS você define que o <a> vai ter a mesma altura e largura do elemento DIV e que ele seja nível de bloco

 

 

No HTML 5, já permite que não precise definir o elemento <a> como nível de bloco.. apenas colocando elemento DIV dentro do elemento <a>

 

Como neste exemplo:

<a href="http://www.google.com.br">
  <div class="header"></div>
</a>  

é por aí. ficou mais claro?

 

Deixo aqui alguns links de referência para você estudar:

http://www.kadunew.com/blog/css/elemento-inline-e-nivel-de-bloco

http://www.w3schools.com/html/html_links.asp

  • Curtir 1

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

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





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

×