Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Dúvida sobre a técnica Image Replacement (imagem e os links)

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web

por Tiago Medeiros
| 100.3k xp | 92 posts

Boa Tarde Pessoal! Por favor, alguém me ajuda, estou com uma dúvida sobre o assunto.

Minha Dúvida é sobre o Image Replacement: Se eu, propositalmente, tiro a classe da tag referenciado a imagem no CSS:

<li><a href="http://github.com">Github</a></li>

E no meu CSS, defino text-ident: -800px; (independente, apenas uma propriedade que faça os links aparecerem na tela) eu tenho links duplicados, eu tenho os links dos textos e um link "invisível" onde estava posicionada a imagem, a minha dúvida é: Como que o link permanece na posição inicial, mesmo depois de "tirarmos" o texto do local adicionando um valor negativo (no caso, muito alto) à propriedade text-ident. E mesmo se tirarmos a imagem, o link permanece e "invisível", sei que as modificações que fiz não fazem sentido, mas a minha dúvida é essa. Os links não deveriam "acompanhar", ou seja, seguir os textos? Pq eles permanecem no local inicial como se o texto não tivesse identação à esquerda? Grato desde já!

3 respostas
por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

Oi Tiago, nao sei se acompanhei direito o que vc fez. Mas me parece que tirou a classe no HTML entao o CSS para de aplicar por isso o text-indent nao vai ser aplicado.

Faz sentido?

Se nao for isso, tenta subir uma versao do seu codigo no codepen.io pra gente poder enxergar exatamente o que vc quer dizer.

Abraço

solução!
por Estudante
| 719.4k xp | 745 posts

E aí, Tiago! Tudo certo, cara? =)

Quando você coloca um link na página, usando o elemento <a>, tudo o que estiver dentro dessa tag será passível de clique e navegação... Mas até aí, nada de novo, certo? =)

Ao definir as dimensões do elemento, você está definindo qual é a área clicável para realizar a navegação. Se você utilizar o text-indent, você estará deslocando o texto e, consequentemente, aumentando essa área, pois o link irá "acompanhar" o texto, como você mesmo disse... A grande diferença está no overflow: hidden... Ao utilizá-lo, ele irá esconder todo o conteúdo que estiver para fora da largura definida, fazendo com que o link fique limitado às dimensões - height e width -, sacou? =)

Espero ter ajudado, mas qualquer dúvida não deixe de postar por aqui para que possamos ajudá-lo! =)

Abraço e bons estudos,

Fábio

por Tiago Medeiros
| 100.3k xp | 92 posts

Primeiramente obrigado pela atenção de todos (Fábio e Sérgio), e foi muuuito confuso a minha tentativa de explicação mesmo kkk. Mas deixa só eu confirmar Fábio, a sacada, esta em definir dimensões para o elemento <a> no css né? Pois ao fazer isso, ele "cria uma área clicável", aí mesmo fazendo o texto com os links "sumirem" com o ident: -9999px, os links irão permanecer na imagem pelas dimensões definidas né??

OBS: Não estava usando a propriedade overflow: hidden, e ao utilizar percebi que mesmo se eu quisesse ou por acidente deixasse os links com o texto visíveis (por algum motivo qualquer, seja um valor errado passado como parâmetro no text-ident, como -300px ou algum outro valor que fizesse com que o texto contendo os links ainda aparecessem no navegador e fora da área das imagens (eu sei que seguindo a aula o correto seria -9999px), o overflow: hidden iria esconder, muuuito obrigado mesmo pela atenção, pois você sanou minha dúvida e ainda achou uma solução para o exemplo que eu dei, mesmo que eu nem imaginava que dava para solucionar o exemplo que citei!

Abraços!