Домашнее задание по CSS #2
Conversation
| @@ -14,54 +14,53 @@ | |||
| <div class="todo-container"> | |||
|
|
|||
| <div class="todo-header"> | |||
| <input aria-label="Add new todo" class="todo-newtodo-input" placeholder="What needs to be done?"> | |||
| <button aria-label="Check all as completed" class="todo-checkall-button"></button> | |||
| <div class="todo-checkall-button"><button aria-label="Check all as completed"></button></div> | |||
There was a problem hiding this comment.
- Пришлось изменить порядок элемнтов, нарушив accessibility. До этого элементы вставали на разные уровни.
- Не смог решить проблему расположения, не обернув элементы в блоки. Свойства block и inline-block не получалось применить так, чтобы проблема была решена.
There was a problem hiding this comment.
Нарушить порядок для accessibility не страшно (он к сожалению нарушен во всём интернете)
Смотри разбор дз. Там свёрстаны все кейсы согласно описанию в презентации https://cloud.mail.ru/public/6WdP/SKRjxXEpi
| <button aria-label="Delete todo item" class="todo-list-item-delete">Delete</button> | ||
|
|
||
|
|
||
| <div class="todo-list-item-button"><input type="checkbox" aria-label="Check as completed"></div> |
There was a problem hiding this comment.
Аналогичная проблема с расстановкой порядка элементов и оборачиванием в блоки. Если расположить textarea прежде остальных элементов, он расположится на уровне выше. Проблема возникает, когда расстягиваешь элемент на всю доступную ширину (width: 100%) для получения "резинового" элемента.
There was a problem hiding this comment.
width: 100% ставить не нужно.
См https://cloud.mail.ru/public/6WdP/SKRjxXEpi и разбор дз.
style/style.css
Outdated
| clear: both; | ||
| } | ||
|
|
||
| .todo-list-item { |
There was a problem hiding this comment.
Не удаётся сделать вертикальное выравнивание по центру. Думаю, для этого нужно заминить inline-block, но это изменяет взаимное расположение.
style/style.css
Outdated
| font-size: 14pt; | ||
| border: none; | ||
| width: 100%; | ||
| height: 90%; |
There was a problem hiding this comment.
Не удаётся растянуть поле на всю высоту. Справа вылезает ползунок прокрутки.
style/style.css
Outdated
| resize: none; | ||
| border: none; | ||
| overflow: hidden; | ||
| width: 99%; |
There was a problem hiding this comment.
Не удаётся растянуть textarea на всю ширину. Возникает полоса прокрутки.
Имею некоторые затруднения со взаимным расположением элементов. Хотелось бы узнать, как решаются подобные проблемы. Подробнее в комментариях.