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

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

11.05.2016, 17:21. Просмотров 213. Ответов 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

Помогите, как сделать правильно?
http://www.cyberforum.ru/html/thread630660.html
0
Миниатюры
Стилизация вывода сообщений   Стилизация вывода сообщений   Стилизация вывода сообщений  

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

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

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

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

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

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

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; на свою...

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

Стилизация меню
Доброго времени суток! Столкнулся с проблемой стилизации меню. Задумано...


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

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

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