Вопросы по CSS - [101] :: 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	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii На примере, просто код здесь, можно, плиз? Я для ссылок подобного не делал раньше, поэтому просто не знаю.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 21:58 19-08-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

На примере, просто код здесь, можно, плиз?

я же сказал - убрать position: absolute для <div> в <a>.
если нужно будет подвинуть еще, то двигаем <a>, либо сам <div> через position: relative или translate

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 22:03 19-08-2020 | Исправлено: Mavrikii, 22:04 19-08-2020

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

Silver Member

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

Хм, почему разные разработчики за столько времени не пришли к единому стандарту правил в браузерах? В одних что-то работает, в других нет.

Этот код нормально работает в Chrome, но не работает в Safari, в нём первый элемент нормально расположен, а каждый последующий ниже предыдущего.

Код:

columns: 3 40px;
column-gap: 3px;
margin: 0 auto;
width: -webkit-fit-content;

И можно ли чем-то простым заменить gap (для flex), который не работает в Safari?

Добавлено:
Ёлки, одно сделаешь, другое поломалось. Извиняюсь, конечно, но просьба подсказать, как сделать, чтобы в том же примере нормально работал hover? Текст почему-то торчит слева внизу и не пойму, как убрать.

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

Mavrikii

Platinum Member

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

WONDROUS
я не пользуюсь Сафари. чтобы понять что умеет, смотреть нужно на https://caniuse.com/

Цитата:

Текст почему-то торчит слева внизу и не пойму, как убрать.

потому что

Цитата:

.stacks_in_362_page0badge_out:hover .stacks_in_362_page0badge_in

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

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 02:11 21-08-2020 | Исправлено: Mavrikii, 02:14 21-08-2020

Silver Member

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

Mavrikii
В смысле? Если честно, то как-то не понятно. Я сейчас в браузере по-разному перепробовал, всё не то.
Ведь стили появляются только при наведении, а текст торчит всегда.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 02:24 21-08-2020 | Исправлено: WONDROUS, 02:25 21-08-2020

VVL99

Silver Member

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

Цитата:

Ёлки, одно сделаешь, другое поломалось. Извиняюсь, конечно, но просьба подсказать, как сделать, чтобы в том же примере нормально работал hover? Текст почему-то торчит слева внизу и не пойму, как убрать.

Потому что hover при наведении на элемент добавляет или меняет имеющиеся свойства, т.е.

Код:

.label {
display: none
}
.label:hover {
display: block
}

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

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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

В смысле?

ну прочитайте хоть одну книжку.
.class:hover {
...
}
не применяет стиль к
.class {
...
}

поэтому если у вас описано
.родитель:hover .ребенок {

}, то .ребенок применяется только когда hover над родителем.
вот и сидит у вас текст без какого либо стиля (без .ребенок) пока мыша не над родителем.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 03:26 21-08-2020 | Исправлено: Mavrikii, 03:27 21-08-2020

Silver Member

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

VVL99
Точно, спасибо за ответ! Правда, только что, перед тем, как зайти на форум, нашёл подобный ответ на другом сайте. Но вопрос, на hover обязательно добавлять display:block, если там уже указан inline-block ? Пример обновил.

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

VVL99

Silver Member

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

WONDROUS (пост)
Цитата:

на hover обязательно добавлять display:block, если там уже указан inline-block ?

Нет конечно, это был просто пример. Если вначале элемента не должно быть видно, то мы его прячем к примеру через display: none, а затем при наведении курсора на его родителя, мы меняем значение display на любое подходящее - http://htmlbook.ru/css/display
Так же можно к примеру и цвет фона менять и другие свойства, и даже сделать плавное изменение и.т.д., просто нужно один раз понять механику всего этого, и тогда придёт понимание.

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

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору VVL99 Спасибо за информацию! А кто может подсказать, можно ли в Bootstrap 4.0.0a сделать разный цвет тултипов на одной странице? Может, как-то id им присвоить?
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 03:17 22-08-2020

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS https://stackoverflow.com/a/53949172
	Всего записей: 15684 \| Зарегистр. 20-09-2014 \| Отправлено: 05:01 22-08-2020

Silver Member

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

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

Код:

.tooltip-inner {
background-color: red;
}

.tooltip.in {
opacity: 1;
}

.tooltip.tooltip-bottom .tooltip-arrow,
.tooltip.bs-tether-element-attached-top .tooltip-arrow {
border-bottom-color: red;
}

Пробовал id ставить перед классами и так, как по той ссылке, тогда цвет становится по-умолчанию, то есть чёрный.

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

VVL99

Silver Member

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

Цитата:

только один цвет для одной страницы.

Уберите присвоение цвета из hover и добавьте цвет для каждого элемента отдельно.
https://jpegshare.net/images/90/3d/903d7738b6049bf7b68a93164b0aebb8.png

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

Всего записей: 4158 | Зарегистр. 03-02-2011 | Отправлено: 14:39 22-08-2020 | Исправлено: VVL99, 14:41 22-08-2020

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору VVL99 Речь про цвет tooltip в бутстрап
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 14:58 22-08-2020

VVL99

Silver Member

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

WONDROUS
Я как раз и предполагал, что вам полезно будет понять принцип действия, ведь там наверно тот же, или нет? Или есть принципиальные отличия и подобное там уже не сработает?

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

Всего записей: 4158 | Зарегистр. 03-02-2011 | Отправлено: 16:08 22-08-2020 | Исправлено: VVL99, 16:28 22-08-2020

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

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

плохо смотрели
https://jsfiddle.net/te08bkvL/

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

Silver Member

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

Mavrikii
Хм, спасибо за ответ, позже попробую.

Опять что-то не то или не так сделал. В этом примере при добавлении ссылки в надпись (на синем значке), кнопка уменьшается/обрезается. Если в a убрать position:absolute, то кнопка становится нормального размера. Что не то и как исправить?

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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

кнопка уменьшается/обрезается

потому что ссылка, хоть и с абсолютным позиционированием, находится внутри блока. высота которого расчитывается и с учетом высоты ссылки (если убрать для нее абсолютное позиционирование - станет видно).
ссылка должна быть внутри .card, а не после нее.

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

Silver Member

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

Mavrikii
Понятно, спасибо. Только внутрь .card не получится ссылку вставить. Хоть у ссылки и свой id есть, а толку никакого.

Кстати, если сделать a .badge_in, а не просто а, тогда кнопка нормально видна, но при этом тултип снова оказывается слева внизу.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 22:54 22-08-2020 | Исправлено: WONDROUS, 23:08 22-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