Jump to content
Facebook

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

Recommended Posts

Posted (edited)

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

 

<a>
   <div>

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

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

image.thumb.png.c6956a38e396283a880898a4fe85ac5d.png

Edited by Facebook

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
5 минут назад, Facebook сказал:

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

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

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

Share this post


Link to post
Share on other sites
2 минуты назад, Dimasscus сказал:

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


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

Share this post


Link to post
Share on other sites
2 минуты назад, Facebook сказал:


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

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

Share this post


Link to post
Share on other sites

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

 

image.thumb.png.af3f468b84d37fd6043f73a2d992f041.png

Share this post


Link to post
Share on other sites
<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%;

 

Share this post


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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • +1 1

Share this post


Link to post
Share on other sites
5 минут назад, Facebook сказал:

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

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

Share this post


Link to post
Share on other sites
Posted (edited)

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

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

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

Edited by Facebook

Share this post


Link to post
Share on other sites
1 минуту назад, Facebook сказал:

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


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

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

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

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

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
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.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   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.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.