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

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

Цитата:
И ещё я имел ввиду, что нет ли чего лишнего в CSS к самому "слайдеру"? Или в нём чего-то наоборот не хватает?

это вам решать - добились вы желаемого результата или нет.
 

Цитата:
Если высота 100%

если 100% картинки, то будет высота картинки.
 

Цитата:
И ещё полоска в 1px снизу.

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

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 23:11 15-10-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Пустые места в конечном коде образуются потому, что в коде есть if, это такая специфика редактора, если можно так сказать.
Если для .images сделать display: flex, то отступ снизу пропадает, но тогда косяки проступают при добавлении ссылок или эффекта "лайтбокс".

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 00:22 16-10-2020
Mavrikii

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

Цитата:
если можно так сказать

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

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
На счёт этого не знаю, честно говоря.
 
P.S. сделал display: inline-flex и vertical-align: top, отступ снизу пропал. Тогда зачем flex-direction: row и flex-wrap: nowrap?

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 00:40 16-10-2020 | Исправлено: WONDROUS, 01:37 16-10-2020
WONDROUS



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

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

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

Цитата:
@font-face для шрифта, чтобы во всех браузерах работало


Цитата:
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 19:39 30-10-2020
WONDROUS



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

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



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 04:30 31-10-2020 | Исправлено: WONDROUS, 04:33 31-10-2020
Mavrikii

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

Цитата:
А то картинки и текст немного дрожат при движении

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

Цитата:
@keyframes и transform

https://cssanimation.rocks/transition-vs-animation/

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 07:09 31-10-2020
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Приветствую, подскажите, как бы грамотнее всего центрировать текст по вертикали, чтобы текст всегда находился на воображаемой средней линии текста?
В svg для этого есть свойство alignment-baseline, а как быть если текст html?
Применительно, скажем, в такой задаче - если размер шрифта динамически изменяемый
Если текста только одна строка, то выход найти легко, как пример:
 
Пример 1
 
 
слева - html, справа - svg.  
Тут все более менее похоже, flex и одна строка по центру.
 
А вот пример с тремя строками - и я хочу расположить строки в строго определенных местах и центрировать их так же как в случае с svg, чтобы они не разлетались кто куда.  
Пока в голову приходит только абсолютное позиционирование для каждой строки, с line-height 12.5% от высоты общего контейнера(в моем случае line-height 25px и топ для каждой абсолютно позиционируемой строки 37.5, 87.5 и 137.5 px.  
Не знаю, насколько правильное решение, может есть более корректное или грамотнее и проще можно сделать?

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 00:29 20-11-2020 | Исправлено: Weinaum, 08:54 20-11-2020
Xant1k



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Кстати тоже интересно как НАД воображаемой линией по центру.

Всего записей: 2918 | Зарегистр. 20-02-2009 | Отправлено: 00:51 20-11-2020 | Исправлено: Xant1k, 00:54 20-11-2020
Mavrikii

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

Цитата:
в строго определенных местах  

и как эти места определены?
а так

Цитата:
display: flex;
flex-direction: column;

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
Xant1k

Цитата:
Кстати тоже интересно как НАД воображаемой линией по центру

https://developer.mozilla.org/ru/docs/Web/CSS/vertical-align
примеры.. центр чего?

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 00:58 20-11-2020 | Исправлено: Mavrikii, 01:01 20-11-2020
Xant1k



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Да вон как в примере выше, у SVG 3 линяя, только если по центру.
 
А как расположить текст по центру я знаю, лол.

Всего записей: 2918 | Зарегистр. 20-02-2009 | Отправлено: 11:25 20-11-2020
Weinaum



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

Цитата:
и как эти места определены?

это второстепенно - например, в моем примере с тремя строками это центральные линии- высота разбита на 3 части и по центру каждой проходит центр текста.  
Если это будет 2 строки, то они могут позиционироваться по другому - равные отступы сверху и снизу(например, в центре будет какое то лого).  
Важно что для строк координаты будут заданы - неважно, каким образом, я вот задаю топ при абсолютном позиционировании. В принципе, как работает, меня устраивает, думал, что может есть что более простое, как alignment-baseline для svg.  
 

Цитата:
а так
 
Цитата:
display: flex;
flex-direction: column;

 
так у меня во втором примере так и есть, но если не задавать абсолют и line-height то строки при увеличении шрифта на своих линиях не остаются.  

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 13:03 20-11-2020
Mavrikii

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

Цитата:
Да вон как в примере выше, у SVG 3 линяя, только если по центру.

вы не умеете объяснять.
 
Weinaum

Цитата:
Важно что для строк координаты будут заданы - неважно, каким образом, я вот задаю топ при абсолютном позиционировании. В принципе, как работает, меня устраивает, думал, что может есть что более простое, как alignment-baseline для svg

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

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 22:24 20-11-2020 | Исправлено: Mavrikii, 22:32 20-11-2020
Weinaum



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

Цитата:
разница между svg и html в том, что в svg идет абсолютное позиционирование для строк, а в html в вашем случае нет и положение других строк зависит от количества текста, шрифта и остальных вещей каждой строки выше.
поэтому только с абсолюткой

Да я в общем тоже так понял. На том и остановлюсь пока.  

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 12:59 22-11-2020
Mavrikii

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

Цитата:
На том и остановлюсь пока

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

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 22:53 22-11-2020
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 00:01 25-11-2020
Mavrikii

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

Цитата:
но он работает сверху и снизу.

что мешает сделать его с одной стороны?
но иного способа нет https://coryrylan.com/blog/css-gap-space-with-flexbox

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 00:03 25-11-2020 | Исправлено: Mavrikii, 00:07 25-11-2020
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 00:38 25-11-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 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