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

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в 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
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
потому, что у второго ul нет text-align и вообще никакого стиля не применено

Цитата:
и почему не присвоился id?

это не задача css
 
если же речь о
Код:
#stacks_in_107_page0 ul.pics_img {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: center !important;
}

то ваши [% if %] все портят

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 05:43 02-06-2019 | Исправлено: Mavrikii, 05:48 02-06-2019
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 18:16 02-06-2019
Mavrikii

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

Цитата:
О том и речь, что должно примениться, но не делается.

потому что много мусора не имеющего отношения к css

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 18:35 02-06-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Это всё для редактора и настроек.
 
Если использовать display: flex, то как сделать, чтобы три большие картинки, идущие друг за другом, имели нормальное соотношение? То есть, чтобы высота у них не была вытянута?

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 19:20 02-06-2019
Mavrikii

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

Цитата:
Это всё для редактора и настроек

я понимаю, а вот браузер нет - отсюда и такая реакция.
 

Цитата:
то как сделать, чтобы три большие картинки

https://kartikprabhu.com/articles/equal-height-images-flexbox

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 19:23 02-06-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Я делал почти также, как было в подобных html/css, но что-то не то получилось.
 
Спасибо за ссылку. Это получается, что надо каждую картинку в контейнер и потом каким-то образом рассчитывать процент? Хотел ссылку на страницу написать, но в браузере вообще не так смотрится, как в Просмотре в редакторе.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 19:36 02-06-2019
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 22:54 02-06-2019
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 15:35 05-06-2019 | Исправлено: WONDROUS, 21:56 05-06-2019
Mavrikii

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

Цитата:
чтобы на мобильных устройствах не было переноса на новую строку

лучше с ним, а не ресайзить

Цитата:
как правильнее задавать размер картинке, по ширину или высоте?

смотря что нужно.
 

Цитата:
 и картинки при этом пропорционально уменьшались?

ширина в процентах от родителя.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 22:49 05-06-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ответ! По поводу переноса картинок или размера на мобильных, сделал отдельное указание размеров для мобильных, в пикселях. Поэтому, в общем-то, и возник вопрос о том, по какому критерию задавать размер. Везде в примерах пишут сначала ширину, потом высоту. В данном случае сделал указание размера по высоте, вроде нормально работает.
 
P.S. заметил ещё, что если файл SVG переименовать в PNG (с указанием размера), то он нормально показывается в браузере.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 23:17 05-06-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Если несколько картинок на одной линии и надо сделать отступ между ними, не затрагивая первую картинку, то насколько правильно делать так?

Код:
.pics img:not(:first-child) {
    margin-left: 10px;
}

 
И можно ли делать так, если картинки со ссылкой?

Код:
.pics a:not(:first-child) {
    margin-left: 10px;
}

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 18:30 06-06-2019 | Исправлено: WONDROUS, 18:32 06-06-2019
Mavrikii

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

Цитата:
то насколько правильно делать так?  

нормально.
 

Цитата:
И можно ли делать так, если картинки со ссылкой?

а попробовать ?) если работает, значит можно.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 23:35 06-06-2019
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 15:36 07-06-2019 | Исправлено: WONDROUS, 16:58 07-06-2019
WONDROUS



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

Код:
display: flex;
justify-content: center;

Читал на разных сайтах, про выравнивание на мобильных устройствах не нашёл.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 02:27 09-06-2019
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
https://caniuse.com/#feat=flexbox
поддерживается и мобильными браузерами, значит дело не в этом.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 05:58 09-06-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ссылку. Пока оставил как есть.
 
Ещё просьба подсказать, как в данном примере через CSS сделать размер смайликов больше? Размер получается 12px, а более-менее нормально они смотрятся/видны при 18px.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 14:57 11-06-2019
webproger



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
У вас же размер шрифта прям в разметке указан. В атрибуте style.

Код:
 
<span style="font: 12px AppleColorEmoji;">&#128526;</span>
 

Замените на 18px

Всего записей: 23 | Зарегистр. 02-06-2019 | Отправлено: 14:13 12-06-2019 | Исправлено: webproger, 14:14 12-06-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
webproger
Это понятно, вопрос в том, как в CSS прописать именно для смайликов, чтобы другое не затрагивало.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 18:43 12-06-2019
Mavrikii

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

Цитата:
вопрос в том, как в CSS прописать именно для смайликов

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

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 22:38 12-06-2019
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 01:08 13-06-2019
Открыть новую тему     Написать ответ в эту тему

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

Рейтинг.ru