Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
macilik
0 / 0 / 0
Регистрация: 11.05.2016
Сообщений: 4
1

Стилизация вывода сообщений

11.05.2016, 17:21. Просмотров 225. Ответов 6
Метки нет (Все метки)

Пытаюсь сделать вывод сообщений типа как на скриншоте 1 (обычный вид) и 2 (вид при наведении), попробовал сделать сам:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<style>
.nim-dialog {
    cursor: pointer;
}
hr {
margin-left:50px;
 
}
</style>
</head>
<body>
<div class='dialog_list'>
<div id="1" class='nim-dialog' onmouseover="this.style.backgroundColor='#F5F7FA'" onmouseout="this.style.backgroundColor='#FFFFFF'">
<img src="avatar.png" align="left" width="50" height="50"/>
<p><b>User</b></p>
<p>Текст текст</p>
<hr noshade>
</div>
</div>
</body>
</html>
но выходит не очень... Скриншоты 3 и 4

Помогите, как сделать правильно?
0
Миниатюры
Стилизация вывода сообщений   Стилизация вывода сообщений   Стилизация вывода сообщений  

Стилизация вывода сообщений  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.05.2016, 17:21
Ответы с готовыми решениями:

Стилизация hr
Здрасте! Вот написал я такой код &lt;div id=&quot;header&quot;&gt; &lt;div...

Стилизация списка
Стоит задача стилизовать список как на прикрепленном изображении (т.е....

Стилизация селекта
Привет всем. Сейчас занимаюсь стилизацией селекта. Я попытался заменить...

Стилизация ссылки
Привет всем. У меня возник вопрос как при наведении на ссылку выводить...

Стилизация кнопок
Привет всем, как можно сделать стилизацию кнопок, просто сменяя одну картинку...

6
Ника))
41 / 41 / 20
Регистрация: 08.12.2010
Сообщений: 340
11.05.2016, 17:24 2
Межстрочный интервал сделай меньше между пользователем и самим текстом line-height:...
А по людски, делается все в контейнерах...
0
macilik
0 / 0 / 0
Регистрация: 11.05.2016
Сообщений: 4
11.05.2016, 17:37  [ТС] 3
можно подробнее, как правильно будет? Я в css не спец... просто необходимость такая появилась
0
vnmslf
11.05.2016, 21:58
  #4

Не по теме:

Судя по скриншотам, что-то напоминает мне это поддельные вк сайты для развода.. Ошибаюсь?

0
macilik
0 / 0 / 0
Регистрация: 11.05.2016
Сообщений: 4
11.05.2016, 22:00  [ТС] 5
нет, просто хочу такой же или примерно такой вывод сообщений сделать.
0
vnmslf
25 / 25 / 5
Регистрация: 13.03.2015
Сообщений: 214
11.05.2016, 22:05 6
Добавьте классу .nim-dialog свойство background со значением #fff, тогда у вас изначально будет белый фон, затем при наведении он сменится на #f5f7fa, а когда курсор пропадет за границами объекта - он опять станет белым. Сейчас у вас первоначальный фон не прописан. Так а в чем задача-то? Вы хотите сделать вообще полную аналогию такого сообщения?
0
macilik
0 / 0 / 0
Регистрация: 11.05.2016
Сообщений: 4
12.05.2016, 00:09  [ТС] 7
Вы хотите сделать вообще полную аналогию такого сообщения?
да, хотелось бы.
0
12.05.2016, 00:09
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.05.2016, 00:09

Стилизация таблицы
Всем доброго вечера. Подскажите пожалуйста, как сделать класс таблицы, чтобы...

стилизация элементов
Доброго времени суток! Написал алгоритм Априори первая страница довольно...

Стилизация кнопок
Можно ли как-нибудь поменять кнопку &lt;input type=&quot;file&quot; name=&quot;attach&quot;&gt; на свою...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru