Как переписать этот HTML-код для проверки в XHTML 1.0 Strict? - PullRequest
Новая
       13

Как переписать этот HTML-код для проверки в XHTML 1.0 Strict?

4 голосов
/ 10 сентября 2010

Как мне переписать этот HTML для проверки в XHTML 1.0 Strict? 

<div>
    <a href="link.html">
        <p>Some text</p>
        <ul>
            <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        </ul>
    </a>
</div>

Мое намерение состоит в том, чтобы весь div служил кликабельной ссылкой. Содержимое внутри просто описывает содержимое страницы назначения. W3 Validator говорит, что я не могу иметь блочный элемент (<p>) внутри тега span (<a>).

Как мне переставить это так, чтобы мои DIVs оставались блочными ссылками?

Ответы [ 4 ]

3 голосов
/ 10 сентября 2010

Вы не можете обернуть элемент уровня блока во встроенный элемент уровня, поэтому у вас есть несколько альтернатив.

  • Вы можете обернуть каждую строку, которую хотите связать в <a href="link.html">...</a> 

    <div>
    <p><a href="link.html">Some text</a></p>
    <ul>
        <li><a href="link.html">Item 1</a></li>
        <li><a href="link.html">Item 2</a></li>
        <li><a href="link.html">Item 3</a></li>
    </ul>
</div>​

  • Вы можете добавить функцию javascript onclick для воспроизведения тех же результатов. 

     //jQuery
 ​$('div').click(function() {
     window.location = 'link.html';
 });​​​​​​

 //Non jQuery
 document.getElementById('yourDiv').onclick = function() {
     window.location = 'link.html';
 }

    • Если вы используете Javascript, убедитесь, что вы используете CSS, чтобы было очевидно, что содержимое является ссылками. Я бы порекомендовал псевдо-классы 

      div {
    text-decoration: underline;
    color: #0000FF;//or whatever your link color is
}
div li:hover, p:hover {
    color: #CC00FF;
    cursor: pointer;
}

      1020 *

1 голос
/ 10 сентября 2010

Как есть, ваш фрагмент действителен в формате HTML5.Используйте это вместо этого, и ваша проблема исчезнет.Все, что вам нужно сделать, это изменить тип документа на <!doctype html>.

1 голос
/ 10 сентября 2010

Вы не можете изменить его, чтобы сделать блок ссылкой. Что вы можете сделать, это сделать каждый элемент в блоке ссылкой, или вы можете использовать javascript. 

<div style="cursor:pointer" onclick="location.href='link.html'">
  <!-- ... -->
</div>
0 голосов
/ 10 сентября 2010

Ваш

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...