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

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

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

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
 

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

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

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Это понял, не понял, почему не используется общее значение для body Не пришло в голову, что за это отвечают разные селекторы (?).
 
Загуглил, нашёл строку

Код:
table { border: 1px #b0b0b0 solid; border-collapse: collapse; width: 885px;  margin-left: 5px; }

и исправил на

Код:
table { font-size: inherit; border: 1px #b0b0b0 solid; border-collapse: collapse; width: 885px;  margin-left: 5px; }

Вроде стало ровно, но, наверное, на всякий случай придётся почитать, что там и как и как делается правильно.

Всего записей: 5907 | Зарегистр. 28-01-2008 | Отправлено: 01:05 17-01-2020
D1D1D1D

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Привет. Можно ли добавить сбоку от абзаца текста вертикальную линию, но не от начала текста, а с середины? Вот тут визуализировал эти два варианта — https://jsfiddle.net/ejb58pso/ Видно, что во втором параграфе стиль отрабатывает некорректно.

Всего записей: 790 | Зарегистр. 05-04-2010 | Отправлено: 14:14 07-02-2020 | Исправлено: D1D1D1D, 14:16 07-02-2020
Mavrikii

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

Цитата:
 Видно, что во втором параграфе стиль отрабатывает некорректно.

потому что есть разница между строчными и блочными элементами.
https://html5book.ru/block-inline-elements

Всего записей: 9191 | Зарегистр. 20-09-2014 | Отправлено: 20:54 07-02-2020
D1D1D1D

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

Всего записей: 790 | Зарегистр. 05-04-2010 | Отправлено: 21:16 07-02-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D
в случае span - нет, потому что это строчный элемент, а не блочный. можно сделать только в отношении строки, но не многострочной записи.
можно линию рисовать в родительском блочном, но с положением возникнут проблемы.
 
и не совсем понятно, что пытались добиться подобным выделением в строке.

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D
А если добавить свойство display, это не приведёт к нужному результату?

Всего записей: 3497 | Зарегистр. 03-02-2011 | Отправлено: 21:51 07-02-2020 | Исправлено: VVL99, 08:59 08-02-2020
D1D1D1D

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

Цитата:
можно сделать только в отношении строки, но не многострочной записи.

Так это и применяется здесь в отношении одной строки, даже с условием, чтобы она не делилась. Там span не принципиален, может быть что угодно, лишь бы работало) Нужно это для быстрого применения в такой ситуации перевода в HTML: https://i.imgur.com/EpDvMp4.png
 
VVL99
 
display переводит на новую строку.

Всего записей: 790 | Зарегистр. 05-04-2010 | Отправлено: 23:30 07-02-2020 | Исправлено: D1D1D1D, 23:31 07-02-2020
Mavrikii

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

Цитата:
Нужно это для быстрого применения в такой ситуации перевода в HTML

не уверен, что сейчас это можно сделать на чистом CSS.
 
правда... https://jsfiddle.net/87svxcyj/
главное - не задавать left или right

Всего записей: 9191 | Зарегистр. 20-09-2014 | Отправлено: 23:55 07-02-2020 | Исправлено: Mavrikii, 00:10 08-02-2020
D1D1D1D

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Круто, спасибо!

Всего записей: 790 | Зарегистр. 05-04-2010 | Отправлено: 01:11 08-02-2020
VVL99



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

Цитата:
display переводит на новую строку.
Тогда наверно я не понял суть вопроса -  http://jsfiddle.net/cm9tje67/
Если это абзац, то перенос это нормально, а если нужно просто выделить нужный текст, то можно это сделать любым другим способом.

Код:
   .line {
    text-decoration: underline;
    text-decoration-color: #f00;
   }

Всего записей: 3497 | Зарегистр. 03-02-2011 | Отправлено: 09:05 08-02-2020 | Исправлено: VVL99, 09:41 08-02-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Не знаю, в какой теме это лучше спросить, но подскажите, пожалуйста, почему видео на этой странице не воспроизводится на телефонах? В обычных браузерах нормально всё, а на смартфонах нет.
 
Или так задумано, чтобы экономить трафик на мобильниках? И да, вопрос вроде как для темы html.

Всего записей: 2682 | Зарегистр. 30-06-2002 | Отправлено: 13:50 08-02-2020 | Исправлено: WONDROUS, 14:58 08-02-2020
Mavrikii

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

Цитата:
а на смартфонах нет

у меня играет, так что конкретнее версии браузеров.

Всего записей: 9191 | Зарегистр. 20-09-2014 | Отправлено: 23:34 08-02-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Mobile Safari 9.0. На других не знаю, проверить не на чем. Андройдов тоже нет в наличие, чтобы проверить.
 
А так, в html всё правильно прописано, достаточно этого?

Код:
<video preload="auto" autoplay muted loop /><source src="files/file.mp4" type="video/mp4"></video>

Всего записей: 2682 | Зарегистр. 30-06-2002 | Отправлено: 00:04 09-02-2020 | Исправлено: WONDROUS, 00:06 09-02-2020
Mavrikii

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

Цитата:
 />

наклонная черта не нужна, ибо тег закрывается через </video>

Цитата:
Андройдов тоже нет в наличие, чтобы проверить.

родной браузер самсунговского телефона играет.
 

Цитата:
Mobile Safari 9.0.

он поддерживает video тег
https://caniuse.com/#feat=video
 
ps: к CSS действительно никакого отношения.

Всего записей: 9191 | Зарегистр. 20-09-2014 | Отправлено: 00:09 09-02-2020 | Исправлено: Mavrikii, 00:10 09-02-2020
WONDROUS



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

Всего записей: 2682 | Зарегистр. 30-06-2002 | Отправлено: 14:06 10-02-2020 | Исправлено: WONDROUS, 19:46 10-02-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
при чем тут css?
через UA определяете на сервере или в самом браузере какой вариант его используется и делаете что нужно

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



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

Всего записей: 2682 | Зарегистр. 30-06-2002 | Отправлено: 23:42 10-02-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
http://hgoebl.github.io/mobile-detect.js/
https://coderwall.com/p/i817wa/one-line-function-to-detect-mobile-devices-with-javascript
https://developer.mozilla.org/ru/docs/Web/HTTP/Browser_detection_using_the_user_agent
на сервере - зависит от языка и модуля или кода обрабатывающего User Agent информацию.

Всего записей: 9191 | Зарегистр. 20-09-2014 | Отправлено: 23:45 10-02-2020 | Исправлено: Mavrikii, 23:46 10-02-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ссылки! Ну их пока, не работает видео на мобильных и ладно.
 
Ещё вопрос возник по оформлению текста для файла vtt (WEBVTT). В разных браузерах показывается разные размер фона (в Хром и Опера нормальный шрифт, но ширина фона от края до края, в Сафари фон только вокруг текста, но зато жирный большой шрифт). Как-то можно сделать, чтобы во всех браузерах показывалось одинаково или это опять же особенности каждого браузера?

Всего записей: 2682 | Зарегистр. 30-06-2002 | Отправлено: 19:13 12-02-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
https://css-tricks.com/improving-video-accessibility-with-webvtt/

Всего записей: 9191 | Зарегистр. 20-09-2014 | Отправлено: 23:26 12-02-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

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

Имя:
Пароль:
Сообщение

Для вставки имени, кликните на нем.

Опции сообщенияДобавить свою подпись
Подписаться на получение ответов по e-mail
Добавить тему в личные закладки
Разрешить смайлики?
Запретить коды


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

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

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru