Весь блок сделать ссылкой. Нужна подсказка!

[Facebook]

Всем привет, сделал баннерную сетку, установил на сайт. Но никак не получается сделать чтобы ВЕСЬ блок был ссылкой. Получается только текст., хотя весь блок находиться внутри ссылки

 

<a>
   <div>

       Текст и картинка
   </div>
</a>
 

Кто знает подскажите пожалуйста где что покрорректировать, возможно как то оптимтизировать код. Хотя скорость по Гугл ПейджСпидд 95, что вполне нормально.
На главной баннерная сетка тут https://mos-parkett.ru/

Змінено 20 травня 2020 користувачем Facebook

[Dimasscus]

посмотрите как сделано на демо и сделайте по аналогии. в чем проблема то? 

у вас картинка не ссылкой

[Facebook]

Какое демо, вы о чем ?

Это я и делал то что по ссылке

[Dimasscus]

5 минут назад, Facebook сказал:

Какое демо, вы о чем ?

Это я и делал то что по ссылке

это заметно что делали вы. а я о демо опенкарт речь веду. переделайте структуру по примеру слайдера на главной демо

[Facebook]

2 минуты назад, Dimasscus сказал:

это заметно что делали вы. а я о демо опенкарт речь веду. переделайте структуру по примеру слайдера на главной демо

К чему эти бесполезные ответы с вашей стороны при чем тут ДЕМО . Я сделал вполне валидный код, при чем тут Слайдер вобще.Не знаете о чем речь не говорите. На слайдере НЕТ ТЕКСТА И кНОПКИ.

[Dimasscus]

2 минуты назад, Facebook сказал:

К чему эти бесполезные ответы с вашей стороны при чем тут ДЕМО . Я сделал вполне валидный код, при чем тут Слайдер вобще.Не знаете о чем речь не говорите. На слайдере НЕТ ТЕКСТА И кНОПКИ.

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

[korya]

Все верно, в нутри тега а, блок с класом .баннер_текст (его размеры на скрине)
Оберни в тег весь блок или делай его на всю ширину!

 

[SergeTkach]

<div class="banner_item item_1">
  <a href="/laminat" class="banner_link" aria-label="Ламинат">
    <div class="banner_text">
      <h3 class="banner_title">Ламинат</h3>
      <p>
        Каталог ламината ведущих мировых производителей.
      </p>
      <div class="banner_btn">Подробнее</div>
    </div>
    <img loading=lazy src="https://mos-parkett.ru/image/catalog/banners/laminate-01.jpg" alt="Ламинат">
  </a>
</div>

 

https://ibb.co/SBtMTNB

 

но

1. Высота элемента .banner_link 0px

2. Все элементы внутри .banner_item имеют абсолютное позиционирование. Только вот .banner_link его не имеет.

3. Даже если задать высоту и  позиционирование картинка все равно не станет кликабельной, так как есть элемент, к-ый имеет z-index больше картинки. Тот же .banner_text имеет z-index: 120. Без этого он также перестает быть кликабельным (вернее даже видимым)

z-index: 121;
height: 323px;
position: absolute;
width: 100%;

 

[Dimasscus]

21 минуту назад, SergeTkach сказал:

<div class="banner_item item_1">
  <a href="/laminat" class="banner_link" aria-label="Ламинат">
    <div class="banner_text">
      <h3 class="banner_title">Ламинат</h3>
      <p>
        Каталог ламината ведущих мировых производителей.
      </p>
      <div class="banner_btn">Подробнее</div>
    </div>
    <img loading=lazy src="https://mos-parkett.ru/image/catalog/banners/laminate-01.jpg" alt="Ламинат">
  </a>
</div>

 

https://ibb.co/SBtMTNB

 

но

1. Высота элемента .banner_link 0px

2. Все элементы внутри .banner_item имеют абсолютное позиционирование. Только вот .banner_link его не имеет.

3. Даже если задать высоту и  позиционирование картинка все равно не станет кликабельной, так как есть элемент, к-ый имеет z-index больше картинки. Тот же .banner_text имеет z-index: 120. Без этого он также перестает быть кликабельным (вернее даже видимым)

z-index: 121;
height: 323px;
position: absolute;
width: 100%;

 

как вариант -картинку background подставлять. на самом деле вариантов решения больше чем 1. но тс идет своим путем. с кучей ненужного и вредного. например позиционирования и высоты в пикселях

 

[Facebook]

Высота в пикселях только для ПК, Он вполне адаптивный если вы не проверяли. И только один SergeTkach указал на то что это из за абсолютного позиционирования, остальные как будто не видели что Все и текст и картинка лежат внутри ссылки Тега а, В общем SergeTkach спасибо за наводку. Остальные супер верстальщики пишут воду без пользы.

[Dimasscus]

5 минут назад, Facebook сказал:

Высота в пикселях только для ПК, Он вполне адаптивный если вы не проверяли. И только один SergeTkach указал на то что это из за абсолютного позиционирования, остальные как будто не видели что Все и текст и картинка лежат внутри ссылки Тега а, В общем SergeTkach спасибо за наводку. Остальные супер верстальщики пишут воду без пользы.

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

[Facebook]

Dimasscus, вот вы внатуре васёк. если не видите логики вложенности. В общем я сам выяснил причину. У меня просто Градиент идет в псевдоклассе 
 

.banner_item:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

Он перекрывал ссылку. Как я удалил этот класс сразу весь блок стал кликабельным и вполне рабочей ссылкой. Только уже без градиента, но я это решу уже другим путём. Спасибо всем кто помогал.

Змінено 20 травня 2020 користувачем Facebook

[Dimasscus]

1 минуту назад, Facebook сказал:

Dimasscus, вот вы внатуре васёк. если не видите логики вложенности. В общем я сам выяснил причину. У меня просто Градиент идет в псевдоклассе 
 

.banner_item:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

Он перекрывал ссылку. Как я удалил этот класс сразу весь блок стал кликабельным и вполне рабочей ссылкой. Только уже без градиента, но я это решу уже другим путём. Спасибо всем кто помогал.

васьком я тебе по лбу могу постучать :))

нарукожопил от души, но умную фразу про "логику вложенности" надо ж вставить:)

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

[Facebook]

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