Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в 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

Открыть новую тему     Написать ответ в эту тему

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, между блоками (в блоке значок, заголовок, текст).

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 00:14 13-06-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
добавляете его всем th каждого четного tr
tr:nth-child(even) th {
  padding-bottom: 20px;
}

Всего записей: 15040 | Зарегистр. 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;
}

Всего записей: 3346 | Зарегистр. 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

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ссылки! Почитал, попробовал, не получается, наверное, что-то не так делаю. Тот же пример.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 19:40 14-06-2021
Mavrikii

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

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

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

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо! Но По-разному пробовал.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 19:49 14-06-2021
Mavrikii

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

Цитата:
Но  По-разному пробовал

опечатался.

Цитата:
tr:nth-last-child(n+2) .vertical_line

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо!

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 21:09 14-06-2021
WONDROUS



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

Всего записей: 3346 | Зарегистр. 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;
}

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за подробный ответ! Правда, тогда отступ получается и у вертикальной линии (одно делается, другое изменяется).

Всего записей: 3346 | Зарегистр. 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 {
 
}

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



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

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

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

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

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

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Это установки фреймворка. Но сейчас почитал о высоте tr. Сделал высоту tr (line-height)  такую же, как у badge, линия стала показываться без промежутков.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 19:59 16-06-2021
WONDROUS



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

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

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

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

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

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



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

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



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

Поместил всё в div, вроде нормально стало работать.

Всего записей: 3346 | Зарегистр. 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

Компьютерный форум 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

Рейтинг.ru