Мастерская: декоративные элементы / Комментарии, шаг 4 [16/18]
×

Комментарии, шаг 4 [16/18]

Сейчас подготовимся к позиционированию аватара.

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

Мы увеличиваем отступ справа у автора, т.к. в правом верхнем углу комментария расположена кнопка ответа (спозиционированная абсолютно). Чтобы длинное имя автора не залезло под кнопку, мы и добавляем паддинг, размер которого чуть больше, чем кнопка.

Хотите получать макеты для тренировки? Подписывайтесь на полезную рассылку!

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Комментарий, шаг 4</title> <link href="//fonts.googleapis.com/css?family=PT+Sans:400,700&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="comment"> <div class="comment-avatar"></div> <div class="comment-author">Дима Дивов</div> <div class="comment-text"> Неплохой курс. Нравится собирать и применять теорию на практике. <div class="comment-date">16.09.2013</div> </div> <a href="#reply" title="Ответить" class="comment-reply"></a> </div> </body> </html>
CSS
body { font-family: "PT Sans", sans-serif; font-size: 14px; color: #777777; } .comment { position: relative; margin-top: 90px; margin-right: 20px; margin-left: 50px; } .comment-avatar { width: 70px; height: 70px; background: #7f8c8c url("/assets/course14/avatar.png") no-repeat 50% 50%; } .comment-author { margin-bottom: 5px; font-size: 16px; font-weight: bold; } .comment-text { padding: 12px; background-color: #f8f8f8; border-bottom: 5px solid #e5e6e6; } .comment-date { margin-top: 5px; font-size: 12px; color: #bdc3c7; } .comment-reply { position: absolute; top: 0; right: 0; width: 15px; height: 15px; background: url("/assets/course14/reply.png") no-repeat 0 0; }
HTML Academy
  1. Добавьте для .comment-author паддинг слева 45px и справа 20px.
  2. У .comment-text увеличьте паддинг слева до 45px.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

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

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.