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

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

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

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
 

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

Всего записей: 10048 | Зарегистр. 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?

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



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

Всего записей: 2874 | Зарегистр. 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 */
}

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



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

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



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

Всего записей: 2874 | Зарегистр. 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/

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



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

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



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

Всего записей: 2397 | Зарегистр. 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
примеры.. центр чего?

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



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

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



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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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



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

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

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

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

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

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



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

Всего записей: 2874 | Зарегистр. 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

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


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

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

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru