Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

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

 

<a>
   <div>

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

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

image.thumb.png.c6956a38e396283a880898a4fe85ac5d.png

Змінено користувачем Facebook
Надіслати
Поділитися на інших сайтах


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

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

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

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

Надіслати
Поділитися на інших сайтах


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

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


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

Надіслати
Поділитися на інших сайтах


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


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

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

Надіслати
Поділитися на інших сайтах


<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%;

 

Надіслати
Поділитися на інших сайтах

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. но тс идет своим путем. с кучей ненужного и вредного. например позиционирования и высоты в пикселях

 

Надіслати
Поділитися на інших сайтах


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

Надіслати
Поділитися на інших сайтах


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

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

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

Надіслати
Поділитися на інших сайтах


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

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

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

Змінено користувачем Facebook
Надіслати
Поділитися на інших сайтах


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

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


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

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

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

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

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

Надіслати
Поділитися на інших сайтах


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

 

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.