Верстка div: Div верстка. Как ее использовать, различные варианты исполнения

Содержание

Div верстка. Как ее использовать, различные варианты исполнения

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

Div — верстка, это что такое?

Раньше, в эпоху становления интернета сайты верстались с помощью таблиц, что было достаточно неэффективно, и на смену этому устаревшему способу пришел новый — блочная верстка, используя Div-ы.

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

Если взглянуть практически на любой современный сайт, то можно отметить их некоторое сходство, а именно присутствие на этих сайтах определнных зон: меню (menu), контент (content), шапка (header), низ сайт (footer). Такие зоны есть практически у любого сайта. А выглядят они все примерно так, как показано ниже.

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

Преимущества блочной div верстки

Преимущества дивной верстки следующие:

меньше кода, а значит меньше «мусорных» тегов на странице
возможность более гибкой разметки, т. к. каждый div не привязан ни к чему (в отличие от ячейки таблицы)
возможность поменять местами блоки в коде не характерным способом (например, сначала идет контент, а потом идет шапка, хотя визуально сначала идет шапка, а потом контент)
гораздо больше возможностей для разных JavaScript’ов
современный вариант (табличная верстка более не применяется)

Начинаем кодить, используя Div (тег <div>)

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

Давайте создадим простенький шаблон страницы, используя div-ы. Учтите, данный код надо выставить после <body> и перед </body>. Ну это я надеюсь объяснять Вам не нужно.

<div> block 1 </div>
<div> block 2 </div>
<div> block 3 </div>

Что получилось? На странице должны появится слова: block 1, block 2, block 3, которые идут в столбик, один за другим, при этому на странице больше ничего нет. Такой же эффект, кстати, можно получить, используя html тег <p>. Вы спросите, и что дальше. А вот теперь то и начинается самое интересное. Для того, чтобы управлять нашими div-ами, изменять их и вообще делать с ними все, что Вашей душе угодно (на самом деле не все, но это в конце статьи) мы обязаны использовать файл CSS. Я не буду здесь подробно останавливаться на нем, так как думаю, что Вы знаете, что это такое. Желательно сразу себя приучить подключать файл стилей к своим страницам сразу же, а не вставлять в каждый файл стили. В итоге у нас должно получиться два файла: index.html и style.css — данные файлы необходимо создать в любом редакторе (даже блокнот сгодиться), главное, это правильно задать расширение файла при его сохранении.

Давайте теперь зададим для наших div-ов разделительную полосу красного цвета. Внимание, ниже код который нужно указать в css.

div{
border: 1px solid red;
}

Этот же код вставляем в index.html

<html>
<head>
<link href=»style. css» rel=»stylesheet»>
<head>
<body>
<div> block 1 </div>
<div> block 2 </div>
<div> block 3 </div>
</body>
</html>

Создав эти два файла (style.css и index.html) и открыв index.html мы увидим всё то же самое, что и в предыдущем случае, но у каждого дива будет красная граница. «Управлять» блоками мы будем с помощью CSS и присвоения конкретному div’у собственного класса. Сразу говорю, что писать что-то вроде style=”color: #a00;” (то есть использовать инлайновые стили) прямо на html-странице считается дурным тоном, а позже усложнит жизнь и вам — сложно отлаживать такую страницу. (представьте что Вы что-то захотели изменить на сайте, а у Вас тысячи страница, устанете изменять. Тут же просто надо изменить всего один файл.

Свойство float для Div-ов

Вот мы и создали выделение наших блоков красной линий, но, как говориться, на этом далеко не уедешь. Поэтому давайте разместим наши блоки горизонтально. Чтобы это сделать, воспользуемся отличным свойство CSS — float. Данное свойство отвечает за выравнивание наших блоков, и с помощью данного свойства мы сможем выравнивать наши блоки как нам хочется. Теперь давайте разместим наши блоки горизонтально, один за другим. ВНИМАНИЕ! Задать выравнивание можно только слева или справа, по центру выравнивания нет, учтите это! Напишем наш код в CSS.

.div{
border: 1px solid red;
float: left;
}

Если мы сейчас откроем страницу в нашем браузере, то получим результат — наши дивы располагаются друг за другом. При этом их ширина зависит от того контента, который находится в этих дивах, и вычисляется автоматически браузером. Если второму div-у задать свойства float:right, то мы увидим, что второй блок прибился к правой стороне нашей страницы. Таким образом легко можно задавать порядок наших дивов и формировать меню или контент. В будущем каждому div-у желательно задавать ширину, что потом не получалось всякой ненужной нам мишуры.

Важно! Сразу хочу отметить, если Вы новичок в css, то сразу привыкайте к хорошему, а именно используйте в css классы, а не id. Это поможет Вам в будущем, особенно тогда, когда Вы будете работать с библиотеками jQuery. Кроме того, названия классов очень рекомендуется писать «говорящие». Например, для контента желательно назвать класс дива .content, а для сайдбара — .sidebar. Если же Вы желаете выделить какое-то свойство для определенного элемента на Вашей странице, тогда используйте #id.

Важно! В коде Вы можете заметить странную приписку в html — <div style=”clear: both;”></div>. Что это за непонятный такой третий div спросите Вы? Все просто, уважаемые программеры, мы обязаны сообщить браузеру, что после этой команды, все остальные div-ы должны идти ниже предыдущих. Если это не сделать, то может получиться нехорошая ситуация, когда дивы выстраиваются в одну колонку, или нализают друг на друга. Это команда браузеру типа html тега <br>, но для div-ов.

Свойство padding и margin для div-oв

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

.div{
border: 1px solid red;
float: left;
padding: 10px;
margin-right: 10px;
}

Данным кодом в CSS мы указали нашим дивам расстояние между ними, а также расстояние внутреннего контента внутри самого блока.

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

Важно! Свойства padding и margin имеют следующие параметры. Если мы просто зададим количество пикселей и все, это то, что мы проделали с padding, то со всех четырех сторон будем сделано это расстояние. Если задать две величины, например так: margin: 10px 5 px. То сверху и снизу будет расстояние в 10px, а слева и справа по 5px.

Важно! Также существуют и персонализированные промежутки. Они задаются присвоением к нашим свойствам слов bottom (низ), top (верх), left, right. В нашем примере, приведенном выше мы используем расстояние справа.

Свойство border — задаем границы нашим div-ам

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

Какие могут быть стили? Например двойная граница, или прерывистая. И так далее. В нашем примере мы используем solid — одиночную линию заданной ширины. Третий параметр — это собственно цвет. Может задаваться 16-ричным кодом, либо словом по-английски, например black.

Также можно указывать границу для каждой из сторон нашего div-а, для этого воспользуйтесь уже упомянутыми top, bottom, left, right. Пример кода ниже.

.div{
border: 1px solid red;
float: left;
padding: 10px;
margin-right: 10px;
border: 1px solid red;
}

Свойство width и height для div-ов

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

width:300px; height:500 px. Откроем теперь нашу страницу, вы увидите, что наши блоки стали намного больше и теперь выглядят более полноценно. Забегу сразу вперед и скажу, что ширина и высота может задаваться в пикселях или процентах.

Учтите это.

Wrapper. Что это и зачем?

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

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

Как его использовать? Для этого мы создаем наш div wrapper сразу же после тега <body>, после чего размещаем внутри нашего враппера все остальные блоки нашего сайта, а затем закрываем div wrapper.

В CSS мы задаем нашему wrapper-у фиксированную ширину (обычно указывают 990 px, но здесь можно эксперементировать — это связано с тем, что на данный момент большинство пользователей используют разрешение 1024×768, но разрешение все время растет, поэтому в будущем эту величину надо менять), а также указываем следующее: margin-left: auto; margin-right: auto;

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

body, html{
margin: 0px; padding: 0px;

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

Div верстка – Кодим блочную верстку ИТОГ

Так, ну вот и пришло время, чтобы, наконец нам сверстать весь сайт, который был показан на картинке выше. Ниже я указал код, который должен быть в index.html и в style.css.

CSS файл:

body, html{
font: 12px tahoma;
margin: 0px;
padding: 0px;
}

div{
text-align: center;
}

.wrap{
width: 990px;
margin-left: auto;
margin-right: auto;
background: #ddd;
padding: 10px;
}

.header{
background: #e25e5e;
height: 100px;
margin-bottom: 10px;
padding: 10px;
}

.sidebar{
float: left;
padding: 10px;
width: 300px;
background: #5ee28d;
height: 700px;
}

. content{
float: left;
padding: 10px;
margin-left: 10px;
background: #5e86e2;
width: 640px;
height: 700px;
text-align: left;
}

.bottom{
background: #141926;
height: 60px;
margin-top: 10px;
padding: 10px;
}

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

ОБНОВЛЕНИЯ

ВНИМАНИЕ! Я буду постоянно обновлять данную страницу и внедрять в нее различные свойства, которые можно будет задавать нашим дивам. Поэтому почаще заглядывайте на эту страницу, чтобы быть в курсе последних изменений, которые касаются div-ов. Удачи в кодинге.

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

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

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

Оглавление:

Поток HTML документа
DIV верстка сайта
HTML каркас
CSS стили
Заключение
Наши рекомендации
Стоит почитать

Поток 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 верстке всегда.

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

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

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

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

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

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

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

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

Синтаксис

<div>...</div>

Атрибуты

align: Задает выравнивание содержимого тега <div>.
title: Добавляет всплывающую подсказку к содержимому.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег DIV</title>
  <style type="text/css">
   .block1 { 
    width: 200px; 
    background: #ccc;
    padding: 5px;
    padding-right: 20px; 
    border: solid 1px black; 
    float: left;
   }
   . block2 { 
    width: 200px; 
    background: #fc0; 
    padding: 5px; 
    border: solid 1px black; 
    float: left; 
    position: relative; 
    top: 40px; 
    left: -70px; 
   }
  </style> 
 </head>
 <body>

  <div>Lorem ipsum dolor sit amet, consectetuer 
   adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.</div>
  <div>Ut wisis enim ad minim veniam, quis nostrud 
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
   ea commodo consequat.</div> 

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид блоков, оформленных с помощью стилей

Верстка div — основные правила и принципы – WP-Club

На сегодняшний день верстка существует только 2 способами – блочная DIV верстка и табличная. Какая из них лучше, вопрос спорный. Ранее, самой известной версткой была табличная, в которой использовался главный тег <table> и другие дочерние. Верстка таблицами помогала равномерно располагать элементы дизайна, по отношению друг к другу, но код страницы был очень большим, поэтому страница на мониторе отображалась только тогда, когда полностью прогружалась в браузере. В результате этого веб-страница имела плохую индексацию. Табличной же версткой пользуются только для создания табличных данных или для графических изображений.

Блочная – самая распространенная верстка с несколькими достоинствами:

Не объемный код html
Можно накладывать один ряд на другой, что облегчает расстановку элементов
Хорошая индексация поисковыми системами
Быстрая загрузка страницы
Легкое создание видимых эффектов (списки, всплывающая подсказка, выпадающее окно)

В блочной верстке, основной тег <div>. Участки кода, которые отделены этим тегом, называются слоем. Все решения по стилю, вынесенные за границу кода html, в каскадные таблицы стилей, имеют доступ через классы или идентификаторы css.

Тег DIV и свойство float

Тег <div> — контейнер для контента, с присвоенным классом main, wrapper или container. В глубине контейнера есть блок с контентной частью, меню и сайдбаром. По системе, все ново-созданные блоки, начинаются с новой строчки. Свойство float можно использовать с любым элементом тега <div>, у которого не было точного позиционирования и используется для того, чтобы переместить направо или влево. Например, чтобы блок сайдбар находился с левой стороны, а блок контента с правой стороны, пользуются свойством float. Список значений — «left». «right» и «none».

Образец этих свойств на двух блоках:

<div>Блок для контента</div>
<div>Блок для сайдбара</div>

Получается такой результат:

Блок для контента
Блок для сайдбара

Свойство clear

Необходимо помнить – float относится к блоку, где прописано это свойство и на тот элемент, который будет следовать за ним. Получается, если добавить к вышеуказанным блокам еще один блок и не указать для него никаких свойств, то его расположение будет не с новой строчки, а справа от блока. Чтобы этого не происходило, используется свойство clear и новые блоки начинаются с новой строчки. Список значений: left – обтекание элемента слева, не допускает; right – обтекание объекта справа, запрещает; both – обтекание объекта с обеих сторон, запрещает; none – разрешено обтекание.

Вышеописанный пример с новым элементом:

<div>Блок для контента</div>
<div>Блок для сайдбара</div>
<div>Новый блок, расположенный снизу</div>

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

Блок для контента
Блок для сайдбара
Новый блок, расположенный снизу

Отступы в блочной верстке

Кроме распределения блоков, нужно правильно задать отступы между блоками и в внутри каждого блока. Это помогут сделать свойства padding и margin. Каждый отступ задается отдельно для правой, левой, нижней и верхней части. Указывают одной строчкой, перечисляя их 4 значения, например:

margin: 30px 20px 0 60 px

С такими параметрами блок будет на 30 пикселей ниже находящегося элемента, на 20 от элемента справа, с нулевым отступом снизу, и отступ в 60 пикселей слева. Если эти данные добавить для свойства padding, то получатся внутренние отступы контента.

Источник

DiV верстка — Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS

9 января 2021

Создаем макет сайта в 2 колонки на основе DIV верстки
Начинаем верстать макет сайта в 2 колонки на дивах
Прописываем нужный набор блоков в index.html
Прописываем CSS свойства для блоков
Выравниваем двухколоночный макет по центру
Подсвечиваем блоки для наглядности
Задаем обтекание блока левой колонки через Float

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

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

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

Создаем макет сайта в 2 колонки на основе DIV верстки

Итак, в предыдущей статье мы создали на своем хостинге (хотя для этих целей вполне подойдет и локальный сервер Denver тут см. обзор его возможностей) папку TEST, в которую положили два основных файла нашего будущего макета: Index.html и Style.css. Собственно, они и будут составлять наш простейший вариант каркаса.

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

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

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

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

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

Например, можете увидеть следующую картину:

Файлы движка вы должны копировать не в эту самую верхнюю директорию, доступную вам по FTP, а в так называемую, корневую папку. Как узнать, какая из присутствующих там директорий является корневой?

Ну, на крайний случай можно спросить у самого владельца хостинга. А что, они обязаны помогать вам в таких вопросах. Но вообще-то, она чаще всего будет называться либо PUBLIC_HTML, либо HTDOCS.

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

Как создать каталог с помощью программы FileZilla? Да, очень просто. Вам достаточно будет открыть в правой части программы коневую директорию и щелкнуть по пустому месту правой кнопкой мыши, а из контекстного меню выбрать пункт «Создать каталог».

Уф, создали папку TEST в коревом каталоге сайта. И на том спасибо. В общем-то, можно было с этим и не заморачиваться. Как так? А вот так. Директорию TEST можно было бы создать и в какой-нибудь внутренней папке вебсайта, но проще все же будет в корне.

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

c:\server\home\localhost\www\

Вместо диска «С» нужно указать диск на вашем компьютере, где установлен локальный сервер. Тогда, для просмотра создаваемого нами на основе Div верстки макета в 2 колонки, нужно набрать следующий путь в адресной строке браузера:

http://localhost/test/

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

Продолжим разговор о макете. В файле Index.html мы будем задавать сами DIV-контейнеры, на которых и будет строиться наш каркас, а в файле Style.css — описывать положение и внешний вид этих DIV-контейнеров. Это в двух словах, а как оно будет на деле, вы увидите немного погодя.

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

https://ktonanovenkogo.ru/test

Но тут есть два «но». Во-первых, вместо https://ktonanovenkogo.ru/ вам нужно ввести свой Урл, а во-вторых, обратите внимание на регистр латинских букв, которые составляют название вашей директории TEST.

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

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

Начинаем верстать макет сайта в 2 колонки на дивах

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

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

Мы зададим им размеры и настроим позиционирование на странице с помощью CSS. Итак, приступим.

Начнем с Index.html. Откройте его на редактирование в удобном для вас редакторе (я пользуюсь для этой цели лучшим из бесплатных текстовых редакторов Нотепад++ — тут его можно скачать и настроить).

Для того, чтобы привыкать к правильному оформлению HTML документов, давайте сразу пропишем стандартную часть (на этом я как раз останавливался в предыдущей статье. Там будет DOCTYPE (здесь читайте про доктайп и комментарии в Html) и все остальные верхние теги, которые браузер в случае их отсутствия может добавить и сам (умны они стали — жуть):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок документа</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
 </body>
</html>

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

<link href="style.css" rel="stylesheet" type="text/css">

Эта строка говорит браузеру, где ему искать и как называется файл каскадных таблиц стилей (он имеет расширение CSS), который нужен браузеру для корректного отображения задуманного нами оформления шаблона будущего сайта. В нашем случае он называется Style.css (здесь читайте про Style и Link подробнее), а искать его нужно в той же папке, где лежит Index.html (собственно, в котором и прописана эта строчка).

Почему именно в этой же папке? Потому, что если вы не прописываете никакого пути до файла (указываете только его название), то браузер будет его искать в той же директории, где лежит исполняемый сейчас (в нашем случае это Index.html). Т.е. отсутствие пути будет равносильно тому, как если бы я прописал путь до Style.css в виде:

<link href="https://ktonanovenkogo.ru/test/style.css" rel="stylesheet" type="text/css">

Но первый вариант записи короче и более универсальный, т.к. там напрямую не указывается путь до папки с файлами, а значит можно будет поместить файлы Index.html и Style.css в другую директорию, обратиться к Index.html из адресной строки и все равно будет подгружен Style.css. Подробнее про относительные и абсолютные ссылки тут написано, а заодно и про URL (универсальный идентификатор ресурса).

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

<link href="style.css" rel="stylesheet" type="text/css">

И все. Теперь вы сможете открыть Index.html (двойной щелчок мышью по нему) в браузере, назначенном по умолчанию для открывания файлов с расширением HTML у вас на компьютере, и при этом будет автоматически подгружен Style.css.

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

Прописываем нужный набор блоков в index.html

Теперь нам нужно будет создать четыре DIV контейнера для всех частей нашего 2 колоночного макета (шапки, левой колонки, области для контента, футера) и заключить их в один большой Div.

Внутрь Div контейнеров для частей макета можно будет заключить для наглядности названия этих блоков. Все это мы будем писать между открывающим и закрывающим Html тегами Body. Получится примерно такой код в Index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Блочная верстка - дубль 2</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>

<div>Шапка </div>
<div>Левая колонка</div>
<div>Содержимое страницы</div>
<div>Подвал</div>
</div>
 </body>
</html>

Т.е. сразу за открывающим тегом Body мы прописали открывающий тег основного Div контейнера макета:

<div>

В котором задали ID (в нашем случае id="maket"). В последствии для этого ID (читайте подробнее про CSS селекторы тега, класса (class), Id и универсальный селектор), в файле каскадных таблиц стилей Style. css, мы допишем CSS свойства, позволяющие определить размер и выравнивание основного Div.

После открывающего тега основного Div мы прописали код четырех контейнеров, которые станут элементами макета.

<div>Шапка </div>
<div>Левая колонка</div>
<div>Содержимое страницы</div>
<div>Подвал</div>

Всем этим четырем Div мы назначили свои индивидуальные ID, для которых затем в Style.css мы пропишем CSS свойства, помогающие настроить размер и взаимное размещение (позиционирование) этих контейнеров. Для наглядности, внутри них я прописал их назначения. Ну, и перед закрывающим тегом Body мы поставили закрывающий тег основного Div для всего макета:

</div>

Теперь, если открыть созданный нами Index.html в браузере, мы увидим просто перечисление в столбик названий частей 2 колоночного макета. Если вы откроете Index.html в браузере FireFox с установленным плагином Web Developer и выберите из меню этого плагина пункты «Контуры» — «Контур элементов уровня блоков», то увидите примерно следующую картину:

Т. е. все получилось именно так, как мы и хотели — четыре Div заключены в одном основном контейнере. Но почему же тогда все выглядит не так, как мы наметили на структурной схеме макета на основе блочной верстки? Просто мы еще ничего не написали в наш Style.css, который поможет чудесным образом (с помощью свойств CSS) расставить все дивы по своим местам.

Прописываем CSS свойства для блоков

Открываем в удобном для вас редакторе Style.css и прописываем стили CSS для только что созданных контейнеров. Сначала в Style.css стоит прописать правило для тегов Body и Html, которое позволит сбросить отступы макета сайта от внутренних и внешних границ экрана (для соблюдения кроссбраузерности):

body, html {
margin:0px;
padding:0px;
}

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

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

Поэтому мы пропишем для нашего основного Div ряд CSS свойств в Style.css, которые позволят создать макет фиксированной ширины (например, 800px) и выровнять его по центру относительно краев экрана (в Index.html для основного контейнера мы прописали ID под названием maket) :

#maket {
width:800px;
margin:0 auto;
}

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

Селектор { свойство1: значение; свойство2: значение; ... }

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

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

Первое CSS свойство двухколоночного макета:

width:800px;

задает ширину (тутпро Height и width читайте ) для основного Div контейнера (фактически ширину для всего макета), а второе CSS свойство:

margin:0 auto;

позволяет выровнять основной Div посередине относительно левого и правого края экрана. Само свойство Margin предназначено для задания отступов от внешних границ контейнера до соседних элементов страницы.

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

Первое значение, прописанное в Margin, равно нулю — это означает, что основной Div (фактически сам макет) будет вплотную прижат к верхнему и нижнему краю экрана (отступы сверху и снизу равны нулю).

Второе значение в Margin прописано как Auto — это означает, что отступ от левой и правой границы основного контейнера будет равномерно распределен, в результате чего он (а фактически сам макет) будет выровнен по центру относительно левого и правого края экрана. Такие вот пироги.

Две строчки CSS кода, а сколько текста нужно написать для подробного объяснения их значения (кошмар).

Пропишите данные свойства в ваш Style.css

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}

Сохраните изменения и откройте в браузере Index.html. Вы увидите, что теперь ширина двухколоночного макета перестала быть равной ширине экрана и уменьшилась до 800px. При этом он еще и выровнялся по центру:

Выравниваем двухколоночный макет по центру

Все хорошо, но есть одно «но». В браузере Internet Explorer 5 (тут читайте про историю IE, а 5 это очень старая версия, но может встречаться у посетителей до сих пор) выравнивание макета на основе блочной верстки по центру описанным выше способом не сработает.

Не понимает он этого, поэтому персонально для него (Internet Explorer 5) нужно будет дописать для Body следующее CSS свойство:

text-align:center;

text-align (здесь про него, а заодно и про text-decoration, vertical-align и text-indent читайте) поможет выровнять наш макет по центру в старых версиях браузеров. Но это S свойство, прописанное для Body, задает выравнивание по центру для всего текста на странице, а это нам вовсе не нужно.

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

text-align:left;

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

body, html {
margin:0px;
padding:0px;
text-align:center;
}
#maket {
width:800px;
margin:0 auto;
text-align:left;
}

Подсвечиваем блоки для наглядности

Теперь я предлагаю заняться внутренними блоками макета. Для большей наглядности предлагаю вам подкрасить эти Div разными цветами при задании фонового цвета для них, с помощью специально предназначенного для этого (свойства CSS — Background-color.

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

Итак, пропишем для всех названий ID наших внутренних Div свойство Background-color с разными значениями фонового цвета, например, так:

#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
}
#content{
background-color:#8080FF;
}
#footer{
background-color:#FFC0FF;
}

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

Теперь для того, чтобы увидеть границы отдельных контейнеров, нам не нужно будет прибегать к услугам плагина Web Developer (см. ссылку выше).

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

#left{
background-color:#00C0C0;
width:200px;
}

В результате наш макет примет вид:

Задаем обтекание блока левой колонки другими блоками через Float

Ну вот, уже гораздо ближе к структурной схеме двухколоночного макета сайта, но все же еще не совсем то. Нужно еще, чтобы блок Content располагался не снизу, а справа от блока Left.

Добиться этого не сложно, благо имеется свойство CSS под названием Float, позволяющее прижать любой блочный элемент к нужной стороне экрана и задать его обтекание с другой стороны, расположенным следом за ним (в HTML коде) элементами.

Немного не понятно? Не беда, сейчас рассмотрим все на примере. Добавим свойство для блока Left, позволяющее прижать его к левому краю и задать обтекание его справа контейнерами, расположенными ниже в коде. Выглядеть это будет так:

#left{
background-color:#00C0C0;
width:200px;
float:left;
}

Т.е. добавилось всего лишь одно единственное свойство Float со значением Left, предназначенное для блока Left. Весь код в Style.css, созданный нами на данный момент, будет иметь вид:

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
}
#footer{
background-color:#FFC0FF;
}

А наш макет на Div верстке теперь будет выглядеть так:

Класс! Почти то, что нужно, но опять же есть маленькая неувязочка. Блок Footer (подвал) не должен обтекать левую колонку справа, он должен располагаться в самом низу макета и занимать всю его ширину.

Как же решить эту проблему? Да, в общем-то довольно просто, но об этом я расскажу уже в следующей статье данного цикла, посвященного основам блочной верстки.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo. ru

Использую для заработка

DIV верстка — Как прижать футер (footer, подвал) к низу экрана в нашем макете сайта

9 января 2021

Какие проблемы возникли с нашим макетом сайта
Как прижать футер к низу макета сайта
Вставляем распорку и боремся с Internet Explorer

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

Основы блочной верстки
Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS
Создаем двухколоночный, трехколоночный и резиновый макеты для сайта

Какие проблемы возникли с нашим макетом сайта

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

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

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

Т.е. правильное поведение футера для случая малого количества информации на странице и большого экрана пользователя будет следующим:

Что бы это реализовать, нужно осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.

Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:

<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div>Шапка </div>
<div>Левая колонка Меню Меню Меню Меню</div>
<div>Правая колонка Меню Меню Меню Меню</div>
<div>Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div>
<div>Подвал</div>
</div>
 </body>
</html>

А в файле Style.css были прописаны следующие CSS свойства:

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}

Ну, а сам макет выглядел примерно так:

Как прижать футер к низу макета сайта

Итак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала потребуется задать высоту всей страницы, равную ста процентам (она будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер основного блока с макетом тоже до 100%.

Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:

body, html {
margin:0px;
padding:0px;
height: 100%;
}

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

Основные свойства CSS, при желании, вы можете посмотреть в Уроках CSS. Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:

#maket {
width:300px;
margin:0 auto;
min-height: 100%;
}

Еще я хочу его подсветить (div с). Для этого задам ему рамку с помощью соответствующего свойства Border (тут читайте про рамки в CSS):

#maket {
width:300px;
margin:0 auto;
min-height: 100%;
border: solid 3px black;
}

Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:

Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:

<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>

<div>Шапка </div>
<div>Левая колонка Меню Меню Меню Меню</div>
<div>Правая колонка Меню Меню Меню Меню</div>
<div>Содержимое страницы Содержимое страницы Содержимое </div>
</div>
<div>Подвал</div>
 </body>
</html>

Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style. css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:

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

Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.

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

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

Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:

#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
}

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

#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
}

Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):

Вставляем распорку и боремся с Internet Explorer

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

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

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

Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.

Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID (тут читайте про CSS селекторы) с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:

<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style. css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div>Шапка </div>
<div>Левая колонка Меню Меню Меню Меню</div>
<div>Правая колонка Меню Меню Меню Меню</div>
<div>Содержимое страницы Содержимое страницы Содержимое страницы страницы страницы страницы страницы страницы</div>
<div></div>
</div>
<div>Подвал</div>
 </body>
</html>

А в Style.css пропишем для этого (ID свойство Height, задающее высоту этому контейнеру-распорке равную высоте подвала:

#rasporka {
height: 50px;
}

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

Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):

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

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

Таким образом, нам нужно будет добавить для ID Footer дополнительные свойства:

#footer{
background-color:#FFC0FF;
clear:both;
height: 20px;
margin-top:-20px;
width:800px;
margin-left: auto;
margin-right: auto;
}

С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:

Ну вот, вроде больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и, возможно, в каких-то других старых тоже) не смотря на все наши старания подвал не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.

Все это происходит из-за того, что (браузер Internet Explorer 6 не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.

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

* html #maket {
height: 100%;
}

Это правило будет применено только для браузера Internet Explorer 6, остальные не будут его учитывать и выполнять.

Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:

body, html {
margin:0px;
padding:0px;
height: 100%;
}
* html #maket {
height: 100%;
}
#maket {
width:800px;
margin:0 auto;
min-height: 100%;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
width:800px;
margin-left: auto;
margin-right: auto;
}
#rasporka {
height: 50px;
}

Ну, а окончательный вид Index. html был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной.

Можете также посмотреть видео «Работа с Html тегом div»:

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

Макет на основе

DIV | Дизайн веб-сайта с использованием тега Div, Div против макета таблицы

Для Дизайн веб-сайта или веб-страницы нам необходимы базовые знания HTML и CSS. HTML вместе с CSS может создать веб-страницу ( в HTML5 ). До XHTML / HTML4 таблицы html использовались для разработки веб-страниц, которые сложно поддерживать и которые сложны по структуре. Также макеты на основе таблиц медленные.

Таблица против компоновки Div

Таблица VS Div Layout

CSS Layout с использованием Div

Тег

используется для группировки блочных и встроенных элементов уровня, а также для создания разделов на веб-странице.До 2004 мы использовали Табличные макеты . Но после 2004 года стал популярным макет на основе Div . Div может отображать быстрее, чем таблица, тем самым улучшая производительность страницы. Div может создавать как Liquid Layout , так и фиксированные макеты . Здесь мы узнаем, как создать фиксированный макет веб-страницы с помощью тега
и CSS.
Свойства тега Div
div — это элемент уровня блока.
div используется для группировки блочных элементов.
По умолчанию ширина div составляет 100% от родительской.
Высота блока
— авто. Средства гибкие для содержания внутри.
div можно легко настроить с помощью CSS.
Создать обертку Div
Это обертка полного макета.
моя веб-страница <стиль> * { маржа: 0; } .заворачивать{ ширина: 1200 пикселей; фон: #ddd; } Это обертка полного макета.
Вставить заголовок
моя веб-страница <стиль> * { маржа: 0; } .заворачивать{ ширина: 1200 пикселей; маржа: авто; фон: #ddd; } .header { высота: 150 пикселей; фон: # 333; }

Вставка меню навигации
Это заголовок
Это панель навигации
моя веб-страница <стиль> * { маржа: 0; } . заворачивать{ ширина: 1200 пикселей; маржа: авто; } .header { высота: 150 пикселей; фон: # 333; } .nav { высота: 50 пикселей; фон: # 000; }

Установка контейнера
Это заголовок
Это панель навигации
моя веб-страница <стиль> * { маржа: 0; } .заворачивать{ ширина: 1200 пикселей; маржа: авто; фон: #ddd; } .header { высота: 150 пикселей; фон: # 333; } .nav { высота: 50 пикселей; фон: # 000; } .контейнер{ высота: 768 пикселей; фон: #ccc; }

Вставить нижний колонтитул
Это заголовок
Это панель навигации
Это нижний колонтитул
моя веб-страница <стиль> * { маржа: 0; } . заворачивать{ ширина: 1200 пикселей; маржа: авто; фон: #ddd; } .header { высота: 150 пикселей; фон: # 333; } .nav { высота: 50 пикселей; фон: # 000; } .контейнер{ высота: 300 пикселей; фон: #ccc; } .footer { высота: 80 пикселей; фон: #ccc; }
Установка левого / правого контейнера
Это заголовок
Это панель навигации
Это нижний колонтитул
моя веб-страница <стиль> * { маржа: 0; } .заворачивать{ ширина: 1200 пикселей; маржа: авто; фон: #ddd; } .header { высота: 150 пикселей; фон: # 333; } .nav { высота: 50 пикселей; фон: # 000; } .контейнер{ фон: #ccc; } .слева{ ширина: 30%; высота: 200 пикселей; плыть налево; фон: # 333; } .правильно{ ширина: 70%; высота: 200 пикселей; плыть налево; } .Чисто{ ясно: оба; } . footer { высота: 80 пикселей; фон: #ccc; }

Макет
CSS | слои, абсолютное и относительное позиционирование и плавающие элементы
Путь // www.yourhtmlsource.com → Таблицы стилей → МАКЕТ
CSS
Одним из основных преимуществ использования CSS является то, что вам больше не нужно размещать свои сайты в виде таблиц. Возможности макета CSS дают вам полный контроль над положением и размерами всех элементов страницы.
Если вы пытались разложить страницу с таблицами, то, вероятно, раньше вас раздражала неспособность вашего браузера отображать вашу страницу именно так, как вы хотели. Структуры таблиц — не самые гибкие устройства для разметки страниц, поскольку на самом деле они не были предназначены для этой цели.Однако теперь, благодаря некоторой надежной поддержке браузеров в текущем поколении браузеров, у вас есть новый и значительно улучшенный вариант.
Навигация по страницам:
Работа с div · Плавающие элементы | CSS позиционирование · Абсолютное позиционирование · Размещение слоев · Относительное позиционирование | Горизонтальное центрирование
Эта страница последний раз обновлялась 21.08.2012

Работа с divs
Элемент
хорошо подходит для замены таблиц в качестве инструмента компоновки.Это элемент блочного уровня, который используется для разделения страницы на логические разделы div и может содержать все, что вам нужно внутри. Вы можете иметь блоков текста в div s, а затем объединить их в макет. У вас есть огромная свобода, с возможностью добавлять эти блоки или «слои» друг на друга. Посмотрите этот пример.
Тег div имеет несколько собственных атрибутов (за исключением align = "left | right | center" ), при этом все его форматирование применяется через таблицы стилей . Чтобы настроить простой блок навигации, мы должны использовать такой код (с CSS, находящимся во внешнем файле .css или блоке стиля):
div # навигация {width: 200px; фон: серый; отступ: 10 пикселей; }

... навигационные ссылки ...

В этом примере кода используется очень простой код CSS. Все элементы блочного уровня могут иметь свойство ширины, указанное в единицах или в процентах, а затем я просто добавил цвет фона и некоторое пространство для заполнения вокруг содержимого div .
Плавающие элементы
Поскольку деления являются блочными (т. Е. Они по умолчанию равны 100% доступной ширины экрана и добавляют разрывы строк между собой), все они будут просто складываться друг под другом, если вы не разместите их каким-либо образом. Самый простой способ сделать это — использовать свойство CSS float , являющееся основой большинства макетов CSS. Вы можете перемещать любой элемент влево или вправо, и он будет выравниваться по стороне любого элемента, внутри которого он содержится.
# column1 { float: left; ширина: 200 пикселей; отступ: 10 пикселей; }
# column2 { float: left; ширина: 200 пикселей; отступ: 20 пикселей; }
Чтобы создать макетов с колонками, вы просто перемещаете все деления столбцов на одну сторону , и они будут выстраиваться рядом друг с другом, пока они подходят. Такое расположение контента дает немедленные преимущества, такие как , прогрессивная загрузка (когда текст загружается, он немедленно отображается на странице, поэтому ваш посетитель может читать, когда страница формируется вокруг текста).Вы также можете дать каждому столбцу определенные поля и отступы, что даст вам больше свободы для размещения вашего контента. Ниже приведен пример кода, подобного приведенному выше CSS, с обоими элементами div и с заданным float: left; недвижимость:
Колонка 1
Колонка 2
С помощью этих плавающих элементов вы можете имитировать структуру таблицы, и ваша страница будет иметь традиционный макет без всех недостатков таблиц. Плавающие элементы требуют некоторой практики (особенно если столбцы не одинаковой высоты), но могут привести к множеству традиционных и нетрадиционных макетов.Но CSS не позволял просто имитировать механизмы компоновки прошлого — теперь вы можете контролировать положение элементов на странице вплоть до пикселя.
CSS-позиционирование
Есть два других типа позиционирования помимо плавающего: абсолютное и относительное . Вы будете использовать коды
.
тег { позиция : выбор; сверху : 0px; нижний : 0px; слева : 0px; справа : 0px; }
Примечание о совместимости с браузером:
Абсолютное и относительное позиционирование является функцией спецификации CSS2 и поэтому поддерживается »Internet Explorer 4+,» Mozilla, »Firefox,» Opera и »Safari.Для достижения наилучших результатов используйте новейшие доступные браузеры, так как они будут иметь улучшенные и более точные возможности рендеринга. Не используйте их, если ваши пользователи могут использовать старые браузеры.
Абсолютное позиционирование
Если вы разместите элемент (изображение, таблицу или что-то еще) абсолютно на своей странице, он будет отображаться в точном указанном вами пикселе. Скажем, я хотел, чтобы изображение отображалось на 46 пикселей сверху страницы и на 80 пикселей справа, я мог это сделать. Код CSS, который вам нужно добавить в изображение, —
.
img {позиция: абсолютно ; верх: 46 пикселей; вправо: 80 пикселей; }
Вы просто добавляете метод позиционирования, который вы используете в начале, а затем выталкиваете изображение со всех сторон, к которым оно будет ближе всего.Вы можете добавить CSS непосредственно в тег, используя атрибут style (как показано во введении к таблицам стилей), или вы можете использовать классы и идентификаторы и поместить их в свою таблицу стилей. Работает так же. Рекомендуемый метод — добавить классы для элементов макета, которые будут отображаться на каждой странице, но поместить код в строку для разовых вещей.
Изображение должно выглядеть так. Как видите, возможно, что элементы перекрывают с абсолютным позиционированием.
Слои позиционирования
Чтобы создать то, что мы называем слоями с тегом div , используйте такой код:
< div > слой материала

Сначала вы указываете положение слоя , затем его размеров (что является необязательным, размер слоя изменится сам). Если вы хотите придать цвет фону слоя, добавьте background-color: red; атрибут вместе с остальной частью вашего кода CSS.Как обычно, вы можете использовать веб-безопасные цвета или именованные цвета.
Все, что может отображаться на обычной странице, может быть размещено с помощью div s. У них загружается намного быстрее , чем, скажем, макет стола. Таблицы не отображаются на экране, пока они не будут загружены полностью. Что касается слоев, вся необходимая браузеру информация содержится в добавленных вами атрибутах стиля. Таким образом, он будет отображаться, как только будет загружена какая-либо его часть.
Чтобы слои перекрывали друг друга , вам нужно использовать команду z-index .Добавьте z-index: 1 с кодом позиционирования, и этот элемент появится поверх всего без этой команды. Если вы хотите, чтобы что-то еще проходило и через этот слой, добавьте z-index: 2 и так далее. Чем выше индекс, тем ближе div к началу страницы.
Поместите слой, содержащий содержимое вашей страницы, в верхние кода. Это то, что читатели хотят сразу увидеть. Затем ваша навигация и другие презентационные компоненты могут загрузить вокруг this, что позволит вашему читателю начать чтение как можно скорее и сделает вашу навигацию доступной тогда, когда она наиболее вероятно будет использована: после того, как страница будет прочитана.
Чтобы увидеть некоторые примеры дизайнов, выложенных как с плавающим, так и с абсолютным позиционированием, загляните в мой раздел редизайнов.
Относительное позиционирование
Когда вы позиционируете что-то относительно, вы изменяете его положение с того места, где оно было бы , если бы вы ничего не меняли. Я считаю, что это самый простой способ думать об этом. Например, в следующем предложении я смещу некоторые слова на 12 пикселей вниз и на 22 пикселя вправо относительно их начальной позиции.
ну вот несколько слов (несколько слов)
Слова в скобках — это слова на их исходных позициях, а жирным шрифтом — перемещенные слова. Код CSS для их перемещения —
.
несколько слов
Вы должны заметить, что если вы хотите переместить что-то влево, вы используете правильный код и отодвигаете его с той стороны и наоборот.
Чтобы переопределить унаследованное свойство позиции и снова сделать элемент обычной частью страницы, установите для него значение position: static.
Горизонтальное центрирование
Центрирование блока div или любого другого элемента уровня блока по горизонтали — это особый случай для макета CSS, тем более что в стандартной реализации Internet Explorer есть ошибка. Стандартный способ — установить для горизонтальных полей элемента значение auto, например:
#wrapper {ширина: 760 пикселей; маржа: 0 авто; }
Это будет работать в таких браузерах, как Firefox, Safari или Opera. Однако это не повлияет на версии Internet Explorer ниже 7.Однако есть хитрость, которую мы можем использовать, чтобы получить горизонтальное центрирование во всех браузерах. В сущности, IE неправильно центрирует элементы уровня блока, если к элементу, в котором они содержатся, применено text-align: center. Таким образом, мы можем применить это свойство к элементу body , и все элементы внутри него будут центрированы.
тело {выравнивание текста: центр; }
Затем необходим последний шаг. Вышеупомянутая строка, конечно же, центрирует весь текст внутри центрированных элементов, что обычно не то, что мы хотим, поэтому нам нужно выровнять текст внутри по левому краю.Вот и весь код:
тело {выравнивание текста: центр; }
#wrapper {ширина: 760 пикселей; маржа: 0 авто; выравнивание текста: слева; }
Легко, когда знаешь как, а? Будьте осторожны, если вы планируете смешивать абсолютное позиционирование и этот метод центрирования в одном макете. Если вы хотите, чтобы другие элементы были абсолютно позиционированы внутри оболочки, сначала сделайте их относительно позиционированными.
#wrapper {позиция: относительная; ширина: 760 пикселей; маржа: 0 авто; выравнивание текста: слева; }
Это создаст внутренний элемент, который вы будете абсолютно позиционировать, например, top: 0; слева: 0; появляются в верхнем левом углу оболочки, а не в верхнем левом углу всего окна.
Следующая остановка: добавление границ к вашим элементам.
Бесплатный HTML + CSS DIV Layout Generator On-line

Выберите любой макет, чтобы начать с
Вы уже создали макет своего сайта и вам нужно создать для него меню ?!
Создайте любую свою идею по макету веб-дизайна
Эта веб-утилита поможет вам начать разработку дизайна и верстки веб-сайта с помощью бесплатного онлайн-инструмента «Смешанный HTML» . Утилита генерирует полные сценарии таблиц стилей HTML и CSS на основе утилиты графического макета, доступной из вкладки редактора.
Утилита включает несколько функций, описанных ниже, и предоставляется абсолютно бесплатно.
Сгенерированный код не содержит скрытой рекламы, спама и т. Д. С помощью этого инструмента вы сможете создать макет страницы с нуля, используя простые и удобные жесты перетаскивания.
Нет ограничений на положение блоков DIV на странице. Вы можете добавить столько верхних и нижних колонтитулов, сколько захотите, кроме того, в макете нет табличных данных, все элементы позиционируются исключительно в CSS во внешней таблице стилей.
Генератор макетов разработан для энтузиастов, студентов, а также для опытных веб-дизайнеров, которые хотят сэкономить драгоценное время.
Передовая технология — для наилучшего взаимодействия мы рекомендуем использовать браузеры, перечисленные в разделе «Поддержка браузеров».
Почему вам стоит попробовать этот бесплатный генератор ?!
Быстрый старт для вашего макета с использованием родного DnD — Drag and Drop
Нет ограничений по позициям блоков DIV и HOST в структуре топологии
Удивительные бесплатные фоновые изображения HD
Создание полного рабочего макета веб-страницы за несколько кликов
Создайте свой макет так, как вы хотите, с нуля или готовые макеты
Абсолютно БЕСПЛАТНО — без скрытого спама или рекламы внутри сгенерированного кода HTML CSS
Столько нижних колонтитулов, заголовков, столбцов, содержимого и столько вложенности, сколько вам нужно
Нет табличных данных — просто очистите HTML-теги DIV, используя макет атрибута «class»
Все элементы позиционируются с помощью чистого CSS во внешней таблице стилей
Необходимо знать, как сделать, просмотрите этот короткий видео-пример!
Часы Посмотрите этот краткий учебный пример, как создать макет. Это короткое руководство, демонстрирующее, как создать простой макет и получить базовое представление о том, как использовать этот онлайн-генератор кода.
Для лучшего объяснения включите субтитры.

Макеты веб-сайтов так, как вы хотите — так для кого он создан ?!
Энтузиасты — для базовых исследований HTML и CSS, предварительные знания не требуются
Студенты — сэкономьте время, экспериментируя
Корпорации — мозговой штурм
Personal — для ленивых
Веб-мастера — экономьте время
Чтобы помочь нам улучшить и выпустить стабильную версию
, вставьте обратную ссылку на наш сайт
© 2014 Роман П. Макет
CSS Div — HTML / CSS
Привет Оливер,
Добро пожаловать в TSDN…
Во-первых, вы объявили DOCTYPE для документа, если вы этого не сделаете, IE перейдет в режим причуд, что может вызвать всевозможные проблемы с CSS.
Во-вторых, не похоже, что div содержимого закрыт, это вызовет ошибку проверки.
Если вы используете фон, обычно лучше поместить его в стили в качестве фона, а не в HTML. Примерно так:

</li><li> Блог Оливера</li><li>
это кусок тестовой записи