Простая проблема HTML с href

Question

Я пытаюсь создать изображения с гиперссылками на некоторые URL и гиперссылки, похоже, не работают.

Я использую код, указанный ниже на http://windchimes.co.in/index_w%20-%20Copy.html

Подскажите, почему не работают гиперссылки на иконки?

<td width="29" style="padding-bottom: 42px;><a href="http://windchimes.co.in/blog" target="_blank"><img align="middle" title="blog" alt="blog" src="http://dl.dropbox.com/u/529534/windchimes/icon-blog.gif"></a></td><td width="29" style="padding-bottom: 42px;> <a href="http://www.linkedin.com/groups?gid=120310" target="_blank"><img align="middle" title="linkedin" alt="linkedin" src="http://dl.dropbox.com/u/529534/windchimes/icon-linkedin.gif"></a></td><td width="29" style="padding-bottom: 42px;> <a href="http://www.facebook.com/group.php?gid=72425590275" target="_blank"><img align="middle" title="facebook" alt="facebook" src="http://dl.dropbox.com/u/529534/windchimes/icon-facebook.gif"></a></td><td width="29" style="padding-bottom: 42px;> <a href="http://twitter.com/windchimesindia" target="_blank"><img align="middle" title="twitter" alt="twitter" src="http://dl.dropbox.com/u/529534/windchimes/icon-twitter.gif"></a></td><td width="29" style="padding-bottom: 42px;> <a href="http://www.youtube.com/user/Windchimesindia" target="_blank"><img align="middle" title="Youtube" alt="Youtube" src="http://dl.dropbox.com/u/529534/windchimes/icon-youtube.gif"></a><td>

Answer 1

Гораздо проще диагностировать, поддерживать и настраивать ваши веб-страницы, если вы выполните следующие действия.

1. Держите свои проблемы отдельно - ваш HTML должен описывать документ, а не его стиль. Поместите ваши правила стиля в каскадную таблицу стилей (CSS), что также будет означать, что вы будете удовлетворять следующему правилу
2. Не повторяйся. У вас было правило ширины и стиля для всех этих элементов, которое было одинаковым. Это означает, что если вы хотите изменить ширину на 30 пикселей, вам нужно будет найти / заменить каждый из этих элементов (а если вы автоматизируете поиск и замену, вы должны надеяться, что случайно не замените то, что не имели в виду). к.
3. Компоновка вашего кода - при правильном добавлении HTML-кода вы обнаружите ошибки, такие как отсутствующие закрывающие теги, так как они сразу будут казаться неправильными.
4. Используйте validator.w3.org, чтобы удостовериться в правильности кода - это поможет вам обнаружить ошибки и избежать двух проблем в вашем коде - отсутствующей кавычки и отсутствующего закрывающего тега.

Вот чистая версия вашего кода ...

CSS:

td.myClass {
    width: 29px;
    padding-bottom: 42px;
    text-align: center;
}

И HTML:

<td style="myClass">
    <a href="http://windchimes.co.in/blog" target="_blank">
        <img title="blog" alt="blog" src="http://dl.dropbox.com/u/529534/windchimes/icon-blog.gif">
    </a>
</td>
<td style="myClass">
    <a href="http://www.linkedin.com/groups?gid=120310" target="_blank">
        <img title="linkedin" alt="linkedin" src="http://dl.dropbox.com/u/529534/windchimes/icon-linkedin.gif">
    </a>
</td>
<td style="myClass">
    <a href="http://www.facebook.com/group.php?gid=72425590275" target="_blank">
        <img title="facebook" alt="facebook" src="http://dl.dropbox.com/u/529534/windchimes/icon-facebook.gif">
    </a>
</td>
<td style="myClass">
    <a href="http://twitter.com/windchimesindia" target="_blank">
        <img title="twitter" alt="twitter" src="http://dl.dropbox.com/u/529534/windchimes/icon-twitter.gif">
    </a>
</td>
<td style="myClass">
    <a href="http://www.youtube.com/user/Windchimesindia" target="_blank">
        <img title="Youtube" alt="Youtube" src="http://dl.dropbox.com/u/529534/windchimes/icon-youtube.gif">
    </a>
</td>

Answer 2

Не знаю, есть ли еще, но вы пропустили закрывающие кавычки по адресу:

 <td width="29" style="padding-bottom: 42px;>
                                          ^^^

Answer 3

Хорошая идея - запустить ваш код через W3 Validator :

http://validator.w3.org/check?uri=http://windchimes.co.in/index_w%2520-%2520Copy.html

Он скажет вам, каким образом ваш HTML искажен.

Answer 4

Ваш последний тег <td> также не закрыт должным образом.

<td width="29" style="padding-bottom: 42px;>
...
<td>

должно быть </td> вместо <td> в конце.