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

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

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

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
 

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

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

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

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

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

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



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

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

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

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



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

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

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

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

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

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

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

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

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

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

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



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

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



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

----------
*
Если вам не нравится мой характер, это нормально, я ещё не встречал тех, кому он нравится.

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



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

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

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

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

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

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



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

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



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

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

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

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

нет

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



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

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

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

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

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

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



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

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

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

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

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

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

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

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



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

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

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

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

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


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

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2020

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru