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

Открыть новую тему

Написать ответ в эту тему

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	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору D1D1D1D li:has(>trl) { }
	Всего записей: 15117 \| Зарегистр. 20-09-2014 \| Отправлено: 02:23 29-03-2023

D1D1D1D Advanced Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо! А есть ли аналог для не новейших браузеров? На версии Chromium 102 у меня не работает, а новейшая — 114.
	Всего записей: 1368 \| Зарегистр. 05-04-2010 \| Отправлено: 06:06 29-03-2023

Mavrikii

Platinum Member

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

D1D1D1D

Цитата:

А есть ли аналог для не новейших браузеров?

нет, это то, чего очень долго ждали, чтобы можно было выбрать родителя по потомку.
https://caniuse.com/css-has

можно с помощью js/jQuery добавить класс.

Всего записей: 15117 | Зарегистр. 20-09-2014 | Отправлено: 06:48 29-03-2023 | Исправлено: Mavrikii, 07:18 29-03-2023

D1D1D1D Advanced Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Как это будет на jQuery?
	Всего записей: 1368 \| Зарегистр. 05-04-2010 \| Отправлено: 07:36 29-03-2023

Mavrikii

Platinum Member

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

D1D1D1D

Цитата:

Как это будет на jQuery?

$('trl').closest('li').addClass('имя_класса')
либо, если нужно чтобы был прямой родитель/потомок, то
$('trl').parent('li').addClass('имя_класса')

Всего записей: 15117 | Зарегистр. 20-09-2014 | Отправлено: 07:39 29-03-2023 | Исправлено: Mavrikii, 09:05 29-03-2023

D1D1D1D Advanced Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо!
	Всего записей: 1368 \| Зарегистр. 05-04-2010 \| Отправлено: 19:58 29-03-2023

D1D1D1D

Advanced Member

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

В файле стилей есть приведенные фрагменты. Первые два — назначают стиль отображения LI после класса "dx-scrollable-container" и "td". Третий стиль "abr" — выводит всплывающую подсказку. Проблема в том, что из-за "position: relative" в стилях для LI — всплывающая подсказка при наведении курсора скрывается под строками TD, несмотря на прописанное "position: absolute". Тогда как если убрать "position: relative" — стиль для тега LI разъезжается. Возможно ли дополнить стиль для "abr" так, чтобы он был поверх ".dx-scrollable-container td"?

Код:

.dx-scrollable-container td li {
    position: relative;
    list-style: none;
    margin-left: -0.2em;
    padding-left: 0.6em;
}
.dx-scrollable-container td li:before {
    content: "\2013";
    position: absolute;
    left: 0em;
    color:#888888;
}

abr[ttl]:hover:after {
opacity: 0.8;
content: attr(ttl);
z-index: 99999 !important;
position: absolute;
border: #c0c0c0 1px dotted;
margin: -50px 0px 0 180px;
padding: 10px;
display: block !important;
background-color: #000000;
color: #ffffff;
max-width: 200px;
text-decoration: none;
text-align:center;
}

Всего записей: 1368 | Зарегистр. 05-04-2010 | Отправлено: 05:01 30-03-2023

Mavrikii

Platinum Member

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

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

Всего записей: 15117 | Зарегистр. 20-09-2014 | Отправлено: 06:18 30-03-2023

D1D1D1D

Advanced Member

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

Mavrikii
Оказалось, что overflow тоже мешает:

Код:

.dx-datagrid-rowsview .dx-row > td, .dx-datagrid-rowsview .dx-row > tr > td {
overflow: hidden;
text-overflow: ellipsis;
}

Всего записей: 1368 | Зарегистр. 05-04-2010 | Отправлено: 06:46 30-03-2023

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору D1D1D1D ну, хорошо.. от нас что ожидаете? сказал как есть. может нужно подсказу цеплять не сюда или делать иначе. обычный title='текст' не устраивает?
	Всего записей: 15117 \| Зарегистр. 20-09-2014 \| Отправлено: 07:57 30-03-2023

D1D1D1D Advanced Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii title='текст' долго выводится, хотелось бы быстрого отклика
	Всего записей: 1368 \| Зарегистр. 05-04-2010 \| Отправлено: 15:12 30-03-2023

Mavrikii

Platinum Member

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

D1D1D1D

Цитата:

title='текст' долго выводится, хотелось бы быстрого отклика

тогда без всего остального сказать сложно.

Всего записей: 15117 | Зарегистр. 20-09-2014 | Отправлено: 21:44 30-03-2023

Vladsvn

Member

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

Добрый вечер!

Вот здесь http://fh7929mi.bget.ru/32.html есть макет странички сайта. Если кликнуть на колокольчик, то всплывает окно со списком.

В первой строке слева фотография. На этом фото справа внизу находится зеленый прямоугольник, который туда специально размещен.

А на второй строке вместо фото находится заглушка с цветным фоном и буквами ВБ. На этой заглушке тоже нужно разместить зеленый прямоугольник (по аналогии с первой строкой). Но у меня это не получается...

Какой тут нужен код?

Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 18:32 01-04-2023 | Исправлено: Vladsvn, 18:47 01-04-2023

Mavrikii

Platinum Member

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

Vladsvn

Цитата:

Какой тут нужен код?

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

https://jsfiddle.net/3yqhr4L8/
лучше, конечно же, чтобы размеры аватаром были стандартные.

Всего записей: 15117 | Зарегистр. 20-09-2014 | Отправлено: 22:08 01-04-2023

Vladsvn

Member

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

Цитата:

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

А каковы стандартные размеры?

* * *

Получилось не очень хорошо - вот взгляните: http://fh7929mi.bget.ru/32-2.html

Картинка сползла вниз, и буквы NA тоже ушли на нижнюю строку: https://i.ibb.co/dKyVWDW/1.jpg .

(Зеленые квадратики я умышленно сместил вниз и вправо - так и задумано).

Для простоты я разместил стили в теле страницы.

* * *

Ничего, если я прямо сюда влезу еще с одним вопросом?

Хотел попробовать верстку Grid. Макет простейшей страницы разместил вот здесь: http://fh7929mi.bget.ru/test-14-1.html .

И сразу в браузере получил сообщение:
"Свойство display: block препятствует работе свойства grid-column-end.
Попробуйте установить для свойства display значение, отличное от block.".

Но display: block устанавливает сам браузер (посмотрите скриншот https://ibb.co/y8Y5dtK ). Смотрел в Хроме и Яндексе - везде одинаково. В браузерах последняя версия.

Непонятно, что у меня не так, и как же, в таком случае, применять этот Grid ?

Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 12:40 02-04-2023 | Исправлено: Vladsvn, 13:09 02-04-2023

Mavrikii

Platinum Member

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

Vladsvn

Цитата:

А каковы стандартные размеры?

сколько для себя решите, столько и будут стандартными. речь о том, чтобы все одинаково было на сайте.

Цитата:

Картинка сползла вниз, и буквы NA тоже ушли на нижнюю строку

я показал просто пример, а не переделывал ваше.

line-height: 100px; - его нужно выставлять по размеру картинки, поэтому и говорил о стандартном. это именно чтобы NA был по центру.

Цитата:

Но display: block устанавливает сам браузер

для любого элемента вы можете указать ему display: inline или inline-block
но как используется - смотреть тут https://css-tricks.com/snippets/css/complete-guide-grid/
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
ps: из последнего и взяли.

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

Всего записей: 15117 | Зарегистр. 20-09-2014 | Отправлено: 21:50 02-04-2023 | Исправлено: Mavrikii, 22:05 02-04-2023

Vladsvn

Member

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

С этим разобрался, спасибо!

Но выявилась другая и очень сложная проблема.

Вот здесь http://fh7929mi.bget.ru/32-4.html сверстаны две картинки. Цифры чуть выше колокольчика и слегка наползают на него. Все хорошо. Цветной фон просто для удобства.

А вот здесь http://fh7929mi.bget.ru/32-5.html колокольчик запускает скрипт подкачки уведомления, и всё развалилось!
Мало этого - у колокольчика появилась черная рамка и тени, что весьма не желательно.

Кроме того, скрипт надо запускать не только кликом по колокольчику, ни и кликом по области с цифрами 3.7.

Как все это исправить? Убрать рамку и тени, запускать по клику на колокольчик и область цифр.

Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 10:58 03-04-2023

Mavrikii

Platinum Member

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

Vladsvn

Цитата:

Мало этого - у колокольчика появилась черная рамка и тени, что весьма не желательно.

потому что, по умолчанию, у button есть рамка и эффекты нажатия.

Цитата:

Кроме того, скрипт надо запускать не только кликом по колокольчику, ни и кликом по области с цифрами 3.7

ссылкой сделать общего родителя.

Всего записей: 15117 | Зарегистр. 20-09-2014 | Отправлено: 11:11 03-04-2023

Vladsvn

Member

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

Цитата:

по умолчанию, у button есть рамка и эффекты нажатия

Избавиться от этого невозможно?

Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 11:52 03-04-2023

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Vladsvn border: none
	Всего записей: 15117 \| Зарегистр. 20-09-2014 \| Отправлено: 11:57 03-04-2023

Открыть новую тему

Написать ответ в эту тему

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