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

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



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Xrobak
Ох, нагуглил, ну какой же гемморой, выдернуть руки разработчикам CSS мало. Для того чтобы цвет и фон поменять нужно с бубном прыгать. А старая опера 10 просто делает так и все. color:red - значит красный,  а тут ужасы http://dimox.name/custom-checkboxes-and-radio-buttons-using-css-only/

Всего записей: 1633 | Зарегистр. 08-10-2011 | Отправлено: 17:29 01-07-2015 | Исправлено: xerpal, 17:30 01-07-2015
Mavrikii

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

Цитата:
выдернуть руки разработчикам CSS мало.

а не проще в конечном скрипте, куда отправляются данные, считать иначе?

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 00:58 02-07-2015
Xrobak

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

Цитата:
А старая опера 10 просто делает так и все

На то она и старая опера) Вот тут есть поддержка опера 9+ https://toster.ru/q/207441
В предыдущий запрос добавьте фразу опера и посмотрите, может найдете еще более раннюю поддержку версий оперы.
А так да, в верстке много есть нюансов, к-рые хотелось бы чтобы работали без костылей. Может через пару лет все так и будет, а пока - имеем то что есть и адаптируемся.

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 10:00 02-07-2015
stupom



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

Цитата:
нажатие выглядело как отжатие и наоборот

Нарисуйте рамку и используйте border-style: inset/outset

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 21:57 04-07-2015
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
подскажите, плз, где то накосячил, но не могу найти, где точно:
речь о background video вот тут
вот демо на оригинальный шаблон - демо
Проблема, что на больших экранах в оригинальном видео растягивается на всю ширину экрана, а у меня - нет.
Я вижу, что в оригинале размеры видео меняются динамически, в зависимости от ширины, это все делается посредством js скрипта jquery.backgroundvideo.min.js.
у меня почему то скрипт не захотел сработать, возможно, конфликт скриптов - прописал просто в код, но вот на большом экране увидел проблему...
Дело усложняется в том, что если вместо width:auto прописать width:100%, то на больших экранах все нормально, но тогда возникают проблемы на экранах мене 20" - пустое место под видео...
Можно ли как решить проблему вручную или все же только заставить работать скрипт?

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 14:41 21-07-2015
Mavrikii

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

Цитата:
Проблема, что на больших экранах в оригинальном видео растягивается на всю ширину экрана, а у меня - нет.  

на больших - на каких? на FullHD все нормально.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 19:14 21-07-2015
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
человек смотрел на 2560x1140 - 27’

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 23:35 21-07-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Weinaum
width:100% вместо width: auto;

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 23:42 21-07-2015
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
спасибо, заставил скрипт работать - вопрос снят.

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 01:27 22-07-2015
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вопрос по размеру фона, если задано background-size contain, то картинка растягивается по ширине и высоте блока (окна браузера)? А если надо, например, чтобы картинка растягивалась по высоте и повторялась по ширине/горизонтали, тогда как?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 20:12 27-07-2015
Weinaum



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

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 09:34 28-07-2015
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
Растягивается по высоте и повторяется по горизонтали окна браузера:

Код:
html {
    height: 100%;
}
body {
    background-image:url('your-image.jpg');
    background-repeat: repeat-x;
    background-size: 100px 100%;
}

Вместо 100px укажи свои размеры картинки по ширине.

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 10:47 28-07-2015
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Xrobak
Спасибо за совет, попробую.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 14:30 28-07-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Weinaum
размер вашего header определен через padding контейнера в нем.  
поэтому все так и сужается. либо нужно через javascript менять это исходя из размеров окна, либо искать другой подход, возможно с другой версткой.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 07:07 29-07-2015
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо, да, вы правы - в данном случае наверное через js был бы наиболее правильный подход.
Проблема, что я не силен в js, т.е. использовать готовые решения и как то подогнать под себя еще туда-сюда, а написать свое решение...
Поэтому подумал, что пока не найду готового решения, разобью по стилям на @media - будут скачки конечно, но в принципе ведь тоже выход...

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 09:12 29-07-2015
stupom



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

Цитата:
наверное через js был бы наиболее правильный подход

-вот это уже не верно. CSS - совершенно достаточно для любых разумных задач связанных с визуальной часть дизайна. JS следует использовать только для структурных изменений в документе.

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 10:19 29-07-2015 | Исправлено: stupom, 10:19 29-07-2015
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Не получается сделать картинку с прозрачным бордеров + ховер + текст поверху картинки и все это должно быть ссылкой. Пример http://jsfiddle.net/na1264y7/
 
Как видно из примера, ссылкой тут получается только текст в спане. Да, можно тег А вынести перед дивом и все будет работать, но, мне это не подходит. Проблема в том, что когда так сделать и вставить в редактор скедитор, то в базу сохранится хтмл код как показан у меня в примере. Почему-то скедитору (или друпалу) не нравится див завернутый в ссылку. Есть идеи как победить сие безобразие с такой разметкой? А то уже задолбался пробовать)

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 17:28 12-08-2015
Mavrikii

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

Цитата:
CSS - совершенно достаточно для любых разумных задач связанных с визуальной часть дизайна

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

Цитата:
не нравится див завернутый в ссылку

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

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 19:49 12-08-2015
stupom



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

Цитата:
блочные элементы не могут быть в инлайновых

-отстали от жизни, A в HTML5 не инлайновый.
 
Добавлено:

Цитата:
особенно когда нужно менять стиль при определенных критериях

-это и есть неразумно. "Критерий" является сущностью и должен влиять только на сущность, а не на оформление.

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 21:40 12-08-2015
Mavrikii

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

Цитата:
-отстали от жизни, A в HTML5 не инлайновый.

откуда я знаю что использует он? раз ckeditor портит, значит, видимо, не тот доктайп или еще что то.
 

Цитата:
это и есть неразумно.

ну попробуйте сделать то, о чем он просит, на чистом css.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:51 12-08-2015
Открыть новую тему     Написать ответ в эту тему

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

Рейтинг.ru