Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1273
Sexo: Masculino

Âncora em li

26-01-2017 18:01

Olá! A dúvida pode ser simples, mas a tenho.

Uma imagem, muito pequena, será indicativo para um link, mas não o link (por ser muito pequena); então, quero que a tag que a contém, uma li, seja o link.

Estou fazendo assim: <a href=""><li>IMAGEM</li></a>. Ao menos no Firefox, está funcionando.

Isso está correto? Ou o correto é fazer o link com onclick href dentro da li?

Preciso que o espaço que contém a imagem seja o link por conta do layout responsivo. A imagem é reduzida de tamanho, e, em celulares, ficará muito pequena para ser o link.

Grato.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17666
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Âncora em li

26-01-2017 20:11

O correto é colocar o link dentro da li. Ai você aplica uma classe ao link dentro da li. Segue um exemplo de como fazer.

<style> ul { padding: 0; list-style: none; } .li{ list-style: none; } .link a { display:block; float: left; text-align: center; color: #fff; font-weight: bold; background-color: mediumaquamarine; border:1px solid white; padding: 0; height:100px; line-height:100px; width:100px; } </style> <ul> <li class="link"><a href="#1">link</a></li> <li class="link"><a href="#2">link</a></li> </ul>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1273
Sexo: Masculino

Re: Âncora em li

27-01-2017 16:46

Obrigado. Você adivinhou e postou trecho do código que tem o xadrez. Mas tentei adaptar, nele, o exemplo que você postou, mas o xadrez é perdido, e o link continua no que está dentro da âncora, e não em todo o espaço da li.

Veja:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> * { font-family: sans-serif; box-sizing: border-box; list-style: none; } ul { padding: 0; list-style: none; } .li { list-style: none; } .li a { display:block; float: left; text-align: center; color: #fff; font-weight: bold; background-color: mediumaquamarine; border:1px solid white; padding: 0; width: 25%; height:100px; line-height:100px; } /* blocos verdes */ li:nth-child(8n+1), li:nth-child(8n+3), li:nth-child(8n+6), li:nth-child(8n+8) { width: 25%; -webkit-box-shadow:inset 0px 0px 0px 1px #000; -moz-box-shadow:inset 0px 0px 0px 1px #000; -o-box-shadow:inset 0px 0px 0px 1px #000; -ms-box-shadow:inset 0px 0px 0px 1px #000; box-shadow:inset 0px 0px 0px 1px #000; } /* blocos verdes hover */ li:nth-child(8n+1):hover, li:nth-child(8n+3):hover, li:nth-child(8n+6):hover, li:nth-child(8n+8):hover { width: 25%; background-color:yellow; -webkit-box-shadow:inset 0px 0px 0px 1px gray; -moz-box-shadow:inset 0px 0px 0px 1px gray; -o-box-shadow:inset 0px 0px 0px 1px gray; -ms-box-shadow:inset 0px 0px 0px 1px gray; box-shadow:inset 0px 0px 0px 1px gray; } /* blocos cinzas */ li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) { background-color:#ccc; width: 25%; -webkit-box-shadow:inset 0px 0px 0px 1px #000; -moz-box-shadow:inset 0px 0px 0px 1px #000; -o-box-shadow:inset 0px 0px 0px 1px #000; -ms-box-shadow:inset 0px 0px 0px 1px #000; box-shadow:inset 0px 0px 0px 1px #000; } /* blocos cinzas hover */ li:nth-child(8n+2):hover, li:nth-child(8n+4):hover, li:nth-child(8n+5):hover, li:nth-child(8n+7):hover { background-color:red; width: 25%; -webkit-box-shadow:inset 0px 0px 0px 1px green; -moz-box-shadow:inset 0px 0px 0px 1px green; -o-box-shadow:inset 0px 0px 0px 1px green; -ms-box-shadow:inset 0px 0px 0px 1px green; box-shadow:inset 0px 0px 0px 1px green; } </style> </head> <body> <ul> <li class="link"><a href="#1">A</a></li> <li class="link"><a href="#2">B</a></li> <li class="link"><a href="#3">C</a></li> <li class="link"><a href="#4">D</a></li> <li class="link"><a href="#5">E</a></li> <li class="link"><a href="#6">F</a></li> <li class="link"><a href="#7">G</a></li> <li class="link"><a href="#8">H</a></li> <li class="link"><a href="#9">I</a></li> <li class="link"><a href="#10">J</a></li> <li class="link"><a href="#11">K</a></li> <li class="link"><a href="#12">L</a></li> <li class="link"><a href="#13">M</a></li> <li class="link"><a href="#14">N</a></li> <li class="link"><a href="#15">O</a></li> <li class="link"><a href="#16">P</a></li> </ul> </body> </html>

No código sem a adaptação acima, eu coloquei onclick="location.href='arquivo.php';" dentro da li, o xadrez não se perdeu e o link funciona.

Mas, ao se tentar voltar a página com <a href="javascript:window.history.go(-1)"> acusa documento fora de validade, dizendo que ele não mais está disponível.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17666
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Âncora em li

27-01-2017 17:23

Para aplicar o efeito de link em toda li no script de xadrez usa essa classe.

.link a { display:block; padding: 0; height:100%; width:100%; color:white; text-decoration:none; }

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado