Вопросы к разделу «Декоративные элементы»

htmlcss-1__section-7.md

Вопросы к разделу «Декоративные элементы»

Позиционирование и z-index

Можно ли в слайдере глейси размещать текст на мороженом и кнопку с помощью позиционирования? Если это некорректный способ, нужно использовать z-index?

Попробуйте расположить текст и кнопку с помощью флексов, а картинку с мороженым вставить фоном. В этом случае вам не понадобится ничего позиционировать. Но если захочется, то да — этo position: absolute + z-index, только не забудьте проверить вёрстку на переполнение контентом: текст над кнопкой может быть не только в две, но и в одну, три и больше строк.

Что важнее: 100% соответствие макету или кратность 5px?

Здравствуйте! Иногда на макетах встречаются маргины, паддинги и др. элементы с размерами не кратными 5-ти пикселям (9px, 47px, 31px и т.д.). На прошлом потоке Александр Першин говорил, что это ошибки дизайнеров. Собственно вопрос: Что важнее при верстке на нашем курсе, и на работе: 100% соответствие макету или кратность 5-ти пикселям?

Кратность или некратность 5px ничего не говорит о качестве дизайна или вёрстки. На лекции про графику, мы вам расскакзывали, что расстояние от текстовых блоков зависит от высоты строки и в таких ситуациях отступ может быть 15px, но нам приходится делать его 21px, чтобы попасть в визуальное соответствие. Ответ получается простой: 100% соответствие макету.

Позиционирование, left, right и прокрутка

Добрый день. Вопрос по поводу абсолютного позиционирования. Если использовать свойство left с отрицательным значением, то блок уйдет налево, но прокрутки не появится. Если же right, то прокрутка появляется. Почему это так и как это использовать?

Докопаться почему именно так может быть и было интересно, но большой пользы от этого не будет. Так работают все браузеры, с этим мы живём. Использовать это нужно только в том смысле, что если вам нужно по какой-то причине что-то спрятать за пределами экрана, то делайте это слева, а не справа.

Как сделать слайдер в Глейси?

Как сделать слайдер в Глейси? В интерактивных курсах рассмотрен вариант с флоатами. Можно ли его использовать? Если использовать флексы и overflow: hidden, то все расползается и элементы никак не хотят выстраиваться в ряд, друг под другом. Изображения с мороженым экспортировала в png – нужна прозрачность. А как быть с эффектом подсветки, который появляется на всех слайдах? Это декоративный эффект в CSS или его также экспортировать в png для каждого слайда?

Слайдер вам лучше обсудить с вашим наставником. Тут не будет какого-то совета, а вам скорее всего нужна вёрстка с примером.

Почему для .visually-hidden добавили именно такие селекторы в Барбершопе, а не просто название класса?

.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
}

Почему для ссылок в меню мы задаём display: block, но используем vertical-align: middle, которое не работает для блочных элементов?

Подскажите, как верстать промо-блок («материалы», «инструмент», ...) в проекте Техномарт?
Флексом не получается - последний элемент не хочет вставать на свое место. А если сделать двумя колонками, то как мне кажется, тест на переполнение не будет пройден.

@lehardd, править нужно, но я не подскажу. Нужно узнавать у вашего наставника.

@egolikov
Вопрос про visually-hidden, селектор всегда можно расширить. В барбершопе мы решили ,что все чекбоксы и радио-кнопки должны иметь поведение visually-hidden

@egolikov
Вопрос про display: block и vertical-align: middle - это баг. Осталось с прошлых версий верстки. Просто забыли удалить при рефаторинге

@altulin, к сожалению не подскажу. Уточните у вашего наставника.
Но просто так не получится это сделать. Всегда будут, либо дополнительные обёртки или дополнительный громоздкий CSS-код

Вопрос про оформление чекбоксов и радиокнопок: необходимо, чтобы при состоянии disabled менялся цвет и чекбоксов и подписей к чекбоксам. Если я кладу input внутрь label, то могу кликать и на label и на сам чекбокс, чтобы нажать на него. Но в таком случае у меня не получается выбрать label при состоянии input disabled, чтобы поменять у него цвет (тк я не знаю, как выбрать родительский элемент с помощью селекторов, только соседние). Если input, label рядом, то сами кнопки и чекбоксы не выбираются (только если кликнуть на label). Не знаю, как сделать кликабельными чекбоксы и радиокнопки.

@thelera

Если я кладу input внутрь label, то могу кликать и на label и на сам чекбокс

При такой вложенности, оформить не получится, нужно пользоваться адресацией через id и for

Если input, label рядом, то сами кнопки и чекбоксы не выбираются

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

@thelera, вы можете оформить чекбокс через label::before. Тогда нажатие и на визуальный элемент, и на лейбл будет активировать инпут чекбокса.

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

Я так и сделала. Но в этом случае не могу выбрать label при input:checked, чтобы задать label новый цвет

@thelera, вы можете оформить чекбокс через label::before. Тогда нажатие и на визуальный элемент, и на лейбл будет активировать инпут чекбокса.
Правильно я понимаю, что в этом случае label не будет фокусироваться с клавиатуры?

@thelera, по умолчанию не будет. Но вы можете добавить фокусировку вручную, как Вадим показывал на лекции.

Здравствуйте! У меня проект Седона.
Если ставлю iframe с картой, то не нравится, что сквозь футер просвечиваются интерфейсные кнопки для изменения масштаба.

Есть ли доступный для начального уровня способ их отключить?

@lazyrider я увеличил размер карты сделал overflow: hidden;
таким образом кнопки уехали за пределы родительского блока и были скрыты. решение не совсем красивое конечно, но визуально красиво.

@lehardd , спасибо за совет! Так как других предложений не поступило, позаимствую твое решение! Спасибо!