Вопросы по CSS - [100] :: 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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

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

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

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Пример. Две колонки и badge с overflow: visible. Где текст выше, то работает, где только колонка, правая, то обрезается.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 00:31 10-08-2020

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS .stacks_in { .... overflow: hidden; } .stacks_out { .... overflow: hidden; } не нужно это вставлять где попало
	Всего записей: 15689 \| Зарегистр. 20-09-2014 \| Отправлено: 00:39 10-08-2020

WONDROUS

Silver Member

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

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

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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

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

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

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

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

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо за ссылку. Вообще, даже так заметно, что с transform: translate движения плавнее.
	Всего записей: 3440 \| Зарегистр. 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	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Подскажите, пожалуйста, если ссылка в примере сделана на самом значке (круге), то почему подсказка появляется не над ним?
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 02:45 17-08-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

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

а почему она должна быть над ним?
она вставляется отдельно, с абсолюным позиционированием. а значит не привязана никак к элементу и если ее координаты расчитаны с помощью js, то он неправильно считает положение.

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

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо за подробный ответ! Попробую потом как-то по-другому сделать.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 12:39 17-08-2020

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Просьба подсказать, можно ли только через CSS сделать ссылку для :after? Пробовал в инете найти, толком ответа не нашёл.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 20:02 18-08-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

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

нет

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

WONDROUS

Silver Member

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

Mavrikii

Цитата:

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

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

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

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS что вы привязались к этому псевдоклассу? что мешает разместить там (в правом верхнем углу) именно <a> тег?
	Всего записей: 15689 \| Зарегистр. 20-09-2014 \| Отправлено: 19:58 19-08-2020

WONDROUS

Silver Member

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

Mavrikii
Обновил пример, ссылка та же.

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

И ещё просьба подсказать, что не так в коде, если треугольник подсказки показывается выше (а должна слева)? Как правильно сделать, подскажите, пожалуйста, а то запутался уже.

То есть, там, где просто значок (с птицей), там понятно, позиционирование убрать вроде надо. Но в остальном вопрос в силе.

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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

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

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

Цитата:

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

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

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо, у круглого получилось сделать, а если ширина не фиксированная (не задана точно), то получается так.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 21:41 19-08-2020

Mavrikii

Platinum Member

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

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

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