Rustam Bainazarov

Я уже и забыл, что это есть.

Код скриншотами никто не высылает.

Вот так, например:

Ваши ссылки перекрываются псевдоэлементами figure. Хоть они и прозрачные, но они лежат поверх ссылок, т. к. имеют габариты всего блока figure, поэтому клик по ним идёт. Чтобы сделать блок невидимым для клика, нужно добавить ему pointer-events: none:



Ну и хаком для h1 на таблицах уже никто не должен пользоваться как минимум лет 10, поэтому я привел вам пример типичной разметки h1 на все случаи жизни. Так же у вас везде жёсткие габариты, поэтому всё вылетает при адаптивности, исправил пару моментов, теперь это всё не разлетается при сжатии экрана.

«Выучили» HTML и CSS, а задаёте вопрос на уровне людей, которые никогда не слышали ни о чём подобном. Мда… зачем разбрасываться словами? К сожалению, вы вообще ничего не знаете на данный момент, если для вас даже тег <a> — это целая мистерия.

Есть макет, который нарисован где угодно. На основании этого макета и делается вёрстка, т. е. макет воплощается в коде.

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

Я бы так, например:

.info-slider
.info-slider__item
.info-slider__item-photo
.info-slider__item-photo-preview или .info-slider__item-preview
.info-slider__item-name

Можно короче:

.info-slider
.info-slider__item
.info-slider__photo
.info-slider__preview
.info-slider__name

Причины описал в комментариях к CSS.

Лично я использовал https://joshuajohnson.co.uk/Choices в последних проектах. Нет зависимостей, работает быстро.

Например, вот так он работает с 500 select'ами, которые я генерирую не очень правильным способом динамически при загрузке страницы, то есть это весьма тяжелая процедура:

Ломается верстка, потому что вы вложили тег <a> в тег <a>. Что приводит к ошибки построения DOM, т. к. это запрещено (ну и весьма логично, кстати, почему это запрещено).

Сделайте так, и ничего не будет ломаться:



Пользуйтесь валидатором в таком случае. Он 99% подскажет вам, куда копать:

Старые-добрые position: absolute, position: relative и z-index. Их бояться не нужно, просто нужно грамотно использовать в тандеме с теми элементами, что в потоке вёрстки.

Полностью адаптивно, подстраивается под размеры контента, ни на что не налезает (ограничение по ширине элементов исключительно для примера, а красная рамка — чтобы показать реальные размеры блока):

Если нативно:

Упрощать ваш код с телефона нет желания, но это будет работать.

Потому что это производительнее. Это ускоряется GPU + не вызывает repaint, т. к. transform не меняет реальное положение элемента. Прочитайте любую статью на тему, почему это так. За последние лет 8 их уже сотни, если не тысячи, и любой степени погружения в тему.

Способ избавиться от ряби в Chrome из-за transform — задать transform изначально, а уже на hover убирать его:



Иного метода, который бы по-настоящему исправил это, к сожалению, — нет. Либо полумеры, либо так, как я описал выше. Касательно того, как там устроено в Bootstrap — я не знаю, но на 99% уверен, что модификация компонентов под этот алгоритм не будет такой уж сложной и займет минут 10.

Кстати, это в целом не очень верно так делать разметку SVG, как у вас. Исправил.



Ну а так, это добавьте, если не хотите разметку менять, тогда заработает:

img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

Это вообще типичный сброс стилей для img. И именно из-за его отсутствия у вас эта проблема.

Максим, надеюсь, ответил на ваш вопрос.

Источник ответа:
https://stackoverflow.com/questions/400212/how-do-...

Рабочий пример


Всё это счастье работает в iOS:


Всё копирует:

Попробуйте pointer-events: none; добавить к логотипу в CSS. Это отключает элемент для взаимодействия, а клик по нему проходит сквозь него.

У вас только SVG как вариант действий. Карты изображений не позволят стилизации + они неадаптивны.

+ можно покликать, чтобы посмотреть, что через JS есть нормальный доступ:


Сделать это можно любым нормальным векторным редактором: Illustrator, Inkscape или же, как в моём случае, BoxySVG, там сразу есть удобный просмотр разметки, которую можно править:

С таким подходом не надо сложных манипуляций и ерунды с position: absolute или отрицательных margin для контента, здесь весьма очевидные отступы между блоками и пр.

Как там на Bootstrap — я не знаю, но можно сделать, например, так: