Дизайн и верстка эластичного макета

В сегодняшней статье, мы создадим дизайн и сверстаем простую страницу в стиле блога. При этом особое внимание, мы уделим созданию тянущегося макета с использованием только XHTML и CSS. Эта статья предназначена для начинающих веб-мастеров, а также всех, кто хочет улучшить юзабилити своих проектов.

Вы можете сразу взглянуть на результат, а также скачать архив с примером.

Шаг 1

Итак, наш пример веб-страницы, будет похож на простую тему для блога, со структурой, похожей на WordPress-блог. Это будет выглядеть примерно вот так:

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

Шаг 2 – Photoshop

Мы сократим использование Photoshop’а до минимума. Обычно, прежде чем начинать верстать, я разрабатываю полную версию дизайна, но здесь, мы собираемся создать базовый макет, поэтому, о контенте позаботимся позже.

Обратите внимание: Некоторые читатели спрашивают, можно ли использовать GIMP. Лично я его не использую, но уверена, что вы легко сможете повторить следующие шаги в GIMP, поскольку мы используем базовые фигуры и градиенты.

Макет Страницы

Я решила сделать страницу, шириной в 900px, так что, создаю новый файл шириной в 1000px и высотой 1200px (можете сделать свой макет шире, если хотите). Расположите направляющие на отметках 50px и 950px, для получения 900-пиксельной области. Поскольку наша страница будет содержать область контента и сайдбар, контент будет шириной 600px, так что добавьте еще одну направляющую на отметке 650px.

Бэкграунды

Фон заголовка насчитывает три прямоугольника, первый для верхних ссылок, второй для основного заголовка, и третий для навигации. Я использовал слои с shape, и добавил градиенты в стили слоев. Кроме этого, я добавила рамку толщиной в 1px между верхней областью и заголовком, а также между заголовком и областью навигации.

В фоне подвала используется другой градиент, но в этот раз с верхней рамкой, толщиной 2px.

Далее, добавим фон для сайдбара, я выбрала цвет #d8ddd1.

Шрифты

Далее, нам понадобится инструмент шрифт (T), чтобы добавить логотип и подзаголовок, а также ссылки навигации. Будем использовать следующие шрифты:

Название блога:

• Шрифт: Myriad Pro
• Размер: 48pt
• Цвет: #ffffff (белый)

Описание блога:

• Шрифт: Myriad Pro
• Размер: 24pt
• Цвет: #ffffff

Ссылки навигации:

• Шрифт: Arial
• Размер: 18pt
• Цвет: #2b2b2b

Надписи «welcome, guest» и «stay updated»:

• Шрифт: Arial
• Размер: 12pt
• Цвет: #fffff

Надписи «login, Sign Up», и «subscribe via…»:

• Цвет: #a5bf8d
• Стиль: подчеркнутый

Контент

Мы создадим в нашем макете только одну простую запись, поскольку работать со шрифтом в фотошопе не очень удобно, позднее, мы вернемся к стилизации контента. Далее представлены шрифты, которые мы будем использовать в примере статьи:

Название статьи:

• Шрифт: Arial
• Размер: 24pt
• Цвет: #3c3f40
• Стиль: Жирный

Дата, рубрика и информация об авторе:

• Размер: 11pt
• Параграфы:
• Размер: 12pt

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

Выберите инструмент slice (С) и вырежьте небольшие фрагменты каждого из фоновых прямоугольников: верхний, фон заголовка, навигации, и подвала. Не включайте в эти фрагменты рамку, мы добавим ее средствами CSS. Увеличьте масштаб, чтобы вырезать правильный фрагмент. Я вырезала фрагменты шириной в 5px, поскольку их ширина не играет важной роли на данном этапе.

После этого, выберите меню «File/Save for web and devices…», зажмите shift, и кликните по каждому фрагменту. Из выпадающего меню «presets», выберите тип файла «jpeg», и снимите галочку с пункта «convert to sRGB» (я считаю, что конверсия притупляет цвета). Все остальные настройки оставьте как есть, и сохраните файлы.

Шаг 3 – Скелет HTML

Откройте свой любимый редактор кода, и создайте новый файл с именем index.html. Мы постараемся использовать минимальное количество тэгов <div>, чтобы сохранить нашу разметку читаемой и семантической. Как уже было сказано ранее, для обеспечения гибкости макета, нам понадобится заключить некоторые элементы во множественные div’ы. Позже мы вернемся к этому вопросу.

Все элементы на нашей странице будут содержаться в двух дивах, с именем «main» и «footer». В диве “main”, мы расположим верхнюю панель, заголовок и блок основного контента. Блок «footer» будет содержать внутренний блок с текстом.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
		<title>My Blog</title>
	</head>
	<body>
		
		<div id="main">
			
			<div id="top_bar">
			</div><!-- end top bar -->
			
			<div id="header">
			</div><!-- end header -->
			
			<div id="content">
			</div><!-- end content -->
		
		</div><!-- end main -->
		
		<div id="footer">
		
			<div id="footer_content">
			</div><!-- end footer content -->
		
		</div><!-- end footer -->
	</body>
</html>

Верхняя панель

Фон верхней панели растягивается по всей ширине страницы, но две текстовые области, расположенные на этой панели, не должны выходить за пределы 900px на странице. Для этого, нам понадобится заключить контент в другой див, которому будет назначен класс «container». Верхняя панель будет содержать два параграфа, один для авторизации, и другой для RSS-подписки. Так как им обоим будет назначено обтекание (float), каждому из параграфов понадобится уникальный ID. Хотя конечно, если мы хотим получить абсолютно семантическую верстку, мы могли бы вместо параграфов использовать маркированный список с двумя позициями. Попробуйте оба способа, узнайте, с каким из них вам будет проще работать.

<div id="main">
			
	<div id="top_bar">
		<div class="container">
			<p id="login">Welcome, Guest <a href="#">Login</a> <a href="#">Sign Up</a></p>
			<p id="subscribe"> Stay Updated: <a href="#">Subscribe via RSS</a> <a href="#">Email Updates</a></p>
		</div><!-- end bar container -->
	</div><!-- end top bar -->
			
	<div id="header">
		</div><!-- end header -->
			
	<div id="content">
	</div><!-- end content -->
		
</div><!-- end main -->

Шаг 4 — Заголовок

Здесь мы сталкиваемся с той же проблемой, что и в предыдущем шаге – фон блока растягивается по всей странице. Так как заголовок также должен быть расположен в пределах 900px, мы можем повторно использовать класс “container”. Название блога заключено в теги заголовка <h1>, а описание находится в тэгах параграфа с уникальным ID.

<div id="header">
	<div id="branding" class="container">
		<h1>My Blog</h1>
		<p id="desc">Description of My Blog</p>
	</div><!-- end branding -->
</div><!-- end header -->

Навигация

Также, в блок заголовка мы включим навигационное меню, которое реализовано с помощью маркированного списка с ID=“menu”. Весь список, в свою очередь заключен в див, с ID=”navigation”. А поскольку нам нужно центрировать навигационное меню, мы добавим класс «container» к маркированному списку.

<div id="header">
				
	<div id="branding" class="container">
		<h1>My Blog</h1>
		<p class="desc">Description of My Blog</p>
	</div><!-- end branding -->
				
	<div id="navigation">
		<ul id="menu" class="container">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div><!-- end navigation -->
			
</div><!-- end header -->

Мы записали навигационные списки в строчном виде, но далее, с помощью CSS, мы изменим их на заглавные.

Шаг 6 – Контент

Область контента не имеет фонового изображения или цвета, так что нам не придется заключать ее в дополнительный див. Единственное, для центрирования содержимого, мы можем назначить блоку контента, класс «container». Внутри контент-блока, мы разместим два дива – один для записей блога, и другой для сайдбара.

Когда приходится делать дизайн блога, необходимо учитывать, что контент часто изменяется, и может содержать любое число различных элементов, включая списки, картинки, цитаты, заголовки и выделенный текст. Чтобы приготовится к этому, мы должны назначить стили для каждого возможно элемента, который может появится на странице, так что наш простой контент должен включать в себя абсолютно Все. Иногда это называется «метод песочницы». Для того чтобы подготовить пример контента, я воспользовалась сервисом HTML Ipsum.

Итак, мы собираемся разделить наш простой контент на несколько различных записей, с заголовками, заключенными в тэги <h2>. Кроме этого, каждая запись имеет стандартную информацию об авторе, дате публикации, метках; заключенную в теги <small>.

<div id="content" class="container">
	<div id="posts">
		<h2>Don't Cancel Chuck!</h2>
		<small>on July 01 in <a href="#">General</a> tagged <a href="#">petitions</a> by <a href="#">admin</a></small>
		<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 laboris nisi ut aliquip ex ea commodo consequat. 
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
		Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. 
		Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, 
		at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
		<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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		<a href="#">Read More</a></p>
				
		<h2>Alien Spacecraft found in New Mexico</h2>
		<small>on July 01 in <a href="#">General</a> tagged <a href="#">petitions</a> by <a href="#">admin</a></small>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
		Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
		Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		<ul>
   			<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  			<li>Aliquam tincidunt mauris eu risus.</li>
 			<li>Vestibulum auctor dapibus neque.</li>
		</ul>
		<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 laboris nisi ut aliquip ex ea commodo consequat.</p>
				
		<h2>Ghostly Goo in your Kitchen Sink?</h2>
	    <small>on July 01 in <a href="#">General</a> tagged <a href="#">petitions</a> by <a href="#">admin</a></small>
	 	<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. 
	    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
	    <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, 
	    ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
		<h4>Header Level 4</h4>
	    <ol>
   			<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   			<li>Aliquam tincidunt mauris eu risus.</li>
		</ol>
		<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. 
		Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, 
		at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
		<h3>Header Level 3</h3>
		<ul>
			<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   			<li>Aliquam tincidunt mauris eu risus.</li>
		</ul>
		<ol>
			<li>Lorem ipsum dolor sit amet</li>
			<li>Consectature vestiblum</li>
		</ol>
			
	</div><!-- end posts -->
			

</div><!-- end content -->

Шаг 6 – Сайдбар

Обычно в блоге, сайдбар содержит различные виджеты, которые отображают ссылки на другие страницы или статьи, и каждый виджет обычно заключен внутри маркированного списка, или якорных тэгов. В нашем примере мы используем такие виджеты, как «Рубрики», «Последние записи» и «Архивы». Так что, наш сайдбар будет содержать три списка, каждый из которых будет содержать заголовок, в тэгах <h3>.

<div id="sidebar">
				
	<h3>Categories</h3>
    <ul>
   		<li><a href="#">General</a></li>
    	<li><a href="#">Ghost Sightings</a></li>
    	<li><a href="#">UFO Crashes</a></li>
    	<li><a href="#">Government Coverups</a></li>
    	<li><a href="#">International Conspiracies</a></li>
    </ul>
    				
    <h3>Recent Posts</h3>
	<ul>
		<li><a href="#">Ghost Sighting in Mansion</a></li>
		<li><a href="#">UFO picked up by satelites</a></li>
		<li><a href="#">Mutants amoung us?</a></li>
		<li><a href="#">Bigfoot: Fact or Fiction?</a></li>
	</ul>
				
	<h3>Archives</h3>
	<ul>
    	<li><a href="">June 2008</a></li>
        <li><a href="">May 2008</a></li>
        <li><a href="">April 2008</a></li>
        <li><a href="">March 2008</a></li>                                                        
	</ul> 
				
	</div><!-- end sidebar -->
				
</div><!-- end content -->
		
</div><!-- end main -->

Шаг 7 – Подвал

Подвал будет работать точно также как верхняя панель и заголовок, с внешним дивом для содержания повторяющегося фона, и внутренним дивом для центрирования контента и содержания его в пределах 900px на нашей странице. Для этого, нам нужно добавить класс «container» к диву с ID=”footer_content”.

Наш подвал будет содержать три колонки: копирайты, ссылки и настройки RSS-подписки. Каждая колонка будет заключена в свой собственный div.

<div id="footer">
		
	<div id="footer_content" class="container">
				
		<div id="copyright">
			<p>Copyright © 2009.<br /> All Rights Reserved.</p>
		</div>
				
		<div id="links">
			<h4>Links</h4>
			<ul>
				<li><a href="#">PSDtuts - Photosohp tutorials</a></li>
				<li><a href="#">NetTtuts - Web development and design tutorials</a></li>
				<li><a href="#">VectorTuts - Illustrator and vector tutorials</a></li>
				<li><a href="#">FlashTuts - Adobe Flash tutorials</a></li>
			</ul>
		</div> 
				
		<div id="feeds">
			<h4>Follow our updates</h4>
			<ul>
				<li><a href="#">Subscribe to RSS Feed</a></li>
				<li><a href="#">What is RSS?</a></li>
				<li><a href="#">Email Updates</a></li>
			</ul>
		</div>
				
				
	</div><!-- end footer content -->
		
</div><!-- end footer -->

Отлично, мы закончили нашу разметку. Давайте взглянем на нее в браузере.

В результате у нас получилось не так уж много содержимого на странице, зато оно организовано таким образом, что его удобно читать. Это очень важный момент: контент страницы должен оставаться читаемым, даже если браузеру не удалось загрузить CSS-стили. Таким образом, вы упростите жизнь пользователям, которые читают страницу с отключенными стилями, или используют специализированные браузеры (например, экранные читатели, для слабо видящих людей).

Шаг 8 – CSS

Настало время переходить к веселой части – добавим нашей страничке немного стилей. Готовьтесь – чтобы получить макет, который мы задумали, нам придется столкнуться с некоторой путаницей, и небольшими проблемами, связанными с CSS. Я собираюсь объяснить основные причины, приводящие к этим проблемам, так что вы не только научитесь их решать, но также лучше разберетесь в основных принципах работы CSS, и к тому же научитесь бороться с проблемами, которые встретятся вам в дальнейшем. Давайте начнем.

Создайте новый файл «style.css», и вставьте на него ссылку, в разделе head, вашего html-документа:

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
	<title>My Blog</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 
</head>

Шаг 9 – Общий сброс

Первое, что нам понадобится сделать, это сбросить дефолтные стили стратегически важных элементов.

Мы будем использовать простой CSS-резет:

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote {   
    margin:0px; padding:0px; border:0px;    
}   

Кроме того, давайте назначим нужный шрифт всей странице:

body {font-family: Arial, helvetica, sans-serif; }   

Следующий шаг очень простой: помните как мы назначали класс «container» всем дивам, имеющих текстовое содержание?

Пришло время наполнить его содержимым. Как я уже говорила ранее, мы сделаем область контента шириной в 900px, и центрируем.

.container {width: 900px; margin: 0 auto; }   

Шаг 10 – Начинаем сверху

Начнем сверху, с небольшой панели, содержащей подписку и ссылки авторизации. Первое, что нам нужно сделать с нашими параграфами – это расположить их рядом друг с другом. Для того, чтобы это реализовать, мы должны назначить обтекание нужным элементам.

Как работает floats

Если взглянуть на нашу страничку в браузере, мы увидим множество элементов разной ширины и высоты. Браузер, однако, видит только множество блоков сложенных один на другой, где каждый элемент занимает всю доступную ему ширину контейнера. Веб-страница имеет очень простой «поток»: каждый элемент смещается к низу страницы, вышестоящим элементом. Для того чтобы расположить элементы рядом друг с другом, нам нужно выдернуть их из нормального «потока» страницы.

Когда элементу назначено обтекание, как правило, происходит две вещи: он прилипает к одной из сторон страницы (или другого элемента), а также, он удаляется из нормального потока элементов – то есть вместо того, чтобы занимать всю, доступную ширину страницы, он занимает только необходимое ему пространство, позволяя нижним элементам располагаться рядом с ним.

Давайте попробуем назначить обтекание, двум нашим параграфам:

p#login {float: left; }   
  
p#subscribe {float: right; }   

Взгляните на страницу в браузере, и вы сразу увидите проблему! Элемент h1 (логотип), переместился со своего места, и встал между двумя обтекаемыми параграфами. Все дело в том, что когда вы назначаете float элементам, вы «ломаете правила», и проблема заключается в том, что если вы позволяете сломать правила двум элементам, другие элементы тоже начинают это делать. Поэтому, нам нужно каким-то образом сообщить браузеру, что правила можно нарушать ТОЛЬКО этим двум параграфам, и что после этих элементов, нормальный поток должен быть восстановлен. Для того чтобы сделать это, мы должны добавить правило для родительского дива, двух плавающих элементов. Это правило позволит применить обтекание к двум параграфам, без каких-либо последствий на странице.

Итак, давайте добавим родительскому диву свойство “overflow”, и установим его значение в «hidden».

#top_bar {overflow: hidden; }   

Одна из важных вещей, которых вам нужно знать о float – это то, что вы всегда должны указывать ширину. Конечно ваш CSS останется валидным и без этого, но чтобы, в дальнейшем не получить неожиданных результатов в некоторых браузерах, лучше всегда следуйте этому правилу.

Так как мы хотим сделать резиновый макет, то не будем указывать значения в пикселях, вместо этого, мы будем использовать проценты. Назначим каждому параграфу ширину 50%. После этого, в связи с достаточно большой шириной, параграф с подпиской переместился влево. Это легко можно исправить, путем установления свойства text-align: right.

p#login {float: left; width: 50%;}   
  
p#subscribe {float: right; width: 50%; text-align: right; }  

Стилизация параграфов

Прежде чем устанавливать фоновое изображение, мне нравится назначать стили для шрифтов, поскольку так мне видно, сколько пространства я могу использовать.

Размеры шрифта с использованием ems

Мы хотим, чтобы наша страничка была максимально тянущейся, для того чтобы охватить как можно более широкую аудиторию, так? Одно из условий достижения этого – позволить читателям изменять размер текста до удобного размера. Современные браузеры умеют ресайзить текст различными способами, проблемы в данном случае есть только у IE. Если вы задали размер текста в пикселях, в Internet Explorer вы не сможете изменить размер текста, так что при любом размере экрана, вашему читателю придется иметь дело с тем размером, который вы установили первоначально. Это нехорошо, особенно для слабовидящих людей. Для устранения этой проблемы, мы должны использовать другую единицу измерения – ems.

Ems — это относительная единица измерения – это значит что ширина “m” будет зависеть от назначенного размера шрифта. Дефолтный размер, устанавливаемый браузерами по умолчанию – 16px, так что 1em эквивалентен размеру шрифта в 16px.

Для того, чтобы сделать нашу страницу полностью масштабируемой, нам нужно конвертировать все размеры шрифтов в ems. Самый простой способ для этого – использовать веб-приложение Em Calculator (лучше всего работает в Firefox).

Однако, для предотвращения путаницы, можно сделать еще проще. Поскольку ems зависит от дефолтного размера шрифта на странице, если мы изменим значение по умолчанию, значение em, также изменятся.

Давайте возьмем за основу число 10, и установим дефолтный шрифт равным 10px, вместо 16. Для этого, мы должны указать в нашем CSS-файле, что наши шрифты должны представлять 62,5%, от установок по умолчанию.

body {font-family: Arial, helvetica, sans-serif; font-size: 62.5%; } 

Теперь, нам осталось просто разделить каждый размер шрифта в пикселях на 10, и мы получим наше значение em. Начнем с указания шрифтов для двух параграфов в верху страницы, их размер 12px, изменится на 1.2ems.

#top_bar p {font-size: 1.2em; color: #ebf0e8;}   
  
#top_bar a {font-size: 1.2em; color: #a5bf8d;}   

Повторяющийся фон

Далее, мы добавим фон, из повторяющейся картинки, которую мы вырезали из нашего PSD:

#top_bar {overflow: hidden; background: url(images/bar_slice.jpg) repeat-x; }   

Нам нужно добавить небольшие отступы сверху и снизу, чтобы позволить нашему фоновому изображению растянуться во всю высоту. Чтобы получить правильное значение, нам нужно вернуться к PSD-макету и измерить высоту верхней панели с помощью линейки: моя высота равна 26px. Поскольку текст параграфов равен 12px, значение отступа должно быть равно 26-12, что равно 14px. Это значит, что мы добавим 7px отступа сверху, и 7px снизу.

#top_bar {   
    overflow: hidden;    
    background: url(images/bar_slice.jpg) repeat-x;    
    padding-top: 7px;    
    padding-bottom: 7px;    
}   

Мы также могли бы растянуть фоновое изображение по всей высоте, просто назначив высоту равной 26px, но для получения максимальной гибкости, старайтесь не назначать точную высоту вашим элементам. Если вы ограничите высоту вашего элемента, то не сможете использовать более крупный текст или дополнительный контент.

Взгляните на нашу страничку в браузере, она очень похожа на PSD-макет. Но здесь кроется одна проблема: попробуйте изменить размер текста в браузере. При изменении размера текста, изменяются пропорции, мы теряем наш нижний отступ, и текст в итоге, выходит за пределы фонового изображения. Для создания более «нерушимого» сайта, нам нужно заставить фон растягиваться по мере роста текста, или по мере добавления контента, так чтобы верхний и нижний отступы в 7px, оставались, не зависимо от величины текста. Поскольку высота нашего фонового изображения только 26px, нам нужно что-то еще, для дальнейшей растяжки. В данном случае, мы поступим очень просто – назначим сплошной цвет позади фоновой картинки, так что при увеличении текста, и картинка не сможет содержать его в себе, будет отображаться фоновый цвет. Нижний цвет нашего градиента #08413c. Так что давайте добавим его в качестве фонового цвета. А для того, чтобы наша картинка всегда оставалась вверху элемента, мы добавим к строке подключения фон, свойство background-position.

background: #08413c url(images/bar_slice.jpg) top repeat-x;   

Теперь, при изменении размера текста – фон изменяется вместе с ним, и это смотрится одинаково хорошо, при любом размере текста.

Единственное, что нам осталось, это назначить рамку, по нижнему краю нашей панели:

border-bottom: 1px solid #7ab7b7;   

Вот что должно получиться в результате:

Шаг 11 – Заголовок

Поскольку мы собираемся назначить белый цвет заголовку и описанию блога, давайте сначала добавим фон. Нам, скорее всего, не понадобится растягивать этот блок, но на всякий случай, мы добавим фоновый цвет и позиционирование картинки:

#header {   
    background: #01835f url(images/header_slice2.jpg) top repeat-x;    
}   

Теперь, добавим стили для шрифтов:

h1 {   
    font-family: "Myriad Pro", arial, sans-serif;    
    color: #fff;    
    font-weight: normal;    
    font-size: 4.8em;     
    padding-top: 25px;    
}   
  
p.desc {   
    font-family: "Myriad Pro", arial, sans-serif;    
    color: #fff;    
    font-size: 2.4em;    
}   

Отлично, теперь нужно расположить описание блога рядом с заголовком. Это можно сделать с помощью обтекания, но при этом, могут возникнуть проблемы с указанием ширины. Поэтому, для этой задачи мы будем использовать абсолютное позиционирование, к тому же, вы узнаете еще один, важный концепт.

Абсолютное позиционирование

Если мы хотим выдернуть элемент из «потока» не используя float, мы можем использовать абсолютное позиционирование, которое позволяет разместить элемент в любом месте внутри дива, не зависимо от других элементов, находящихся в том же диве. То есть, когда вы указываете позиционирование, скажем left: 10px, элемент будет расположен в 10 пикселях от левого края дива, не зависимо от находящихся в этом же месте других элементов. Первое, что нам нужно сделать, до назначения абсолютного позиционирования – это назначить родительскому диву position: relative, поскольку абсолютно позиционированный элемент, позиционируется относительно родительского дива.

#branding {   
    overflow: hidden;    
    margin-bottom: 30px;    
    position: relative;    
}   

Теперь мы можем установить абсолютное позиционирование нашего описания. При назначении position: absolute, мы можем указать позиционирование с помощью ключевых слов: left, right, top и bottom, используя пиксели, проценты или ems. Сначала верх – описание всегда должно быть в середине блока заголовка, следовательно, равно 50%:

p.desc {   
    font-family: "Myriad Pro", arial, sans-serif;    
    color: #fff;    
    font-size: 2.4em;    
    position: absolute;    
    top: 50%;      
}   

Теперь, нам нужно сдвинуть описание вправо, путем установки значения left: если мы используем пиксели, то при изменении размера текста, то наше описание перекроет заголовок блога, так что этот метод не годится. Кстати, ту же проблему, мы получим, используя проценты, но это не беда. Лучшее решение, в данном случае, будет использование в качестве единиц измерения ems, которые, увеличиваются по мере увеличения текста. Таким образом, насколько бы не увеличился текст заголовка, между ним и описанием, всегда останется пустое пространство.

position: absolute;    
top: 50%;  left: 8em;   

И выглядит это отлично.

Шаг 12 – Навигация

Давайте очистим навигационное меню от ненужных стилей, а также добавим стили шрифтов.

ul#menu {list-style: none; }   
  
ul#menu li a {   
    font-size: 1.8em;    
    text-decoration: none;    
    color: #2b2b2b;   
    text-transform: uppercase;   
}   

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

ul#menu li {float: left; }  

Конечно же, мы столкнемся с уже знакомой нам проблемой обтекания, но все, что нам понадобится сделать, это добавить overflow: hidden, к блоку навигации.

Каждый элемент списка составляет около 45px, так что давайте добавим отступ в 45 пикселей справа, для каждой позиции списка.

ul#menu li {   
    float: left;       
    padding-right: 45px;    
}   

Обратите внимание: Все значения паддинга можно записать коротко, следующим образом:

padding:  11px 45px 11px 0px;

Такая запись для свойства padding (а также margin), означает запись значений в следующем порядке: верх – право – низ — лево, в одну строчку.

Теперь, давайте добавим фоновое изображение, используя уже известную нам технику, чтоб быть уверенными, что наш фон растянется, при изменении размера текста:

#navigation {background: #8ec196 url(images/nav_slice.jpg) top repeat-x; overflow: hidden; }   

И снова, для того чтобы определить значение отступа, нужно измерить высоту панели (в моем случае это 40px) и вычесть из полученного числа высоту текста (18px), так вы получите общую сумму паддинга, а затем разделите ее на два: 40-18=22px.

ul#menu li {float: left; padding-top: 11px; padding-bottom: 11px; }   

Для того, чтобы передвинуть наше навигационное меню немного вниз, проще всего назначить нижний отступ (margin) диву branding.

#branding {overflow: hidden; margin-bottom: 30px; } 

И наконец, рамка, толщиной 1px, вверху панели.

border-top: 1px solid #9cebda;

Вот и все. Мы закончили с заголовком, давайте посмотрим на него:

Шаг 13 – Контент

Первое, что нам здесь нужно сделать – это создать две колонки – одну для записей, одну для сайдбара. Сейчас, это должно быть довольно легко: просто назначьте float: left, одной колонке, и float: right, другой.

#posts {float: left; }   
  
#sidebar {float: right; } 

И… Ничего не произойдет. По крайней мере, так это будет выглядеть, прокрутите вниз, и вы увидите сайдбар, «приклеенный» к правой стороне, сразу под записями. Прежде чем сайдбар сможет занять место рядом с записями, мы должны указать, сколько пространства будет занимать блок с записями, а также ширину самого сайдбара. И снова, мы будем использовать проценты вместо пикселей, так что если размер текста изменится, сайдбар все равно останется на своем месте.

#posts {float: left; width: 67%; }   
  
#sidebar {float: right; width: 33%; }  

И нам нужно назначить overflow нашему содержащему диву:

#content {overflow: hidden; }   

Очень мило, у нас получился небольшой макет из двух колонок.

Шаг 14 – Стилизация записей

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

#posts h2 {margin: 7px 0 4px 0; font-size: 2.4em; }   
  
#posts h2, h3, h4, h5, h6 {color: #3c3f40; }   
  
#posts p {line-height: 1.3em; padding: 7px 0; font-size: 1.2em; }   
  
#posts small {font-size: 1.1em; }   
  
#posts a {color: #327800; font-weight: bold; text-decoration: none; }   
  
#posts blockquote {margin: 0.7em 3em; border-left: 2px solid #327800; padding-left: 10px; }   
  
#posts ol, ul, dl {font-size: 1.2em; margin: 4px 0 4px 40px; }   
  
#posts h3, h4, h5, h6 {padding: 4px 0; }   
  
#posts strong {font-weight: bolder; }   
  
#posts em {font-style: italic; }   
  
#posts code {font-size: 1.2em; }   
  
#posts h3 {font-size: 1.8em;}   
  
#posts h4 {font-size: 1.4em; } 

Что выглядит примерно так:

Далее, нам нужно установить отступ в 35px, от раздела записей, но поскольку теги h2 уже имеют отступ в 7px сверху, так что добавим отступ в 28px, к верхней части блока с записями.

#posts {   
    float: left;    
    width: 67%;    
    margin-top: 28px;    
}   

И с разделом записей мы закончили. Приступаем к сайдбару.

Шаг 15 – Сайдбар

Сначала добавим фоновый цвет:

#sidebar {float: right; background: #d8ddd1;}   

И установим стили для шрифтов:

#sidebar h3 {   
    font-size: 1.6em;    
    color: #3c3f40;    
    margin-top: 10px    
}   
  
#sidebar ul {list-style: none; margin-left: 20px; }   
  
#sidebar ul li {font-size: 1.2em; }   
  
#sidebar ul li a {text-decoration: none;color: #525254; } 

Кроме того, нам нужно опустить сайдбар вниз, на 25px (35px-10px отступа у тегов h3). На этот раз, однако, мы не можем использовать свойство margin-top, потому что оно передвинет весь сайдбар, включая фоновый цвет. Нам нужно, чтобы фон начинался прямо под панелью навигации, в то время как контент, с отступом на 35px ниже, поэтому нам нужно использовать свойство padding-top. Мы также назначим отступы справа, слева и снизу, 25px нам вполне подойдет, поэтому мы смело можем указать значение отступа одним числом:

#sidebar {   
    float: right;    
    background: #d8ddd1;   
    padding: 25px;    
    width: 33%;   
}   

Но нет. Наш сайдбар сместился с нужного места! Это все потому, что мы добавили внутренние отступы по обе стороны сайдбара. Когда вы добавляете внутренний отступ (padding) к элементу, вы действительно делаете его больше. Мы только что сделали наш сайдбар шире на 50px, таким образом, сумма ширины сайдбара и колонки с записями превысила 100%. Чтобы это починить, давайте сначала переведем число 25px в процентной значение от 900px. Выходит около 2.7%, но мы округлим до 3%.

padding: 25px 3%;  

Обратите внимание: это другой способ сокращенной записи значений, он означает, что верхний и нижний отступ будет равен 25px, а левый и правый 3%.

Теперь, ширина нашего сайдбара составляет 33 + 6%, так что это слишком много, но все, что нам нужно это вычесть 6% из 33%

width:  27%;  

Думаю, что сайдбар такой ширины будет не очень хорошо смотреться, поэтому давайте уменьшим его до 25%.

Здесь важно запомнить, что такие свойства как padding, margin и даже border, добавляют дополнительную ширину к элементу, поэтому вам нужно приспосабливать ширину, для компенсации дополнительных отступов полей и рамок.

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

Шаг 16 – Подвал

Для начала, давайте сделаем шрифты немного крупнее, и добавим немного стилей:

#footer p {color: #a5bf8d;}   
  
#footer h4 {color:  #a5bf8d; font-size: 1.4em; padding-top: 0; }   
  
#footer ul {list-style: none; margin-left: 0; }   
  
#footer ul li a {text-decoration: none; color: #fff; } 

Далее, мы добавим нашу фоновую картинку:

#footer {font-size: 1.2em; background: url(images/footer_slice.jpg) repeat-x; }

И наконец, мы хотим получить тянущийся подвал, поэтому добавим цвет нижней части градиента, нашего фонового изображения, точно так же, как мы делали ранее:

background: #093b2b url(images/footer_slice.jpg) top repeat-x;

Далее, назначим однопиксельную рамку с верху:

border-top: 2px solid #1e956c;

Теперь добавим поля и отступы сверху и снизу:

#footer {   
    font-size: 1.2em;    
    background: #093b2b url(images/footer_slice.jpg) top repeat-x;    
    margin-top: 30px;    
    padding-top: 20px;    
    padding-bottom: 20px;    
}   

Далее, нам нужно создать три колонки, с помощью обтекания. Три плавающих элемента работают точно так же как и два, мы назначим float: left, каждой из колонок. Кроме этого, нам нужно указать ширину каждого элемента в процентах.

#copyright {float: left; width: 20%; }   
  
#links {float: left; width: 40%; }   
  
#feeds {float: left; width: 40%; }  

Не забывайте, что нам нужно указать overflow: hidden у родительского элемента.

#footer {overflow: hidden;}  

В этой части, я решила, что ссылки и блок RSS, будут смотреться лучше, если расположить их вначале, а информация о копирайте – справа; так что я изменила порядок дивов, и назначила блоку копирайта float: right, а содержимому тексту align: right.

#copyright {   
    float: right;   
    text-align: right;     
    width: 20%;    
}   

Вот и все, наша страничка готова. Вы можете протестировать ее в любом браузере, уменьшаяя или увеличивая размер текста — наша страница будет одинаково хорошо смотреться, и останется в читаемом виде, даже с отключенным CSS.

Перевод статьи «How to Design and Code a Flexible Website», автор Tessa Thornton