Формы комментариев с инфой сбоку

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


CSS

Начнем с основного. Сама лента (это по желанию)

#comments {background: #f6f6f6; padding: 10px 15px;}

Отдельный комментарий: красим, ставим рамку, делаем отступы внутри и задаем минимальную высоту 135px.

.comment_ {background:#f8f6ec; border-radius:8px; border:1px solid #e1bf01; padding:4px; min-height:135px;}

Информация оставившего комментарий. Это его ава, дата коммента, избранное и выбор. Тут задаем ширину, высоту на 100%, ставим фон, закругляем, делаем отступы снаружи и внутри. 

#comments .user_info {width: 90px; height: 100%; background: #fcfbf0; border-radius: 8px; margin: 3px; padding: 5px;}

Теперь залазим внутрь #comments .user_info  
Аватарка. Закруглила и отступила, чтоб она по центру оказалась.

.comment .avatar_small {float: left; margin-left: 22px; border-radius: 50px;}

Цвет ника

.user { color: #303030;}

Стрелочка, которая появляется при наведении на ник. Меняем цвет  фона.

.user_actions{display:inline-block;width:11px;height:9px;background:#303030 url(http://s40.radikal.ru/i089/1211/55/82ce8408dd23.gif) no-repeat 50% 50%;visibility:hidden;margin-left:5px}

Остальная информация

.comment .user_info span {color: #777; text-align: center;}
.comment .user_info .inf {display: block; color: #777; font-size: 11px;}

Текст, содержимое комментария. отключила запреты на обтекание, подтянула вверх, чтоб было на уровне с инфой, а не под ней, и отступила слева, чтоб текст не наезжал на инфу.

.comment .txt {clear:none; margin: -140px 0 3px 110px;}

«Навигация» комментария (удалить, ответить, редактировать). Убираю на противоположную сторону и выравниваю в углу.

.comment ul.actions li {display: inline; font-size: 11px; float: right; padding: 3px 5px; margin: -16px 0 0;}

Цвет текста

.comment ul.actions li { color: #303030; }
.comment ul.actions li a { color: #303030; }

Бонусы!

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

.comment .delete {font-size: 60px; color:transparent; background-repeat: no-repeat; background-position: center; background-image: url(http://s3.hostingkartinok.com/uploads/images/2013/08/0cb3dd48c520317dcd31f3f6f6829107.png);}

Значок new ломает длинные никнеймы. Убираем.

.comment_new {display:none;}

Ну вот и все. Всем удачи!


Обсудить у себя 6
Комментарии (11)

Классно!)) Спасибо)

Вау вау

Я не важный учитель, но надеюсь понятно объяснила. может и будут косяки, не знаю.не должно. Пишите. 

А еще интересней было бы посмотреть что другие на этой основе сделать могут )

Кстать, а нельзя никак удалять следы от удалённых коментов?

Ну если вот такие фигулины делать не будешь .comment .delete {display:none;} вполне сойдет. потому что с таким фон и рамка все равно выдавать будут.

Ты такая молодец!

Вау-вау, спасибо))

Супер! Из тебя очень хороший учитель для новичков

У меня есть вот такой косяк, а можете объяснить почему так?

Ой. хз. Подвигай первое число margin у .comment_txt
вот эту -140. уменьшай, пока не выровняется 

Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

Войти через социальные сети: