Новости

HTML

<body>
<div class="block">
<header><p>Новости</p> <div><a href="#">Выберите дату</a><span> / </span><a href="#">Показать весь архив</a></div> </header>
<table>
<tr>
<td><img class="n3011"><p>30 ноября 2014</p>
<a href="#">Важная информация с 1 декабря 2014гВажная информация с 1 декабря 2014гВажная информация с 1 декабря 2014гВажная информация с 1 декабря 2014гВажная информация с 1 декабря 2014гВажная информация с 1 декабря 2014гВажная информация с 1 декабря 2014гВажная информация с 1 декабря 2014г.</a>
</td>
<td><img class="n2911"><p>29 ноября 2014</p>
<a href="#">План мероприятий на декабрь 2014 (г.Москва)</a>
</td>
<td><img class="n2511"><p>25 ноября 2014</p>
<a href="#">Поздравляем Людмилу Магановну Поезжаеву (Россия, Екатеринбург) с днем рождения!</a>
</td>
</tr>
<tr>
<td><img class="n1011"><p>10 ноября 2014</p>
<a href="#">Итоги выставки "Красота. Здоровье. Молодость.</a>
</td>
<td><img class="n0711"><p>07 ноября 2014</p>
<a href="#">13 ноября II часть курса Интернет-лекций "Территория пептидов"</a>
</td>
<td><img class="n0511"><p>05 ноября 2014</p>
<a href="#">Участие в шоу-форуме "Худеем Вместе или Путь к Идеальному Телу"</a>
</td>
</tr>
</table>
<div class="button">
<a href="#" class="active">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
 <a href="#">5</a>
</div>
</div>
</body>

CSS

body {background-color:white; font-family:sans-serif; padding:0px; font-size:11px;}
.block {display:block; width:90%; margin:20px auto; border:1px solid #C7C7C7; border-radius:5px; padding:0 20px;}
header {padding:0; }
header p{font-weight:bold; line-height:14px; font-size:14px; margin-bottom:0px;}
a {text-decoration:none; color:#1963A8;}
a:hover {color: #22158F;}
header div {float:right; position:relative; bottom:15px;}
table {border-collapse:collapse; width:100%; margin-top:0px;}
td {width:33%;}
td p {font-weight:bold;}
img {display:block; width:60px; height:70px; float:left; margin-right:5px; margin-top:10px;}
.n3011 { background-image: url(https://img-fotki.yandex.ru/get/16108/136164467.7/0_f9511_f35bea60_orig.png); background-position:-35px -65px;}
.n1011 { background-image: url(https://img-fotki.yandex.ru/get/16108/136164467.7/0_f9511_f35bea60_orig.png); background-position:-35px -155px;}
.n2911 { background-image: url(https://img-fotki.yandex.ru/get/16108/136164467.7/0_f9511_f35bea60_orig.png); background-position:-335px -65px;}
.n0711 { background-image: url(https://img-fotki.yandex.ru/get/16108/136164467.7/0_f9511_f35bea60_orig.png); background-position:-335px -155px;}
.n2511 { background-image: url(https://img-fotki.yandex.ru/get/16108/136164467.7/0_f9511_f35bea60_orig.png); background-position:-635px -75px;}
.n0511 { background-image: url(https://img-fotki.yandex.ru/get/16108/136164467.7/0_f9511_f35bea60_orig.png); background-position:-635px -165px;}
.button {display:block; width:200px; margin:10px auto; text-align:center;}
.button a {display:inline-block; width:15px; height:15px; border-radius:50%;  margin:5px;}
.button .active {background-color:#2EAFFF; color:white;}
.button a:hover {background-color:#78FFF6;}