Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia galera!
Sempre tenho essa dúvida, olhem só:
Tenho um menu, com ul e li:
<ul>
<li><a href="/inicio">Inicio</a></li>
<li><a href="/sobre">Sobre</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
Como faço, pra que, quando eu posicionar ou clicar na ***li*** o link do ***a ***funcionar? Porque, por exemplo, só funciona se eu clicar no ***a***, mas, se eu clicar fora, no caso, na ***li***, não funciona, o ***a*** não ativa@Renan Cardoso isso deixará o HTML inválido.
Mude o CSS do link (tag <a>) para que ele utilize todo o espaço do <li>. Somente é importante mudar o display da tag <a> para block. Assim seria o básico:
a {
display: block;
height: 100%;
width: 100%;
}Como assim inválido, Gabriel? Pode explicar?
Todo elementos HTML do tipo node (do tipo nó, que podem possuir outros elementos internos) possuem uma lista de elementos que são permitidos diretamente dentro deles.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
**Permitted content** - zero or more <li> elements, which in turn often contain nested <ol> or <ul> elements.
Ou seja, somente pode ser permitido elementos do tipo <li> e, por sua vez, elementos <li> só podem estar dentro de elementos <ol> ou <ul>.
O <li>, por sua vez, possui uma lista mais abrangente de elementos permitidos, por isso não há problema nenhum em colocar a tag <a> diretamente dentro dele:
**Permitted content **- Flow content.
Flow content:>
Citar
Elements belonging to the flow content category typically contain text or embedded content. They are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and Text.
Tudo que for diferente das regras, deixa o HTML inválido. O HTML não estando válido, seu site terá problemas de renderização em diversos navegadores.
Alguns navegadores tendem a corrigir automaticamente esses erros, mas outros não. Essa é uma questão história por falta de padronização que ocorreu principalmente com o HTML 3 (onde a "zueira não tinha limites"). Com o HTML 4 surgiu o xHTML, que era uma forma mais rígida de construir o HTML. O HTML 5 abrangeu mais essa questão.
Os navegadores ainda corrigem certas situações por causa da retrocompatibilidade. Por outro lado, search engines tendem a ignorar sites inválidos.Muito obrigado, Gabriel! Ótimo dia pra você!
<