Вопросы по CSS - [111] :: Web-программирование :: Компьютерный форум Ru.Board

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?

Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Модерирует : Cheery
Версия для печати • Подписаться • Добавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

Xrobak

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Ссылки для самостоятельного изучения:

Теория + примеры + учебники:
• W3School: CSS Tutorial
• MDN: Cascading Style Sheets (CSS)
• WebReference: Уроки по HTML и CSS
• htmlbook: Справочник CSS
• YouTube: Основы CSS/CSS3
• CSS для JavaScript-разработчика
• Основы CSS - каскадные таблицы стилей
• Статьи по основам CSS

Применение на практике:
• StackOverflow: 'CSS' Questions
• CSS-Tricks

Первый пост темы (до включения шапки).. ··· Текущий бэкап шапки..

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 18:46 27-10-2004 | Исправлено: TheBarmaley, 05:24 27-02-2019

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Просьба подсказать, как в этом примере сделать отступ, например, 20px, между блоками (в блоке значок, заголовок, текст).
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 00:14 13-06-2021

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS добавляете его всем th каждого четного tr tr:nth-child(even) th { padding-bottom: 20px; }
	Всего записей: 15684 \| Зарегистр. 20-09-2014 \| Отправлено: 00:42 13-06-2021

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Mavrikii
Спасибо за ответ!

Ещё вопрос. Три одинаковых дива и правило для них, никак не получается сделать, чтобы правило не работало для последнего дива.
CSS

Код:

.vertical_line {
border-left: 3px dotted #03a9f4;
height: 60%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
margin-left: 3px;
}

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 18:28 14-06-2021

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

Три одинаковых дива и правило для них

размещенных как? в общем смысле :not и
https://webref.ru/layout/structural-pseudo-classes/nth-last-child
или http://htmlbook.ru/css/last-child

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 19:29 14-06-2021 | Исправлено: Mavrikii, 19:29 14-06-2021

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо за ссылки! Почитал, попробовал, не получается, наверное, что-то не так делаю. Тот же пример.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 19:40 14-06-2021

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

попробовал, не получается

и не получится, потому что применяется к сиблингам.
в вашем случае нужно условие на tr, а потом уже на div
tr:nth-last-child(n+1) div

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 19:42 14-06-2021

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо! Но По-разному пробовал.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 19:49 14-06-2021

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

Но По-разному пробовал

опечатался.

Цитата:

tr:nth-last-child(n+2) .vertical_line

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 20:00 14-06-2021

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо!
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 21:09 14-06-2021

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Mavrikii
Что-то я всё же пока не очень разбираюсь в таблицах и отступах. Подскажите, пожалуйста, как сделать отступ, тот же padding-top, между строками (tr), за исключением первой строки (пример тот же)?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 16:58 15-06-2021

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

Подскажите, пожалуйста, как сделать отступ, тот же padding-top, между строками (tr)

у tr нет отступа, так как это неотображаемый элемент.
выбираете все tr кроме первого и выставляете его th padding

tr:not(:first-child) th {
padding-top: 20px;
}

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 17:22 15-06-2021

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо за подробный ответ! Правда, тогда отступ получается и у вертикальной линии (одно делается, другое изменяется).
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 17:42 15-06-2021

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

Правда, тогда отступ получается и у вертикальной линии

вы сами написали

Цитата:

за исключением первой строки

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

https://developer.mozilla.org/ru/docs/Web/CSS/:nth-child

tr:nth-child(n+3) th {

}

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 17:52 15-06-2021 | Исправлено: Mavrikii, 17:53 15-06-2021

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Mavrikii
Спасибо за ответ, но оставил как было.

Ещё вопрос по вертикальной линии. В этом примере заменил заголовок с <h5> на див с текстом. В общем, при изменении размера .badge меняется и размер вертикальной полосы. Если размер больше, то линия идёт от круга до круга, если размер badge меньше, то остаётся промежуток. Просьба подсказать, как можно сделать линию без промежутков при любых размерах .badge? Сам пример.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 17:21 16-06-2021

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

Просьба подсказать, как можно сделать линию без промежутков при любых размерах .badge?

не выставлять для них line-height: 1.5, как для всего body

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 18:53 16-06-2021

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Это установки фреймворка. Но сейчас почитал о высоте tr. Сделал высоту tr (line-height) такую же, как у badge, линия стала показываться без промежутков.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 19:59 16-06-2021

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Ещё вопрос по тому же примеру и просьба подсказать. Убрал заголовок и перенёс на его место текст, но при этом, почему-то, исчезла вертикальная линия между кругами с цифрами. Подскажите, пожалуйста, можно ли как-то сделать видимой вертикальную линию? По сути ведь из одного th перенёс текст в другой.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 22:51 17-06-2021

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

По сути ведь из одного th перенёс текст в другой.

не совсем.
проще всего сделать фоном у th с номером. используя градиент для создания ширины
либо разместить ниже номера div в полную высоту с нужной границей или фоном.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 04:54 18-06-2021

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Mavrikii
Спасибо за ответ и совет! Я поэксперементировал немного после того, как вопрос задал, получилось сделать, поместив див с вертикальной линией ниже .badge и убрав пустую строку ниже. Правда, тогда для .badge нужен z-index.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 13:25 18-06-2021

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Просьба сильно ругаться и подсказать, почему в этом примере при применении шрифта для заголовка не срабатывает правило, чтобы не показывалась самая нижняя вертикальная линия? Вверху с гугл-шрифтом, ниже шрифт по-умолчанию.
В общем, происходит это по причине подключения гугл-шрифта, но как исправить, чтобы всё работало, не соображу.
Поместил всё в div, вроде нормально стало работать.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 17:29 27-06-2021 | Исправлено: WONDROUS, 19:05 27-06-2021

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC