Блочная верстка сайта div верстка – Верстка блоками DIV. С самого начала — html(5), css

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

Не беспокойтесь, базовых знаний HTML+CSS будет более чем достаточно для простенькой верстки слоями. Это позволит на понятном практическом примере узнать основы и понять логику работы в связке html-элементов в блоках и каскадных таблиц стилей.

Что такое блочная верстка

Блочная верстка — это верстка дивами (div блоками) или слоями.

Термин «слой» довольно устойчиво употребляется в профессиональной среде, наравне с термином «див». Краткость и емкость!

История слоев уходит далеко в 90-е, когда компания Netscape ввела тег <layer> (слой) в свой браузер. Это была настоящая инновация, ведь теперь можно было показывать и прятать содержимое слоя, накладывать слои прямо друг на друга, менять положение слоев. Это был настоящий прорыв по созданию и отображению динамического контента на странице. Но в спецификации HTML этот тег не включили, зато разработали синтаксис по работе со слоями при помощи CSS — каскадных таблиц стилей.

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

Сейчас уже конечно попроще. HTML5+CSS3, понятная и прозрачная спецификация вместе с движком Chromium, который использует сразу несколько популярных браузеров, делают жизнь сайтостроителя проще и лучше.

За 20 лет проделан большой путь к унификации различных спецификаций — возможно в будущем нас вообще ждет нечто вроде единого браузера, который единственным возможным способом будет воспринимать блочную верстку сайта дивами, без необходимости поддерживать разные версии в том числе устаревших браузеров.

Я предлагаю вам перейти непосредственно к обсуждению слоев. Объясняя «на пальцах», отмечу что использование слоев в тесной связке со стилями очень упрощает работу. Но не стоит принимать любой элемент кода за слой, все-таки слой (блок) это скорее объединение этих микроэлементов в одну макро-группу — для формирования цельного дизайна блока.

Иными словами, мы берем тег <div>, применяем к нему стилевое оформление, а уже потом внутрь него помещаем несколько элементов веб-страницы, к которым, будучи «дочерними» элементами слоя (блока) тоже применяются стили.

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

Обратите внимание, одни и те же элементы, но помещенные в разные блоки, могут иметь разное стилевое оформление. Например ссылки в тексте статьи мы можем сделать менее выраженными, а ссылки в сайдбаре (или футере) — более яркими и заметными. О том как вставить ссылку в HTML читайте тут.

Принципы блочной верстки

Основных конструктивных принципов два:

• Разделяйте содержимое блока и его оформление
• Активно применяйте блоки (дивы) в верстке

Давайте расскажу немного подробнее. Во-первых, ваш html-код должен включать в себя только два вида тегов — основные теги разметки и теги форматирования. Это значит любое оформление следует выносить в css-файлы. Объясняя по-простому, это значит что никаких <div style=»»></div>, <p style=»»></p> и других подобных вещей с использование <style> быть не должно. Почему?

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

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

Оно и понятно, ведь теперь исключительная роль таблиц в сайтостроении — предоставление данных. Табличными данными может быть статистика, числа, метрики.

Слой (блок, див, контейнер) — базовый элемент верстки вебсайтов, к которому применяются стили CSS.

Кстати, в HTML5 для блочной верстки дивами добавили строгие типовые блоки страниц:

• <header> — для шапки
• <footer> — для подвала
• <nav> — для навигации
• <aside> — для боковой панели

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

Верстаем дивами на практике — создаем макет сайта

Давайте постепенно переходить к практике создания макетов сайтов. Для начала нам хватит двух файлов: index.html и файла стилей style.css. В первом мы сверстаем блоками макет сайта, во втором — применим к дивам стили, сделаем стильное оформление макета нашего сайта (как оформить сайт правильно?).

Более того, для всех этих манипуляций вам даже не нужен свой сервер и хостинг — все можно сделать на домашнем ПК, понадобится только текстовый редактор и браузер. Я пользуюсь редакторами Notepad++, Brackets и Sublime — по настроению и в зависимости от задач.

Для начала создайте пустую папку и положите в нее два пустых файла, как я уже говорил это index.html и style.css. Нам нужно написать обязательные для любого HTML документа элементы, подключить файл стилей и сделать блочную верстку. Я подготовил код для вашего index.html файла, не стал прописывать теги <description> и <title>, а лишь ограничился базовым необходимым кодом, вот он:

<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Blogwork.ru — блочная верстка</title>
<link rel=»stylesheet» type=»text/css» href=»style.css» />
</head>
<body>
 
<div>
    <div>
    <h3>Шапка сайта</h3>
    </div>
         
    <div>
    <h3>Навигация по сайту</h3>
    </div>
         
    <div>
    <h3>Меню сайта</h3>
    </div>
         
    <div>
    <h3>Основной контент</h3>
    <frameset rows=»10%, 80%, 10%» >
        <frame src=»1.html»>                
    </frameset>
    </div>
         
    <div></div>
                               
    <div>
    <h3>Футер сайта</h3>
    </div>
</div>
         
</body>
</html>

Результат:

Для того чтобы увидеть такой же пример, откройте в браузере файл index или перетащите его на панель с другими вкладками (не закладками). Возвращаясь к коду — как видим, блоки идут по порядку друг за другом и у них нет оформления потому что мы не заполнили файл style.css. Пример кода:

body {
            background: #f5f5f5;
            color: #000000;
            font-family: Arial, Times New Roman;
            font-size: 16px;
}
 
#container {
            background:#99CC00;
            margin: 40px auto;
            width: 1000px;
            height: 600px;
}
 
#header {
            background: green;
            height: 100px;
            width: 1000px;
}
 
#navigation {
            background: white;
            width: 1000px;
}
 
#menu {
            background: #99CC00;
            float: left;
            width: 300px;
            height: 400px;
}
 
#content {
            background: #d3d3d3;
            float: right;
 
            width: 700px;
            height: 400px;
}
 
#clear {
            clear:both;
}
 
#footer {
            background: red;
            height: 80px;
            width: 1000px;
}

Результат:

Цветовая гамма конечно не очень стильная как планировалось, но пойдет — в конце концов сегодняшний урок у нас по блочной верстке, а не подбору цветовой гаммы.

При этом, файлы в папке выглядят так:

Итак, у нас получился самый простой макет сайта. Он сверстан на дивах (имеет блочную верстку) и состоит из двух колонок и следующих блоков (контейнеров): шапка, навигация, меню, контент и футер. Каждому блоку присвоен соответствующий id: header, navigation, menu, content, footer — именно к этим уникальным id «цепляются» (прописываются) стили и свойства в файле style.css.

Надеюсь мой пример получился хорошим наглядным пособием того, как на практике осуществляется блочная верстка. Кстати, я подготовил для вас архив с файлами index и style, которые содержат вышеобозначенный код. Скачать здесь:

blogwork-blochnaya-verstka-html-div.zip

Настоящая верстка конечно же намного сложнее — там используются и фоновые изображения, и отступы, и много чего еще. Есть даже специальные техники для того, чтобы оптимизировать отображение макета сайта в различных браузерах.

Надеюсь, статья была полезна, готов ответить на ваши вопросы в комментариях.

blogwork.ru

Блочная div верстка с css свойствами

Div верстка является актуальной моделью создания сайтов.

В сети постоянно появляются новые сайты — новостные порталы, блоги и личные странички. Практически каждый из них создается на основе блочной модели, основу которой составляют блоки DIV. Сегодня мы разберемся в этой технологии, рассмотрим основные нюансы div верстки.

Оглавление:

1. Поток HTML документа
2. DIV верстка сайта
3. HTML каркас
4. CSS стили
5. Заключение
6. Наши рекомендации
7. Стоит почитать

Поток HTML документа

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

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

Основными представителями этих двух категорий, являются тэги div и span.

Соответственно, если речь идет о нормальном HTML потоке, все блоки div будут располагаться друг под другом, а span в линию.

Как вы понимаете, строчными элементами не получится создать нормальную разметку для сайта. Поэтому несколько лет назад, на смену табличной верстке, решили применять верстку на основе блоков DIV.

DIV верстка сайта

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

Давайте посмотрим этот процесс, на примере стандартной страницы, включающей в себя шапку, блок контента, сайдбар и футер.

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

Как вы видите на картинке, для верстки макета у нас используются следующие основные блоки:

• MAIN
• header
• nav
• content
• footer

Блок Main используется как контейнер для всего содержимого. Header — шапка сайта. Nav — блок навигации. Content — основная информация и контент. Footer — подвал сайта.

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

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

Но для начала, давайте создадим саму HTML основу нашего макета, и дадим блокам наименования, чтобы можно было работать с таблицами стилей.

HTML каркас

Если пропустить все служебные теги, то каркас нашего сайта будет выглядеть вот так.

<div>
<div>Шапка</div>
<!--header-->
<div>
<div>Контент</div>

<div>Навигация</div>
<!--nav-->

</div>
<!--main-->

</div>
<!--wrapper-->
<div>Подвал</div>
<!--footer-->

Для каждого блока у нас назначен класс. С его помощью мы будет задавать стили для блока — это поможет нам добиться нужного расположения на странице.

Самое время познакомится со стилями и свойствами, которые используются для div верстки сайта.

CSS стили

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

Float

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

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

Свойство float имеет четыре значения: none, right, left, inherit.

Нас интересует значение «слева» и «справа».

Значение float указывает на то, с какой стороны будет отображаться наш блок. Все прочие блоки будут обтекать его с противоположной стороны.

В нашем случае, для блока навигации мы должны указать значение left, а для основного контента значение right. Вот как это будет выглядеть в файле стилей:

.nav {
float:left;
}

.content {
float:right;
}

Кстати, можно задать свойство только для блока навигации. Блок с контентом будет автоматически расположен справа от навигации. Это будет достигнуто, благодаря обтеканию, которое получается при задании свойства float.

Отступы в CSS: margin и padding

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

Давайте представим, что нам необходимо сделать таким образом, чтобы наш основной блок MAIN, имел небольшой отступ от шапки сайта. Это можно реализовать, если назначить для блока div с классом main, свойство margin. Оно отвечает за внешние отступы блока.

Свойство margin имеет следующие значения: [значение | проценты | auto] {1,4} | inherit.

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

Есть возможность задавать только определенный отступ, например с верхней стороны. Это как раз наш случай. Вот как это будет реализовано:

.main {
margin-top:10px;
}

Теперь наш блок main будет иметь верхний отступ в 10 пикселей.

Теперь давайте оформить блок с навигацией и контентом. Представьте, что у нас уже есть готовый сайт. Все ссылки в навигации вплотную прилегают к левому краю страницы. А текст в блоке контента наоборот, вплотную прилегает к правой стороне. Довольно не приятное оформление. Нам нужно сделать внутренние отступы.

За это отвечает свойство padding, имеющее следующие значения: [значение | проценты] {1, 4} | inherit

Здесь тот же принцип, что и со свойством margin — можно задавать отступ для каждой стороны отдельно.

Давайте для начала отодвинем ссылки в навигации от левого края на 15 пикселей. Затем текст в блоке контента на 20 пикселей от правой стороны. В итоге наш CSS код немного дополнится:

.nav {
float:left;
padding-left: 15px;
}

.content {
float:right;
padding-right: 20px;
}

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

Видео к статье:

Заключение

Мы рассмотрели только основные свойства. В действительности их существует намного больше. Но в любом случае, представленная информация будет использоваться в div верстке всегда.

Наши рекомендации

Как удалить страницу в инстаграм.

Создаем кнопки для сайта онлайн.

Популярные тэги в инстаграм.

Стоит почитать

Зачем искать информацию на других сайтах, если все собрано у нас?

techprofi.com

Блочная верстка с помощью div

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

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

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

Блочная верстка — это подход, при котором сайт строят на основе блоков, в качестве блоков выступают теги div. Теги div имеют некоторые свойства:

• div — блочный элемент, поэтому, если не задана ширина, растягивается на всю ширину окна браузера;
• div — высота блока, если она не задана, равна содержимому. Пустой блок div имеет высоту — 0 px, поэтому не отображается на странице;
• div не имеет оформления. Чтобы его увидеть нужно задать ему стили в CSS.
• div не несет смысловой нагрузки, это просто способ структурировать сайт
• div — может содержать любое количество вложенных элементов. Так в div можно вкладывать другие блоки div, заголовки, параграфы, изображения и многие другие элементы

В HTML блок div записывается

<div>Пример</div>

Рассмотрим как оформить div с помощью CSS:

See the Pen div by Alex (@Asmodey) on CodePen.

Рассмотрим примененные к div свойства более подробно

Свойство border

Свойство border изображает границу вокруг элемента. Синтаксис свойства:

border: Толщина_линии вид_линии цвет;

При подставлении полных параметров:

Где solid — сплошная линия, 2px — толщина обводки и red — цвет. Видов линии существует очень много, но на практике чаще всего применяют:

• solid — сплошная линия
• dotted — точки
• dashed — пунктирная линия

Если возникает необходимость задать разные настройки для разных границ элемента примените следующий синтаксис:

border-top: 1px solid red; border-left: 4px solid yellow;

т.е. можно задать оформление конкретной границе.

Скругление углов элемента

Для скругления углов элемента используется border-radius. В примере показанном выше при использовании синтаксиса:

все углы скруглятся на 5 px. Если необходимо округлить каждый угол в отдельности, можно задать следующий синтаксис:

See the Pen border-radius by Alex (@Asmodey) on CodePen.

Первое число соответствует левому верхнему углу, второе правому верхнему, затем правому нижнему и левому нижнему. Т.е. обход идет по часовой стрелке.

Обратите внимание, что использовать border-radius можно без применения границы.

Все современные адаптивные сайта используют блочный подход к верстке и свойства обтекания элементов. Табличная верстка используется только для email рассылок.

w3.org.ua

div и HTML5 — учебник CSS

Ранее в книге мы уже несколько раз упоминали о том, что верстка сайтов таблицами канула в Лету, и ее успешно заменила блочная верстка. HTML-таблицы должны использоваться сугубо по прямому назначению (структурирование и отображение данных с распределением по строкам и столбцам), но никак не для создания макета веб-страницы и организации всего ее контента.

Что касается оформления внешнего вида сайта, то в современной веб-разработке HTML-код должен содержать лишь теги и контент в них, а стилевые правила необходимо размещать отдельно от HTML, в файлах CSS. Inline-стили, которые прописываются прямо в веб-документе — это исключение из правил, к которому стоит прибегать лишь по очень уважительным причинам.

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

Блочная верстка с <div>

С помощью разметки определяется расположение элементов на веб-странице. Например, мы создаем шапку сайта, внутри которой размещаем необходимый нам контент (логотип, номера телефонов, навигационное меню и т. п.). Точно так же мы поступаем с основным разделом веб-страницы, а также боковой панелью и футером. Все эти элементы, по сути, являются определенными HTML-тегами. И тегом номер один в блочной верстке является тег <div>.

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

Тег <div> универсален и часто служит контейнером для других HTML-элементов. Например, шапка сайта, футер либо сайдбар — это зачастую не что иное, как блок div, содержащий в себе такие же блоки и/или другие HTML-элементы.

Через различные классы и идентификаторы div-блокам задается соответствующее CSS-оформление. К примеру, чтобы было удобнее писать стили для шапки сайта, можно добавить к блоку класс .header, а для футера — класс .footer.

Использование тегов <div> в верстке не означает, что нужно отказаться от других тегов. Если для решения ситуации иной тег подходит лучше, используйте его. Яркий пример — тег длинной цитаты <blockquote>. Согласитесь, нет смысла использовать вместо него <div>, ведь <blockquote> прекрасно справится со своей задачей. Кроме того, это решение будет более правильным с точки зрения семантики.

Блочная верстка с HTML5

И, раз уж мы заговорили о семантике в веб-документах, стоит упомянуть и о тегах, появившихся в HTML5. Новые семантические теги были специально созданы для группировки контента конкретного типа.

Например, шапка сайта может помещаться в HTML5-тег <header>, а подвал — в похожий тег <footer>. Кроме того, существует еще множество других семантических тегов — <nav>, <section>, <article> и т. д. Данными тегами можно заменять обычные теги <div> для объединения элементов.

Как вы могли догадаться, HTML5-теги дают более точную информацию о том, что в них содержится. Это дает определенные преимущества в плане идентифицирования роли того или иного контента веб-страницы, однако со стороны стилизации ничего не меняется: вы можете точно так же применять CSS-стили к семантическим тегам, как применяете их к простым блокам <div>.

Далее в учебнике: основные правила создания разметки веб-страниц.

idg.net.ua

Блочная верстка с нуля. Верстка 2х-колоночного макета. Урок 2

Приветствую всех читателей блога!

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

Напомню наш макет, который я привел в предыдущем уроке:

Перед тем как начать верстку, давайте разберем теорию:

<div> — это тег, он является блочным (кстати, по поводу блочных элементов я скоро напишу отдельную статью, а пока не будем забегать наперед). Ему, как и любому тегу, можно присваивать класс (class) или идентификатор (id). Делается это так:

• присвоим класс для блока — <div class=»myclass»>какой-то контент</div>
• присвоим идентификатор для блока — <div id=»myid»>какой-то контент</div>

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

Имя класса может сколько угодно раз повторяться на одной странице, а вот имя идентификатора должно быть уникально в пределах одной html страницы. Например, <div class=»myclass»></div> может встречаться на странице много раз, это очень удобно, если у нас есть одинаковые блоки по своему оформлению, а вот если мы уже 1 раз использовали <div id=»myid»></div>, то 2-ой раз на странице мы его не можем использовать, для этого нужно придумать какое-то другое имя для идентификатора.

ID принято использовать для глобальных блоков, в которых находятся все остальные блоки, но это не главное правило, здесь уже на усмотрение верстальщика. Я очень редко использую id в своей верстке, отдаю предпочтение только классам, чтобы избегать ошибок — повторения id.
Открываем наш файл index.html с помощью любого текстового редактора, я использую sublime text и делаем такую разметку. Вот, что у нас должно получиться в html:

Теперь рассмотрим всю верстку детальней, которая находится в между тегами <body></body>.

Я создал класс под названием wrapper, а в него вложил 4 блока с разными классами: header, left-sidebar, content, footer. Имена классов соответствуют названию блоков в нашем макете, написал им контент, чтобы было понятно, какой класс к какому блоку относится. Давайте теперь посмотрим в браузере как выглядит наша верстка, кликнем 2 раза на наш файл index.html.

Как видно, верстка очень не сходится с нашем макетом:) А все потому что цвета, отступы, ширина, высота блоков верстке задается с помощью CSS (англ. Cascading Style Sheets — каскадные таблицы стилей).

В 6-ой строке у нас как раз подключается файл style.css, в котором мы напишем вот такие стили. Его также нужно открыть удобным для вас текстовым редактором. Напомню, что в href=» » должно быть имя файла стилей, которое у вас в директории. Т.е. если у вас лежит фала main.css, тогда подключение этого файла будет выглядеть вот так — href=»main.css».

Теперь давайте посмотрим, что же у нас получилось после того, как мы добавили файл стилей c его содержимым.

Уже более похоже на наш мокап, но почему-то футер не на своем месте и правый блок с контентом поверх футера. Это все потому что мы применили для блоков left-sidebar и content свойство float:left. Это свойство определяет по какому краю будет выравниваться наш блок и при этом следующие за ним элементы будут обтекать блок с других сторон. Чтобы футер стал на свое место, мы после блоков, у которых применено свойство float:left, должны добавить блок с классом clear, это еще называется «очистить поток».

Css свойство clear

Чтобы определить, должен ли контент, который «обтекает» float-блок, быть сброшен вниз, мы используем свойство clear. Список возможных значений свойства:

• left – не допускает обтекание «float» блока слева
• right – запрещает обтекание блока справа
• both – запрещает обтекание блока с двух сторон, т.е. и слева, и справа
• none – разрешено обтекание

Итак, теперь в файл style.css добавим изменения, а именно после .content добавим класс clear с таким свойством.

А в index.html добавим после <div class=»content»></div> наш блок с классом clear. После изменений наш конечный варианта html-файла будет выглядеть вот так:

А если мы посмотрим, что же у нас получилось в браузере, то увидим, что наше свойство clear сделало очистку флоатов и теперь footer действительно на своем месте.

Отлично! Теперь давайте немного подпилим наши контентные блоки, добавим им одинаковую высоту, чтобы наша верстка была похожа на мокап. Добавляем свойство height для класса left-sidebar и content — высота блока, указывается в пикселях. После всех изменений вот как выглядит наш конечный файл style.css

Теперь посмотрим что же нам показывает браузер:

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

Подведем итоги урока и я расскажу о css свойствах, которые мы использовали для данного мокапа.

• width: 1000px; — это ширина 1000 px у блока;
• margin: 0 auto; — блок будет выровнен по центру относительно родительского блока. В нашем случае родительским блоком выступает body и html, т.е. весь документ;
• padding: 20px 0; — внутренние отступы у нашего блока по 20 пикселей;
• margin: 0; — внешние отступы нашего блока от других соседних;
• color: #ffffff; — цвет текста, в данном случае мы указали 16-ричный цвет. #ffffff — белый;
• background: #ffffff; — цвет фона блока, белый;
• font-size: 20px; — размер шрифта в пикселях;
• line-height: 24px; — высота линии текста;
• text-transform: uppercase; — все буквы большие.

Ниже приведу скрин, который показывает на примере, что такое padding и margin. Переписывать htmlbook.ru нет смысла, более детально со всеми свойствами вы можете ознакомиться именно там.

Спасибо, если дочитали статью до конца. Надеюсь она была интересной и познавательной. Чтобы не пропустить следующую статью — подписывайтесь на сайт и добавляйтесь в группу.

Предыдущая статья

Следующая статья

freelancerblog.ru