Выводим комментарии в стиле Web 2.0

Сегодня мы затронем тему Web 2.0. В последнее время Web 2.0 стал очень популярным и многие заказчики хотят, чтобы в этом стиле был создан их сайт. В сегодняшнем уроке мы научимся создавать поле для вывода комментариев в стиле Web 2.0.

Недавно я наткнулся на один сайт, IconDock. И мне очень понравился вывод комментариев на этом сайте. Я подумал, что можно создать урок на эту тему.

Мы не будем создавать точно такой же вывод, мы его улучшим! Немного посидел, подумал, и получилось вот, что:

Теперь, когда мы знаем, что должны получить, приступим к работе. Для начала скачаем картинки, какие мы будем использовать. Создадим каркас для вывода. Нам необходимо создать контейнер Div с классом comments-container, внутрь мы поместим еще два контейнера с классами top и bottom.

<div class="comments-container">
	<div class="top"></div>
	<div class="bottom"></div>
</div>

Контейнеры с классами top и bottom мы будем использовать для закругления углов. Сами комментарии будут выводиться между ними.

Теперь добавим стили CSS для наших комментариев.

.comments-container {
	background: url('comments-container-bg.gif') repeat-y;
	margin: 20px auto;
	width: 520px;
}
.comments-container .top {
	background: url('comments-container-top.gif') no-repeat;
	height: 6px;
	overflow: hidden;
}
.comments-container .bottom {
	background: url('comments-container-bottom.gif') no-repeat;
	clear: both;
	height: 4px;
	margin: -4px 0 0 0;
	overflow: hidden;
}

Для класса comments-container мы задали фиксированную ширину, поставили фоновое изображение и задали отступы. Значение margin: 20px auto обозначает, что контейнер будет располагаться по центру, сверху и снизу будет отстать на 20px. Для контейнеров с классами top и bottom мы создали практически одинаковые стили. Мы задали для них фоновое изображение, высоту, и задали способ отображения.

У нас теперь создан контейнер для комментариев, сейчас мы можем приступить к самому интересному моменту, как будут выводиться комментарии. Создадим контейнер Div с классом comment. Внутри создадим три контейнера Div с классами gravatar, inner-content, clear. Контейнер с классом gravatar будет содержать аватар автора комментария, inner-content – имя автора, текст и дату комментирования.

<div class="comment">
	<div class="gravatar"></div>
	<div class="inner-content"></div>
	<div class="clear"></div>
</div>

Теперь нам необходимо внутри контейнера с классом inner-content создать три контейнера Div с классами author, content, date. В контейнер author будет выводиться имя автор, который оставил комментарий. В контейнер content – текст самого комментария. И контейнер date будет отображать дату, когда оставили комментарий.

<div class="comment">
	<div class="gravatar">
		<img src="gravatar.gif" alt="Author" />
	</div>
	<div class="inner-content">
		<div class="author">
			<a href="http://www.masterinweb.net/">Author Name</a>
		</div>
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
			do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
			enim ad minim veniam, quis nostrud exercitation ullamco.</p>
		</div>
		<div class="date">
			00.00.0000 00:00
		</div>
	</div>
	<div class="clear"></div>
</div>

Теперь пришло время для создания стилей для нашего вывода комментариев.

.comments-container .comment {
	padding: 2px 9px 9px 7px;
}
.comments-container .comment a {
	color: #686868;
	text-decoration: none;
}
.comments-container .comment a:hover {
	color: #686868;
	text-decoration: underline;
}
.comments-container .comment .gravatar {
	background: url('comment-gravatar-bg.gif') no-repeat;
	float: left;
	height: 53px;
	margin: 0 8px 0 0;
	padding: 11px 0 0 13px;
	width: 59px;
}	
.comments-container .comment .inner-content {
	background: url('comment-content-bg.gif') repeat-y;
	float: left;
	width: 424px;
}
.comments-container .comment .author {
	background: url('comment-author-bg.gif') no-repeat;
	color: #686868;
	font: bold 14px/14px "Lucida Grande", Arial, Sans-serif;
	height: 13px;
	padding: 15px 0 0 19px;
	width: 405px;
}
.comments-container .comment .content {
	background: url('comment-content-bg.gif') repeat-y;
	color: #686868;
	font: 12px/18px "Lucida Grande", Arial, Sans-serif;
	overflow: hidden;
	padding: 0 19px 0 19px;
	width: 386px;
}
.comments-container .comment .content p {
	margin: 0;
	padding: 10px 0 5px 0;
}
.comments-container .comment .date {
	background: #efefef url('comment-date-bg.gif') no-repeat left top;
	color: #686868;
	font: bold 12px/12px "Lucida Grande", Arial, Sans-serif;
	height: 14px;
	padding: 14px 2px 0 2px;
	text-align: right;
	width: 420px;
}
.comments-container .comment .clear {
	clear: both;
	height: 1px;
	overflow: hidden;
}

Мы задали изображения, какие будут у нас в качестве фона, установили отступы и задали положение для текста. Для самого комментария создали закругленные углы. После того, как Вы добавили стили, получится:

Для того чтобы добавить создать перевернутый вывод, нам необходимо к классу comment добавить еще приставку alt и добавить пару стилей.

.comments-container .comment.alt .gravatar {
	background: url('comment-gravatar-alt-bg.gif') no-repeat;
	float: right;
	margin: 0 0 0 8px;
	padding: 11px 0 0 19px;
	width: 53px;
}
.comments-container .comment.alt .inner-content {
	float: right;
}
.comments-container .comment.alt .date {
	text-align: left;
}

HTML код должен выглядеть следующим образом:

<div class="comment">
	<div class="gravatar">
		<img src="gravatar.gif" alt="Author" />
	</div>
	<div class="inner-content">
		<div class="author">
			<a href="http://www.masterinweb.net/">Author Name</a>
		</div>
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
			do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
			enim ad minim veniam, quis nostrud exercitation ullamco.</p>
		</div>
		<div class="date">
			00.00.0000 00:00
		</div>
	</div>
	<div class="clear"></div>
</div>
<div class="comment alt">
	<div class="gravatar">
		<img src="gravatar.gif" alt="Author" />
	</div>
	<div class="inner-content">
		<div class="author">
			<a href="http://www.masterinweb.net/">Author Name</a>
		</div>
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
			do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
			enim ad minim veniam, quis nostrud exercitation ullamco.</p>
		</div>
		<div class="date">
			00.00.0000 00:00
		</div>
	</div>
	<div class="clear"></div>
</div>

После того, как Вы разместите весть код между контейнерами top и bottom, получится:

Вот и все!

Ниже полный HTML код страницы:

<div class="comments-container">
	<div class="top"></div>
	<div class="comment">
		<div class="gravatar">
			<img src="gravatar.gif" alt="Author" />
		</div>
		<div class="inner-content">
			<div class="author">
				<a href="http://www.masterinweb.net/">Author Name</a>
			</div>
			<div class="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
				do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
				enim ad minim veniam, quis nostrud exercitation ullamco.</p>
			</div>
			<div class="date">
				00.00.0000 00:00
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="comment alt">
		<div class="gravatar">
			<img src="gravatar.gif" alt="Author" />
		</div>
		<div class="inner-content">
			<div class="author">
				<a href="http://www.masterinweb.net/">Author Name</a>
			</div>
			<div class="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
				do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
				enim ad minim veniam, quis nostrud exercitation ullamco.</p>
			</div>
			<div class="date">
				00.00.0000 00:00
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="bottom"></div>
</div>

Спасибо за внимание!