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

[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]

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