Jump to content
  • 0

Правильно ли использовать <a><img><div></div</a>?

borus

Asked by borus,

 Share

Question

21 answers to this question

Recommended Posts

  • 0
borus Explorer

borus

Posted
  • Author
Posted (edited)

Нет.

как же тогда в ссылку запихнуть и изображение, и текст? Через фон? чтобы сделать изображение фоновым потребуется в коде php применять стили элемента через атрибут styles тега <a> Это будет правильно? Или есть более правильный метод?

Опишу ситуацию: выводятся картинки товаров, поэтому забить жестко в css не могу. Или есть динамическое изменение файлов .css?

Edited by borus
Link to comment
Share on other sites
  • 0
borus Explorer

borus

Posted
  • Author
Posted (edited)

получается подойдут конструкции

1. <a style="background:url(...)...; display:block;">текст</a>

2. <a ><img>текст</a>

3. <a ><img><span>текст</span></a>

Интересует вторая конструкция, правильная ли она?

Edited by borus
Link to comment
Share on other sites
  • 0
npofopr Trainee

npofopr

Posted
Posted
<a><img><div>...</div></a>

Правильно, если ссылку вы сделаете блочным элементом. И если у вас доктайп <!doctype html>

Про доктайп могу ошибаться, но все равно правильнее его использовать будет.

+ можно воспользоваться такой конструкцией: 


<div>
   <a href="#1"><img src="" alt=""></a>
   <a href="#1">Название товара</a>
</div>

  • Like 1
Link to comment
Share on other sites
  • 0
borus Explorer

borus

Posted
  • Author
Posted (edited)

+ можно воспользоваться такой конструкцией:


<div>
<a href="#1"><img src="" alt=""></a>
<a href="#1">Название товара</a>
</div>

благодарю. от этой конструкции не будет изменения цвета текста при наведении на фото. для этого затеял поиски подходящей конструкции

Edited by borus
Link to comment
Share on other sites
  • 0
npofopr Trainee

npofopr

Posted
Posted

+ можно воспользоваться такой конструкцией:


<div>
<a href="#1"><img src="" alt=""></a>
<a href="#1">Название товара</a>
</div>

благодарю. от этой конструкции не будет изменения цвета текста при наведении на фото. поэтому началась вся эта петрушка

Ну да, частая проблема.

Можно решить или скриптом или 

a:hover + a {color:#F00}

если не ошибаюсь.

  • Like 1
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
пункты "строчные" и "строчно-блочные" элементы.

Устарело года на 3. Не слушайте ретроградов, читайте, как оно в действительности :)

Правильно, если ссылку вы сделаете блочным элементом. И если у вас доктайп <!doctype html>

Картинку в таком случае тоже желательно сделать display:block. Чтобы блочные «кирпичики» соседствовали только с блочными, и браузеру не приходилось изобретать анонимные обертки. Но вообще — да, так делать можно. Уже года 4 как минимум (а на практике и того больше).

XHTML 1.0 transitional

Устарело лет на 8. «Переходность» доктайпа означает терпимость валидатора к пережиткам HTML 3.2. Оно нам надо сегодня, когда есть годный доктайп для любых практических целей? К тому же с переходным доктайпом браузеры переходят не в стандартный режим, а в какое-то ни рыба ни мясо. А в чем профит-то?

Link to comment
Share on other sites
  • 0
borus Explorer

borus

Posted
  • Author
Posted (edited)

учиться и учиться у вас, Селеныч.

Оно нам надо сегодня, когда есть годный доктайп для любых практических целей?

Вы про то, что надо использовать HTML5? Это что-то даст, если не использовать его новые возможности или это невозможно используя его? :)

Edited by borus
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Я про то, что нет разумных оснований не использовать короткий доктайп. Ну и его мелкие «полезняшки» типа тех же блочных ссылок. Тем более, что для новых браузеров не видно разницы:)

Link to comment
Share on other sites
  • 0
borus Explorer

borus

Posted
  • Author
Posted (edited)

в общем буду пытаться переделать на правильные рельсы.

Я про то, что нет разумных оснований не использовать короткий доктайп. Ну и его мелкие «полезняшки» типа тех же блочных ссылок. Тем более, что для новых браузеров не видно разницы :)

не могу понять, что делать с вашей первой ссылкой, странный какой-то сайт :)

Edited by borus
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
разве в хтмл5 не позволяется засунуть в ссылку что угодно?

Не совсем всё. Другую ссылку, элемент формы или еще что-то интерактивное всё-таки нельзя. Но «строчностью-блочностью» теперь точно можно не заморачиваться :)

где можно саму презентацию увидеть, есть запись?

Link to comment
Share on other sites
  • 0
Zverushka Explorer

Zverushka

Posted
Posted

ХТМЛ5 позволяет совершать много ошибок и неточностей и отображает страницу корректно, можно не указазывать тип скипта (джава скрипт), не ставить кавычки итд, но поймут ли старые бразуеры это, которые не знают еще стандартов хтмл5? Стоит ли для них ставить четко кавычки, указывать что - джава скрипт, указывать дополнительные параметры в кодировке итп?

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
ХТМЛ5 позволяет совершать много ошибок

Нет. HTML5 предоставляет несколько равноправных правильных вариантов и предписывает браузерам единообразно реагировать на ошибки. Благодаря большему количеству правильных вариантов, сделать настоящую ошибку (напр. вложить ссылку в ссылку) в HTML5 даже труднее, чем в XML (где строго контролируется лишь синтаксис, а логика целиком остается на совести автора).

поймут ли старые бразуеры это, которые не знают еще стандартов хтмл5?

Поймут. Эти возможности добавлены в стандарт именно потому, что они работали во всех актуальных браузерах (принцип «paving the cowpaths»).

Стоит ли для них ставить четко кавычки

В общем случае стоит. Не для старья, а для простоты — чтобы не переписывать код радикально если, например, в значении атрибута внезапно появится пробел. Исключение — очень высоконагруженные проекты, где «байты — деньги» (© Google).

указывать что - джава скрипт

Не нужно.

указывать дополнительные параметры в кодировке

Тоже не нужно.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept