Сайт визитка - верстаем футер и блок с картинкой

В соответствии с макетом в футере содержится один элемент - копирайт. Выведем его на страницу - в файле index.html, между тэгами <footer class="footer_wrap"> </footer> добавим строку.

<p>© Your Site Name | Images: Fotogrph | Design: HTML5Templates.com</p>

Сохраняемся, обновляем страницу и видим, что только что вставленная строка появилась в верхней левой части футера. Что бы отобразить ее так же, как нарисовано в PSD, добавим следующие стили - для класса .footer_wrap - присвоим верхний внутренний отступ, высотой 22px и уменьшим значение height на такое же значение, что бы общая высота блока не изменилась. Стили для подвала страницы теперь выглядят так:

.footer_wrap {
margin-top:-100px;
padding-top:22px;
height:78px;
position:relative;
background:url(../images/fon_body.jpg) repeat;
}

Для абзаца с копирайтом назначим следующие стили:

.footer_wrap p {
margin:0 auto;
padding-top:18px;
width:966px;
text-align:center;
font-size:11px;
border-top:1px solid #dedede;
}

Сохраним изменения и посмотрим на обновленную страницу. Футер приобрел требуемый вид.

Теперь выведем блок с изображением. Вырежем из PSD нужное фото и сохраним его в папке images с именем home_pic.jpg. Между тэгами <div class="content_wrap"> </div> в файле index.html пишем следующее:

<div class="slider_pic">
	<img alt="" src="/images/home_pic.jpg" />
</div>

Картинка появилась на странице, что бы придать ей надлежащее оформление, присвоим блоку slider_pic следующие стили:

.slider_pic {
margin:0 auto;
padding:20px;
width:920px;
position:relative;
border:1px solid #dedede;
background:#fff;
-moz-box-shadow:0 0 8px 0 #dedede;
-webkit-box-shadow:0 0 8px 0 #dedede;
box-shadow:0 0 8px 0 #dedede;
behavior: url(PIE.htc);
}
.slider_pic img {
width:100%;
display:block;
}

Блоку slider_pic задаем рамку, внутренний отступ в 20px, фоновый цвет. Размещаем его по центру экрана и с помощью css 3 свойства box-shadow накладываем по контуру тень. Что бы тень отображалась в устаревших, но все еще используемых браузерах, используем префиксы для FF, Chrome, Safari и прибегаем к помощи, знакомого нам по прошлым статьям, PIE, для ИЕ 7-8. Изображению устанавливаем размер, равный ширине блока и делаем его блочным (что бы убрать отступ снизу, свойственный инлайн элементам).

Теперь осталось поднять блок с картинкой на половину его высоты вверх. Для этого нужно увеличить высоту блока header. Однако, возникает небольшая сложность - на внутренних страницах блок с изображением отсутствует и увеличивать высоту блока header на них не нужно. Выход из положения достаточно простой - добавляем для header еще один класс, который будет назначаться только для главной страницы.

<header class="header_wrap home_header">

Теперь можем безболезненно присвоить этому классу внутренний отступ, равный половине высоты блока с картинкой.

.home_header {
padding-bottom:183px;
}

Казалось бы, достаточно добавить блоку slider_pic свойство margin с отрицательным значением -183px и результат достигнут, но ИЕ 7 подкидывает сюрприз - он проигнорирует этот отступ. Проблема в используемом PIE - ИЕ 7 напрочь игнорирует отрицательный отступ у контейнеров, к которым применен скрипт. Что бы побороть баг, придется блок slider_pic обернуть еще в один контейнер.

<div class="slider_wrap">
	<div class="slider_pic">
		<img alt="" src="/images/home_pic.jpg" />
	</div>
</div>

В css для нового блока прописываем лишь одно свойство:

.slider_wrap {
margin-top:-183px;
}

Обновляем страницу и любуемся полученным результатом - все блоки находятся там, где им и положено (даже в ИЕ 7).

Для тех, у кого возникли сложности с тем, что было проделано в этой статье - по ссылке ниже выкладываю конечный результат проделанной работы и ссылку на демо версию готового сайта.

Далее нас ожидает работа с центральной частью, после чего можно будет считать верстку главной страницы для desktop версии законченной.