Почему slick slider соединяет блоки?

Для наглядности проблемы

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

Я же предложил — предметно. Исправьте пример по ТЗ.

Предметно я бы полностью сделал свою разметку и выкинул этот говнокод

И перестаньте умничать. Будьте взрослее.

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

Почему slick slider соединяет блоки?

Сергей delphinpro, Давайте объективно, я не пытаюсь показать превосходство над другими слайдерами и т.д.., я просто утверждаю что проблема решаема на уровне стилей и разметки о чем я и написал в первом комментарии, а вы мне пытаетесь доказать безысходность использования слик. В нем есть одна существенная проблема, но совсем не в этой области.

Как правильно сверстать такой блок без гридов и абсоллютного позиционирования?

QWERTY01, Вы спросили как. Ответ, флексами. Вы сказали что нужно сделать за вас, а это нарушение правил. тут нет язвительности, вам нужно открыть любой урок/учебник и начать учиться, поэтому что этот вопрос не содержит в себе ничего, с чем бы не справился новичок.

Почему slick slider соединяет блоки?

Сергей delphinpro, Зачем красить фон слайдов, если вам нужен другой размер, используйте обертку. В слике слайд нужно использовать только ради слайда, а уже внутри создавайте свои блоки и кастомизируйе как угодно, проблем не будет.

и по краям слайдера появляются ненужные отступы.

Вы наверно и про отрицательные маржины не слышали, для компенсанции отступов по краям.

Дерзайте, умный вы наш

У вас проблема в подходе, если для вас это слишком умно, ну это ваши проблемы.

Как правильно сверстать такой блок без гридов и абсоллютного позиционирования?

QWERTY01, Почему это "понятно что не флоатами"? Такое даже таблицами можно сделать

Почему slick slider соединяет блоки?

Сергей delphinpro, Они будут влиять, только если делать неправильно. Элементарнейший способ, задать размер с учетом отступа:

width: calc(100% - 20px);
margin: 0 10px;

Если это сложно, тогда да, наверно нужно отказываться от библиотеки.

Как правильно сверстать такой блок без гридов и абсоллютного позиционирования?

Флексами.. Или вы хотите чтобы за вас сделали?

Почему slick slider соединяет блоки?

Сергей delphinpro, омг, а сделать отступы внутри слайда не судьба? Из-за такой мелочи которая решается на уровне html/css отказываться... что?

Как правильно сверстать такой элемент?

RAX7, Пример в ответе я быстро написал, чтобы помочь человеку понять принцип, пока на меня не напали со своими псеведоэлментами. В примерах в комментариях там название уже decor если не заметили.

Вы усложняете, там где это не нужно.

Я то как раз ничего не усложнял, я написал код, который меня не подведет. А вы занимайтесь чем хотите.

Кэш в админке opencart не обновляется?

или знает куда посмотреть чтобы исправит проблему?

В консоль

Как правильно сверстать такой элемент?

Ankhena,

Этот блок может выглядеть как в вопросе на мобилках, а на декстопах как нарисовал @RAX7
Мы же не будем менять разметку из-за этого.

RAX7

так в том-то и дело, что структура не будет отличаться, отличаться будет только внешний вид.

А в чем собственно проблема? Изучаем тз и выбираем правильное решение. Чем тут псевдоэлемент то в выигрыше?)

@RAX7

Данный случай не является чем-то особенным и можно спокойно сделать отточие псевдоэлементом, это до вас и пытаются донести.

А можно сделать полноценный блок, который по своим свойствам, всегда более полноценен чем псевдоэлемент.

Как правильно сверстать такой элемент?

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

Как правильно сверстать такой элемент?

RAX7, Наверное вы не знакомы с методологией БЭМ, если структура будет принципиально отличаться, тогда мы будем использовать другой шаблон и не будем тратить время на модификации.

Как сделать адаптивно вот такую карточку товара?

Вчера задавали такой же вопрос Как правильно сверстать такой элемент?

Как правильно сверстать такой элемент?

Ankhena,

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

В этом и вся суть, чтобы не пришлось ничего менять, нужно изначально делать структуру устойчивую и масштабируемую, после чего все остальные действия можно будет совершать на уровне стилей. О чем собственно и повествует БЭМ, который и гугл применяет в некоторых своих проектах. А вот то что вы предлагаете использовать псевдоэлементы в угоду полноценным блокам, как раз и приводит к тому, что в будущем это выйдет боком. Это я вам с первого комментария объясняю и хороший пример тому, обертка для кнопок, от которой вы советовали отказаться.

Как правильно сверстать такой элемент?

Ankhena,

Конечно, есть разные задачи и для некоторых из них можно спокойно плевать на быстродействие, валидатор, доступность, ИЕ и еще на что-нибудь.

Каким образом использование блоков, которые появились вместе с самим языком разметки внезапно стали бременем?

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

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

Если еще вместо div.item__dotted использовать псевдоэлемент и убрать обертку от кнопки, то вообще красота будет.

Является субъективным мнением. Как в целом и мое

Как правильно сверстать такой элемент?

Ankhena,

DOM узлов меньше, вроде это очевидно.

Полный бред, об этом я уже говорил:

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

-------------------------

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

Это еще большая глупость. Практически на любом БЭМапе представители от яндекса утверждают, что поисковики собирают совсем другую информацию и если вам нужны обертки или дивы используйте их и не пытайтесь ничего упрощать.

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

----------------------------------------------------------

А от вас уже 2 поста только вода.

Вы почему-то решили что я вам должен что-то объяснять и разжевывать, при это вы даже не предоставили свой пример, чтобы хоть как-то продемонстрировать свою компетентность. При этом мою реализацию видно в ответе. Поэтому пустые слова пока что только у вас.

Но раз вы сами не можете себе представить, давайте смоделируем пару ситуаций. Первая и часто встречающаяся, это кнопка, как вы выше написали:

и убрать обертку от кнопки, то вообще красота будет.

А что если нужно добавить еще одну кнопку, например сравнение. Мне для этого достаточно будет просто её добавить и при желании модифицировать обертку.
И сразу второй пример, тут на самом деле фантазировать должен дизайнер, но на вскидку реализация более сложных декораций. Ваши псевдо элементы в этот момент больше не рентабельны и придется уже делать по человечески со взглядом в будущее:

Как правильно сверстать такой элемент?

Ankhena, Тоже самое я могу сказать о вас. Покажите мне преимущество псевдоэлемента перед дивом?

Как правильно сверстать такой элемент?

Ankhena, Например любые. "Упрощать" разметку ради того чтобы вставить себе палки в колеса в будущем, ну так себе занятие.

Как правильно сверстать такой элемент?

Ankhena, не будет, данная разметка более гибкая и позволяет вносить более сложные модификации в будущем