Серая форма комментария


CSS

Создадим форму комментарию и отступим для аватарки.

.comment_ {
border: solid 1px #e8e8e8;
background: #e8e8e9;
margin-left: 80px;
position: relative;
padding: 10px 15px;
box-shadow: 0 0 5px 1px #ccc;
-moz-box-shadow: 0 0 5px 1px #ccc;
-webkit-box-shadow: 0 0 5px 1px #ccc;
}

Вытащим аватарку за границы комментария

.comment .avatar_small {
float: left;
margin-right: 9px;
position: absolute;
top: -15px;
left: -55px;
}

Подставим «хвостик», чтоб он шел от авы. Закончим форму.

#comments .user_info {
position: absolute;
left: -24px;
padding-left: 35px;
background-position: right;
background: url(http://s003.radikal.ru/i201/1312/78/abf8506fa371.png) no-repeat;
}

Настроим расположение текста. 

.comment .txt { margin-top: 50px;}

.comment ul.actions {float: right; margin-top: -15px;}

Назначаем цвета текста и ссылок. 

.comment .user_info span {color: #333333;}

.comment .txt { color: #333333;}

.user { color: #025501; text-shadow: 0 1px 0 #ccc, }

.comment ul.actions li { color: #000; }

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

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

Писала все в дополнительный css

Спасибо за внимание!  
Обсудить у себя 8
Комментарии (1)
Комментарий был удален
Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

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