8

Увеличить зону кликабельности ссылки — HTML/CSS

Допустим у нас есть страница с превью новостей:

Увеличить зону кликабельности ссылки — HTML/CSS Frontend, Web-Программирование, Ссылка, Верстка, Теги, HTML, CSS, Фронтендеры

Необходимо сделать ссылкой не только подзаголовок, но и картинку.

Способа три: плохой, злой, хороший.


Плохой

Просто обернуть и заголовок, и картинку в ссылку:

<div>
 <a href="#"><img src="image.jpg"></a>
 <h2><a href="#">text</a></h2>
</div>

Злой

Обернуть все в одну ссылку:

<a href="#">
 <img src="image.jpg">
 <h2>text</h2>
</a>

Хороший

Разместить ссылку в заголовке. Расширить область ссылки на всю карточку с помощь псевдоэлемента :before:

<div>
 <img src="image.jpg">
 <h2><a href="#">text</a></h2>
</div>

<style type="text/css">
div {
 position: relative;
}

a:before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
</style>

Конечно я утрирую и вы можете использовать любой из этих трех вариантов, но мой совет использовать последний :)

Дубликаты не найдены

+2

Подписался

+2

Совершенно бесполезный пост. Мало сказать "так - плохо, а так - хорошо" - поясни, отчего! Иначе ну вот вообще непонятно.

раскрыть ветку 8
+1

Виноват, мне следовало расписать этот момент поподробней:

Первый вариант плох тем, что мы используем ссылку два раза, вместо одного.
Второй - вкладыванием блочных элементов в ссылку. Работать будет, но это не всегда семантично. Есть ньюансы, но проще избегать таких ситуаций.
Третий лишен проблем двух предыдущих.

раскрыть ветку 7
+1

Второй - вкладыванием блочных элементов в ссылку. Работать будет, но это не всегда семантично.

Больной, а Вы не делайте так (с)


Вас под дулом пистолета заставляют оформлять заголовок новости тегом заголовка? SPAN, например? Не, не слышали?


И раз уж про семантику речь зашла, то что отбивает заголовок, за которым не следует ни одной буквы текста?


Не говоря уже о том, что оформлять "набор" из картинки и заголовка DIVами, которые визуально будут не блочными элементами, а скорее всего и фактически (при таком оформлении придется им придавать либо display: inline, либо float, либо иные извращения костыли), а потом кричать, что Hn - это блочный элемент и не подлежит оборачиванию в ссылку... ну, такое...

0

Насколько я помню, в ссылку нельзя заворачивать интерактивные элементы, простые блочные - почему бы и нет. Неопределенности не будет. Это я ко второму пункту.

раскрыть ветку 5
0

А я советую четвертый вариант: удалять гланды ректальным путем, но не скажу почему, просто советую четвертый вариант.

0

Вот из за таких верстальщиков, у меня сгорало каждый день... я настолько сгорел, что свалил из этой адовой сферы.


P.S. Современные методы уже давно обрабатывают onclick по контейнеру, и похер чё  внутрь положил автор.

раскрыть ветку 10
0

Если задача перейти по ссылке, то зачем использовать для этого JavaScript?

раскрыть ветку 9
-1

Потому, что современные методы рендера работают сильно иначе.

Тому-же React + react_router  насрать есть у вас там href или нет, блок это или строчнй элемент.


А для людей создающих чистый html + css блокнотике в 2020м, есть специальный котёл в аду =)


Мало того, ваш shadow-dom, сделает то-же самое. Только без вашего участия.

раскрыть ветку 8
+1
А чем плох второй вариант?
раскрыть ветку 8
0

У Вадима Макеева был доклад про вкладывание:
https://youtu.be/A4tglcel7Ac?t=787
Там это хорошо объяснено.

раскрыть ветку 1
0

Воу, спасибо

0

Поисковики больше любят ссылки внутри которых кроме текста больше ничего нет.

раскрыть ветку 1
0
Открою секрет - им ваще пофиг.
0

тем что блочный тег внутри строчного

раскрыть ветку 3
+1

А если строчному display:block; или блочному inline?

0

А что мешает строчный элемент преобразить в блочный?

раскрыть ветку 1
0
Иллюстрация к комментарию
Похожие посты
83

Во все тяжкие: Веб - разработчик с нуля. Неделя № 6

Во все тяжкие: Веб - разработчик с нуля. Неделя № 6 IT, Карьера, Frontend, Длиннопост, Верстка

Если можно проснуться в другом времени и в другом месте, нельзя ли проснуться другим человеком? (с) Чак Паланик

Цель — Senior Frontend Developer.
Язык: JavaScript.

Исходные данные:
Возраст: 28 лет;
Образование: высшее, инженер ПГС;
Работа (настоящее время): менеджер по продажам.

Итак, пролетела еще одна неделя:

Уровень мотивации: 8 баллов (из 10).

Режим тренировки основных навыков (ежедневные занятие):
1) Подъем в 06:00, отбой в 00:00 – 00:30. Утренние занятия перед работой — 2-2,5 часа. Практика. На данном этапе — верстка макетов;
2) Чтение 30-50 стр. книги по IT тематике или связанной с ней;
3) Подписка на HTML Academy (выполнение 10 заданий по верстке каждый день);
4) Изучение теории и практика после 19:00 (после работы). Обычно удается выделить по 3 часа.

Режим тренировки дополнительных навыков:
- Чтение 1 главы адаптированной книги на английском.

Сознательные добровольные (временные) ограничения:
1) Не курю
2) Не пью алкоголь

Итоги шестой недели:
1) Прочитана книга Брэда Сталберга и Стива Магнесса «На пике. Как поддерживать максимальную эффективность без выгорания». Годная книга не только для программистов. О самоменеджменте;
2) Прочитано 100 стр. книги Уильяма Пандстоуна «Найти умного. Как проверить логическое мышление и творческие способности кандидата». Полезная книжка для кругозора и в целом для понимания некоторых областей и как бывает (бывало) в IT;
3) Изучено и разобрано еще около 80 страниц книги Райана Бенедетти — «Изучаем работу с JQuery», разобрал примитивные функции и работу с условиями;
4) Пройдено 80% курса по верстке;
5) Углубил работу с Chrome DevTools. Изучил новые функции и расширения. Думаю по-тихоньку заняться изучением спецификации, ведь это один из основных интрументов веб-разработчика. Только на русском языке не нашел - это вызов? Нашел интересную подборку материалов для верстальщиков от Алексея Крекотуна;
6) Всю неделю я верстал один проект. На данный момент это мой самый большой проект, там более 1000 строчек кода. К сожалению из-за ошибок в начале, верстка идеально открывается на моем экране (15”) и на более широких, но адаптивности для мобилок добиться не удалось. Обида. Чуть крыша не поехала вчера, когда понял это, в итоге целый день сидел бился с макетом. В итоге оставил как есть. Сначала изучу как делать адаптивность правильно.

Проблемы с которыми столкнулся, выводы и корректировки:
1) Верстка идет проще, уже могу сверстать практически любой элемент, который может использоваться на стандартном сайте. То есть, статическую картинку на свой монитор сверстаю. Но к сожалению для того, чтобы сайт был адаптивен и доступен, такой способ не сработает. Нужно верстать определенный элемент определенным способом, иначе при смене девайса все поедет в далекие дали. В общем, пока всё плохо;
2) Понимаю, что двигаюсь очень медленно, в рабочие дни не удается выделять более 4-5 часов для тренировки навыков. Хочется больше практики;
3) С утра изучать теорию тяжело — засыпаю. А вот практика с утра идет на ура, 2 часа пролетает как 10 минут. Поэтому, отныне с утра только практика, а вечером — теория и практика, если нужно;
4) Убрал тренировку печати слепым методом, так как пальцы привыкли к расположению и осталось внедрить навык в процессе деятельности. А это сложнее, так как по привычке печатаешь всё равно как раньше. Кстати, ссылка на тренажер;
5) Хочу перейти уже к изучению и практике JS, так как знаю, что в той компании, куда я планирую устроиться не придется заниматься версткой, но не могу себе позволить остановиться на полпути. Надо освоить верстку чуть глубже, в частности адаптивность. А это значит, что еще 1-2 недели я буду верстать макеты сайтов;
6) Принял решение, что воскресенье — день свободный от тренировки, выходной. Хоть пока не было желания все воскресенье отдыхать. Зато на сон в воскресенье уделяю не 5-6 часов, а 8-9. Набираю силы перед рабочей неделей. Отдыхать очень важно — один из выводов прочитанной книги Брэда Сталберга;

В целом всё круто, мне всё нравится. Да, иногда очень тяжело вставать с утра и садиться верстать непонятные макеты, но я помню зачем и почему я начал всё это.

Увидимся через неделю.

Показать полностью
880

Интернет, который мы заслужили

Сижу давеча, листаю новостную ленту Яндекса. Взгляд привлекла одна интересная статья. Перехожу на сайт статьи и.. словно попадаю в начало 2000-х, когда "сёрфил" интернет на своем 56 Кбитном ZyXel'е.. иконка загрузки крутилась, пожалуй, с полминуты, а баннер рекламы в правой колонке плавно заполнял пустое пространство.

– Интернет так тупит? – подумал я. Но вроде все ок, другие сайты грузятся адекватно.

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

– circus.jpg  14308 Кб – пожаловался мне браузер.

Интернет, который мы заслужили Web, Сайт, Web-Программирование, HTML, И так сойдет, Рукожоп, Интернет

14 метров (Карл!) на баннер сбоку, чьи размеры составляют 278 x 417 пикселей. Если пережать баннер с конечными размерами в 90% JPEG, то выйдет всего 151 Кб – без малого в 95 раз меньше!

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

Думаю подобные принципы остались и сейчас, но все чаще разработчики кладут на это болт:

– Зачем делать превьюшку? И так сойдет, вставим 14 метровый оригинал!


У сайта кстати есть мобильная версия. И знаете чем она отличается от обычной десктопной?

А ничем она не отличается от слова совсем, просто появляется бесконечный скролл с автоматической подгрузкой статей. Лол.

127

Как сделать интерактивную карту на сайт, без сторонних библиотек. SVG + HTML + CSS + jQuery

В этом видео я показываю, как быстро и просто сделать интерактивную SVG-карту, которая часто используется на сайтах торговых комплексов, на сайтах по продаже квартир и т. д.


На Ютубе зашло, судя по комментам и лайкам (ничего не накручено). Может и тут кому полезно будет.

46

Web-технологии. Начало

С чего начать обучение верстке? На мой взгляд, в верстке главное – практика. Поэтому обучение стоит начинать с выбора макета. В сети достаточно psd макетов, которые можно использовать в не коммерческих целях. Поэтому первый шаг – выбор макета. Для первого опыта подойдет любой одностраничный сайт.


В этой серии постов я постараюсь на примере свободно распространяемого макета показать верстки проекта. Не будет постов с перечислением всех html тегов и css стилей, это не результативно. Важно не заучить каждый элемент, а понять особенности и подходы к реализации.


По мере появления времени, я выберу шаблон и поэтапно покажу работу над ним. Все желающие могут присоединиться, выбрать себе psd макеты и в процессе работы над ними мы обсудим те или иные подходы к верстке. Подробные уроки по HTML и CSS составлять не буду, этого в сети много. Например, уроки на webref:


https://webref.ru/layout/learn-html-css


Кроме того, при освоении основ советую избегать любых css фреймворков, стоит поделать работу руками, чтобы понимать, как и что устроено.


Список полезных ссылок:


Справочник по html/css: https://webref.ru/ref


Информация о поддержке тегов и стилей браузерами: http://caniuse.com/


Онлайн песочница: http://codepen.io/


Хорошая статья по флексбоксам: http://css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstv...


Это то, что касается новичков. Для опытных разработчиков постараюсь периодически делать выборку полезных статей и материалов.


Оставляйте предложения и замечания в комментариях.

Похожие посты закончились. Возможно, вас заинтересуют другие посты по тегам: