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

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

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

Цитата:
Не пойму, можно ли сделать overflow: visible не только для самого объекта, но и для внешнего тоже

телепатов нет.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 21:57 09-08-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Пример. Две колонки и badge с overflow: visible. Где текст выше, то работает, где только колонка, правая, то обрезается.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 00:31 10-08-2020
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
.stacks_in {
    ....
    overflow: hidden;
}
 
.stacks_out {
    ....
    overflow: hidden;
}
не нужно это вставлять где попало

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 00:39 10-08-2020
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 00:45 10-08-2020 | Исправлено: WONDROUS, 00:47 10-08-2020
Mavrikii

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

Цитата:
Вот и получается

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

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 00:51 10-08-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, как лучше или правильнее сделать, так:

Код:
.code {
transform: translatey(0px);
animation: jump 1500ms ease-in-out infinite;
}
 
@keyframes jump {
    0% { transform: translatey(0px);}
    50% {transform: translatey(10px);}
    100% {transform: translatey(0px);}
}

или так:

Код:
.code {
animation: jump 1500ms ease-in-out infinite;
}
 
@keyframes jump {
    0% { top: 0; }
    50% { top: 10px; }
    100% { top: 0; }
}

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 01:09 13-08-2020
Mavrikii

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

Цитата:
как лучше или правильнее сделать, так:

https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
но 2012

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 01:35 13-08-2020
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 01:54 13-08-2020
VVL99

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
http://vvl99.narod.ru/12041961/1.html

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

Всего записей: 4158 | Зарегистр. 03-02-2011 | Отправлено: 02:37 13-08-2020
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 02:45 17-08-2020
Mavrikii

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

Цитата:
то почему подсказка появляется не над ним?

а почему она должна быть над ним?
она вставляется отдельно, с абсолюным позиционированием. а значит не привязана никак к элементу и если ее координаты расчитаны с помощью js, то он неправильно считает положение.
 
хотя причина простая - div (блочный элемент) не может быть внутри a (строчного элемента)
поэтому для браузера положение элемента а в левом нижнем углу, хоть и отображается div справа наверху.
вот и всплывается над a, а не над дивом.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 02:54 17-08-2020 | Исправлено: Mavrikii, 20:56 18-08-2020
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 12:39 17-08-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, можно ли только через CSS сделать ссылку для :after?
Пробовал в инете найти, толком ответа не нашёл.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 20:02 18-08-2020
Mavrikii

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

Цитата:
через CSS сделать ссылку для :after?

нет

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 20:56 18-08-2020
WONDROUS



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

Цитата:
хотя причина простая - div (блочный элемент) не может быть внутри a (строчного элемента)
поэтому для браузера положение элемента а в левом нижнем углу, хоть и отображается div справа наверху

Если делать на том же примере, то как тогда лучше сделать, чтобы задавая ссылку значку/кругу, подсказка/тултип появлялась в заданном месте у значка? Если делать ссылку для текста, то ссылка появляется только при наведении курсора на сам текст, а не на значок/круг в целом.

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

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
что вы привязались к этому псевдоклассу? что мешает разместить там (в правом верхнем углу) именно <a> тег?

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 19:58 19-08-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Обновил пример, ссылка та же.
 
И как это сделать?
 
И ещё просьба подсказать, что не так в коде, если треугольник подсказки показывается выше (а должна слева)? Как правильно сделать, подскажите, пожалуйста, а то запутался уже.
 
То есть, там, где просто значок (с птицей), там понятно, позиционирование убрать вроде надо. Но в остальном вопрос в силе.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 20:41 19-08-2020 | Исправлено: WONDROUS, 20:52 19-08-2020
Mavrikii

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

Цитата:
И как это сделать?

я не понимаю в чем сложность то? родителю position: relative, ссылке position: absolute и выставить только right и top как хочется. без проблем размещается ссылка справа наверху.
 

Цитата:
Как правильно сделать, подскажите, пожалуйста, а то запутался уже.

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

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 21:06 19-08-2020
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 21:41 19-08-2020
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
я уже устал, если честно, описывать элементарные вещи.
1) не нужно для <a> выставлять размеры
2) не нужно содержимое <a> делать с абсолютным позиционированием
тогда <a> растянется по размерам содержимого и не будет никаких проблемы с расположение тултипа.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 21:45 19-08-2020
Открыть новую тему     Написать ответ в эту тему

Страницы: 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