Можно ли в сетке сделать такой дизайн таблицы?

Сообщение **maklom** » 19 фев 2019, 21:33

Дорогие друзья! Не могу сообразить как сделать дизайн такой таблицы в сетке верстки подобной образцу с этой странички: http://www.pianochap.com/services/
Помогите очень нужно :s_o_s:

Сообщение **maklom** » 20 фев 2019, 02:05

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

Test.wbs

Сообщение **spoon** » 20 фев 2019, 07:13

Так я не понял, углы закруглить у сетки или у таблицы?

Сообщение **maklom** » 21 фев 2019, 01:37

Приветик spoon, углы нужно закруглить у таблицы, как было в ссылке. Я хотел таблицу сделать с пропусками. Нашёл опцию: Bootstrap Striped Rows - строки таблицы тогда не слипаются, но углы становятся прямыми и скруглить нет возможности - посмотрите ещё раз!!! :men:

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

Отправлено спустя 1 час 4 минуты 40 секунд:
Вот что получается у меня в конечном итоге: http://workshop.cmuxu.net

Отправлено спустя 36 минут 43 секунды:
Spoon, блин страдал до часа ночи, пока не сообразил, что надо каждый раз сепаратно вставлять таблицу, тогда добился нужного эффекта. Спасибо за Ваш файлик, понял, где лежат настройки рамок. Теперь всё встало на свои места! :hi_hi_hi:

Сообщение **spoon** » 21 фев 2019, 06:54

maklom, не проще вставлять сетку? Какой смысл вставлять целую таблицу для одного поля?

Сообщение **maklom** » 21 фев 2019, 13:38

Так spoon, с этого места пожалуйста поподробнее. Если я правильно понял таблицу создаём сетками по следующей схеме:
Допустим мой случай - основная "материнская сетка" ("мс") поделена на две ячейки. В правой ячейки создаём таблицу следующим способом - вставляем туда "сыновью сетку" ("сс") допустим тоже из двух ячеек для контента, под неё следующую "сс" одинарную для пробела, потом "сс" двойную для контента и снова пробел, таким образом формируя таблицу для бесконечности... Я правильно уловил Вашу мысль или есть какие-то ньюансы??? Если так делать, ещё конечно не пробовал, но я думаю адаптация сетками будет лучше чем таблицей.

Сообщение **spoon** » 21 фев 2019, 13:53

"Сыновью сетку" ;;-)))

ну вы меня убили просто в голову.

Отправлено спустя 24 секунды:
Дочернюю может :)-(:

Отправлено спустя 3 минуты 7 секунд:
Ну во-первых вы будите формировать не таблицу, а див блоки т. к. таблица формируется тегом table, а простой блок-сетка это div.
Во-вторых отступ вы делаете отступом в сетке, хоть сверху, хоть снизу, без вставки лишних сеток.

Сообщение **mocktel** » 21 фев 2019, 21:01

border-radius: не работает?

Сообщение **spoon** » 21 фев 2019, 21:29

Всё работает, надо руки и голову включить.

Сообщение **maklom** » 22 фев 2019, 00:19

Код: Выделить всё

Сыновью сетку"  ;;-))) ну вы меня убили просто в голову.

Отправлено спустя 24 секунды:
Дочернюю может :)-(:

Отправлено спустя 3 минуты 7 секунд:
Ну во-первых вы будите формировать не таблицу, а див блоки т. к. таблица формируется тегом table, а простой блок-сетка это div.
Во-вторых отступ вы делаете отступом в сетке, хоть сверху, хоть снизу, без вставки лишних сеток.

Spoon, я очень рад, что смог развеселить. Говорят смех продлевает жизнь - как-то нужно же Вам отплатить добром. :mi_ga_et:

Я тоже думаю не замарачиваться таблицой, а делать блоки сеткой. Идея мне понятна. Вот только с отступом не знаю, получится или нет??? Ведь нужно делать белые поля с закруглением углов, а между полями должен быть виден задний фон картинки по замыслу. Я ещё правда не пробовал - в выходные займусь. Виртуально не могу себе представить - нужно поработать в Билдере или я опять чего-то мудрю... :du_ma_et:

Отправлено спустя 6 минут 39 секунд:

Код: Выделить всё

Сообщение mocktel » 21 фев 2019, 18:01

border-radius: не работает?

Нет, всё работает - я просто не мог найти настройку закругления углов таблицы. Мне помог spoon: зашёл в Border - custom - там и лежат параметры сглаживания углов. :co_ol:

Сообщение **spoon** » 22 фев 2019, 06:55

maklom писал(а): Вот только с отступом не знаю, получится или нет???

maklom, тут тоже всё просто и как всегда есть 100500 способов: можно первому блоку в особых стилях прописать margin-bottom:20px; и копипастить этот блок; можно прописать какой-нибудь класс и задать ему margin; можно в исходнике в head задать класс и так же прописать margin.