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

TheBarmaley

Platinum Member

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

Mavrikii
Цитата:

зачем?

затем, что шрифт может лежать не на самом сайте и в нынешние времена есть ненулевая вероятность, что браузер просто не будет грузить его со стороннего ресурса. сопссно, по этой причине и была сделана конвертация - цсс (пока ещё)) можно грузить откуда угодно. а вот с фонтом есть грабли в этом случае, уже сталкивался с ограничениями кросс-оригин и т.п.. поэтому и возник "вопросик" - я НЕ хочу грузить фонт как есть, а хочу юзать его бейс64-версию в виде цсс, чисто с т.з. универсальности доступа к нему.

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

про ссылки - да, я в курсе, спасибо. все эти трюки (когда-то)) были просмотрены.. ну, пусть не совсем все, но около того..)
что касается "популярности" - да пофиг, если решение рабочее - оно не имеет "срока давности", особенно - если оно простое..)

----------
..the one of.. ··· ..sam-&-pol..

Всего записей: 17873 | Зарегистр. 07-06-2006 | Отправлено: 23:24 25-06-2024

BANNED

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

Mavrikii

Цитата:

зачем? я же привел пример перечисления разных типов файлов для одного шрифта

он же не понимает. может вот так, с комментариями, поймет:

Код:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* современные браузеры */
url('webfont.woff') format('woff'), /* старые браузеры */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* старые iOS */
}

Всего записей: 4985 | Зарегистр. 14-09-2007 | Отправлено: 00:57 26-06-2024

TheBarmaley

Platinum Member

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

угу.. понятия "формат/тип файла" - ~~цэ москальска лже-наука~~ нам незнакомо..

----------
..the one of.. ··· ..sam-&-pol..

Всего записей: 17873 | Зарегистр. 07-06-2006 | Отправлено: 05:48 26-06-2024

useretail BANNED	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору TheBarmaley видать комментарии не помогли написано же: woff2 / woff если первый не поддерживается, то грузится следующий что не понятно?
	Всего записей: 4985 \| Зарегистр. 14-09-2007 \| Отправлено: 06:12 26-06-2024

TheBarmaley

Platinum Member

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

для особо "задумчивых" повторюсь:
Цитата:

разве там можно задать цсс-файл в качестве урл? и как тогда быть с "формат" - это же (теперь) НЕшрифтовый файл?
если "да/без разницы", тогда вопрос снят.. вообще-то, раньше так и было сделано, а потом шрифты конвертнули в цсс....

+
Цитата:

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

короче, иди уже, здесь не подают..

Всего записей: 17873 | Зарегистр. 07-06-2006 | Отправлено: 06:40 26-06-2024

TheBarmaley

Platinum Member

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

..короче, решил задачку с проверкой клиента через цсс. просто добавил к импорту проверку суппорта:
Код:

@import supports(text-orientation) url('...woff2.css');
@import supports((not(text-orientation))) url('...woff.css');

потыкал в старых браузерах - в 29/31/36 движках грузит вофф1, а в 48+ (до 122) - вофф2, как и хотелось.. ну, практически...

для контроля проверил ещё м в 17-м хроме, фонт грузит правильный, но там уже другие грабли - скрипты не рассчитаны на "раритет"..))

----------
..the one of.. ··· ..sam-&-pol..

Всего записей: 17873 | Зарегистр. 07-06-2006 | Отправлено: 15:15 26-06-2024 | Исправлено: TheBarmaley, 15:15 26-06-2024

BANNED

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

TheBarmaley

Цитата:

решил задачку с проверкой клиента через цсс

браво! теперь точно заживем!
вместо того, что-бы разобраться почему cross-origin не работает, выдумывать вот такие костыли это просто

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

Всего записей: 4985 | Зарегистр. 14-09-2007 | Отправлено: 17:52 26-06-2024

TheBarmaley Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору ..почему-то я даже не удивлён.. по сути наброса - дык, кроссоригин, как раз, и работает, только задача в том и стояла, чтобы он не мешался под ногами..
	Всего записей: 17873 \| Зарегистр. 07-06-2006 \| Отправлено: 18:13 26-06-2024

useretail BANNED	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору TheBarmaley тогда это про вас: https://pikabu.ru/story/chuzhoy_kod_5762938 бессмысленный флуд, запрет на 3 дня
	Всего записей: 4985 \| Зарегистр. 14-09-2007 \| Отправлено: 18:36 26-06-2024 \| Исправлено: useretail, 18:38 26-06-2024

Maksimus772 Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору дратути вопрос наверное не по теме, звиняюсь за оффтоп, а если кто знает, подскажите ветку.. Подробнее...
	Всего записей: 266 \| Зарегистр. 24-10-2011 \| Отправлено: 20:14 19-07-2024

Mavrikii

Platinum Member

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

Maksimus772
1) при чем тут css?
2) любой скрипт, что отслеживает событие прокрутки.
3) стоит блокировщик рекламы и ничего не
4) старая статья, но смысл не меняется
https://habr.com/ru/articles/149053/
5) тема - вопросы по javascript

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 20:44 19-07-2024 | Исправлено: Mavrikii, 20:44 19-07-2024

Silver Member

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

Приветствую,
на странице имеется slick-slider, под виндовс в браузерах из-за выхода управляющих стрелок за пределы контейнера появляется горизонтальный скролл. Как убрать скроллбар таким образом, чтобы не обрезать стрелки?
Под Mac os никакого скроллбара нет.

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 08:03 23-08-2024

Mavrikii

Platinum Member

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

Weinaum

Цитата:

body.ux .fullwidth {
width: 100%;
}

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 11:29 23-08-2024

Demon

Full Member

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

Есть вот такие кастомные чекбоксы:

<!DOCTYPE html>
<html lang="ru">
<head>
<STYLE>
/* From Uiverse.io by CheekyTurtle */
.days-btn-container {
display: flex;
width: 400px;
align-items: center;
justify-content: space-evenly;
height: 34px;
}

.day-btn {
display: none; /* Hide the original checkbox */
}

.day-label {
background-color: transparent;
font-size: 11px;
font-weight: 600;
color: green;
cursor: pointer;
border: 3px solid green;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
}

/* Apply styles for the selected state */
.day-btn:checked + .day-label {
border: 3px solid red ;
border-radius: 50%;
color: red;
}
</STYLE>
</head>
<body>
<div class="days-btn-container">
<input class="day-btn" id="-1" type="checkbox" checked="false" />
<label class="day-label" for="-1">-1</label>

<input class="day-btn" id="1" type="checkbox" checked="true">
<label class="day-label" for="1">1</label>

<input class="day-btn" id="2" type="checkbox" checked="false" />
<label class="day-label" for="2">2</label>

</div>
</body>

Проблема в том, что изначальное значение checked не влияет на отображение. Как подправить, что бы checked="true" и checked="false" отображались по разному?

Всего записей: 597 | Зарегистр. 03-10-2001 | Отправлено: 14:08 03-09-2024

Mavrikii

Platinum Member

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

Demon
https://jsfiddle.net/q9hxytdo/

Цитата:

<div class="days-btn-container">
<input class="day-btn" id="-1" type="checkbox">
<label class="day-label" for="-1">-1</label>

<input class="day-btn" id="1" type="checkbox" checked>
<label class="day-label" for="1">1</label>

<input class="day-btn" id="2" type="checkbox">
<label class="day-label" for="2">2</label>

</div>

там, где не отмечено, атрибута checked быть вообще не должно.

ps: id не должен начинаться с цифры

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

Demon

Full Member

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

Mavrikii
Благодарю!

Цитата:

ps: id не должен начинаться с цифры

Это уже исправил.

Всего записей: 597 | Зарегистр. 03-10-2001 | Отправлено: 08:16 04-09-2024

Vladsvn

Member

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

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

Есть текстовая строка и рядом с ней картинка. Строка центрирована по вертикали относительно картинки, а вся конструкция центрирована по горизонтали.

Но почему-то если текст занимает больше одной строки, то картинка отлетает влево и уменьшается в размерах. На скриншоте это хорошо видно. https://ibb.co/3dGRLCm

Почему так и как это исправить?

Вот коды обоих вариантов.

<div style="width: 100%; display: flex; justify-content: center; align-items: center;">
<div style="width: 8vw; height: 8vw; display: flex; align-items: center; margin-right: 10px;">
<img src="/agreement.jpg" alt="Соглашение об обработке персональных данных" style="width: 100%; height: auto;">
</div>
<h2 style="margin:0; font-size:26px; text-align:center;"><a id="step2"></a>5. Соглашение об обработке</h2>
</div>

<br><br>

<div style="width: 100%; display: flex; justify-content: center; align-items: center;">
<div style="width: 8vw; height: 8vw; display: flex; align-items: center; margin-right: 10px;">
<img src="/agreement.jpg" alt="Соглашение об обработке персональных данных" style="width: 100%; height: auto;">
</div>
<h2 style="margin:0; font-size:26px; text-align:center;"><a id="step2"></a>5. Соглашение об обработке персональных данных</h2>
</div>

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 22:15 18-09-2024

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Vladsvn потому, что используете flex. оно пытается впихнуть все, а если не получается, то сжимает.
	Всего записей: 15684 \| Зарегистр. 20-09-2014 \| Отправлено: 00:29 19-09-2024

TheBarmaley

Platinum Member

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

Mavrikii
Цитата:

id не должен начинаться с цифры

..но - если подходить с принципиальной т.з. - может.. но токмо с бубном..))
если что:
Цитата:

<ident> - CSS

Additionally, an identifier must not start with an unescaped digit, and must not start with an unescaped hyphen followed by an unescaped digit.

а также: https://developer.mozilla.org/docs/Web/CSS/ID_selectors#examples

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

----------
..the one of.. ··· ..sam-&-pol..

Всего записей: 17873 | Зарегистр. 07-06-2006 | Отправлено: 07:00 19-09-2024

Vladsvn

Member

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

Цитата:

потому, что используете flex.

Спасибо!
Можно ли решить эту проблему на flex? Или это заведомо невозможно и надо искать другие методы?
(На CSS Grid получилось тоже самое)

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 09:04 19-09-2024 | Исправлено: Vladsvn, 14:02 19-09-2024

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

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

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