Теги HTML-контейнера - правильное использование? HTML контейнеры: верстка и форматирование Что такое container в css.

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

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

Основа блочной системы — это тег

Использовать тег DIV — не сложнее, чем . Как правило, стандартная структура сайта формируется следующим образом: существует основной контейнер

(часто ему присваивается класс с названием wrapper, container, main и т.д.). Внутри этого контейнера располагаются блоки меню, контентной части, сайдбара.

По умолчанию, каждый новый блок располагается с новой строки. Для того, чтобы расположить блок слева или справа от другого (например, чтобы расположить сайдбар справа), используется свойство float. По умолчанию оно имеет значение «none», но можно также выставлять значения «left» и «right».

Рассмотрим это свойство на примере с двумя блоками.

Блок для контента

Блок для сайдбара

Этот код даст следующий результат:

Свойство clear

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

Для того, чтобы избежать этого, блочная верстка div использует свойство clear, которое должно быть задано для того блока, который мы хотим расположить с новой строки. Чаще всего для этого ему задается значение «both», но можно также задать значения «left» или «right», если мы хотим не просто расположить блок на новой строке, но и задать ему выравнивание.

Дополним вышеуказанный пример новым элементом:

Блок для контента

Блок для сайдбара

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

Результат:

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

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

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

Margin: 20px 10px 0 40px

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

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

Можно также задавать отдельные свойства для отдельных граней с помощью margin-top, margin-bottom, margin-left, margin-right (и аналогично для padding). В таком случае, если какая-то из граней не будет указана, то отступ с ее стороны будет равен нулю или будет определен общими свойствами css, заданными для блоков на странице.

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

Все теги делятся на 2 группы:

- требующие закрывающего тега (контейнеры );
- не имеющие закрывающего тега (одиночные).

Теги-контейнеры записываются так:
<тег> подопытный объект . Косая черта (символ /) говорит о том, что тег закрывающий.

Одиночные теги записывают так:
одна хрень<тег> другая хрень

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

Ниже приведены основные html-теги и их применение.

Обязательные теги

- тег-контейнер, открывающий тег пишется в самом начале документа; закрывающий- в самом конце. Заключает в себе всё содержимое документа и сообщает компьютеру, что это действительно html-документ.

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

- контейнер внутри контейнера .
Предназначен для написания в нём заголовка страницы.

- тело документа, где находится основное содержание. Контейнер должен распологаться между и .
Имеет много параметров:

text
-цвет текста на странице,

bgcolor
-цвет фона страницы,

link
-цвет ссылок на странице,

На этом список обязательных тегов заканчивается. Идём дальше...

Теги - контейнеры

-необязательный, но необходимый тег. Имеет ценнейший параметр

href , без использования которого не обходится ни один сайт. Оно и понятно, ведь сочетанием a href образуется ссылка , а какой же сайт без ссылок?!
Пример: текст, который увидит посетитель

-устаревший, но надёжный тег для текста. Вот его параметры:

color
-цвет шрифта,

size
-размер шрифта (в относительных единицах, от 1 до 7)
и др.

-используется для выравнивания текста и других объектов по горизонтальному центру страницы

-предназначен для написания заголовка внутри страницы. Текст внутри тега отображается большим жирным шрифтом и устанавливается по центру. Вообще-то на месте цифры 2 в моём примере может стоять цифра от 1 до 6 - получаются заголовки от самого большого до самого маленького.

-устанавливает жирное начертание текста.

-курсивный текст

-подчёркнутый текст

-перечёркнутый текст

-используется для отделения параграфа. Позволяет установить для текста различные отступы.

Одиночные теги

-переброс на другую строку

---

-горизонтальная черта.

-размещение картинки на странице.
У него несколько параметров:

src , указывает путь к картинке (абсолютный или относительный);

align , устанавливает расположение картинки. Этот параметр может принимать значения \"center\", \"left\", \"right\".

alt , подпись к картинке, которая появляется при наведении на неё мышкой.

border , устанавливает толщину рамки вокруг картинки. Принимает значение от 0 до сколько хочешь.

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

ALIGN="выравнивание">

Атрибут ALIGN определяет тип выравнивания содержимого и может иметь те же значения, что и элемент P.

Отступы

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

Таблицы

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

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

Каждая строка начинается тегом <TR > и заканчивается тегом TR >. Отдельная ячейка в строке обрамляется парой тегов <TD > и TD > или <TH > и TH >. Тег

Теги

ALIGN="выравнивание"

BGCOLOR="цвет фона"

COLSPAN="количество ячеек"

HEIGHT="высота ячейки"

ROWSPAN=" количество ячеек "

VALIGN="вертикальное выравнивание"

WIDTH="ширина ячейки"

Атрибут ALIGN определяет выравнивание содержимого ячейки. Он может иметь одно из трех значений: LEFT (по левому краю), RIGHT (по правому краю) и CENTER (по центру). По умолчанию – CENTER.

Атрибут BGCOLOR определяет цвет фона для ячейки. Его значение можно указывать в символьной нотации или в формате RGB.

Атрибут COLSPAN позволяет объединить несколько соседних ячеек по горизонтали. Значение этого атрибута – количество объединяемых ячеек.

Атрибут HEIGHT определяет высоту ячейки в пикселях.

Атрибут ROWSPAN позволяет объединить несколько соседних ячеек по вертикали. Значение этого атрибута – количество объединяемых ячеек.

Атрибут VALIGN определяет вертикальное выравнивание содержимого ячейки. Он может иметь следующие значения: TOP (по верхнему краю), MIDDLE (посередине) и BOTTOM (по нижнему краю). По умолчанию – MIDDLE.

Атрибут WIDTH определяет ширину ячейки в пикселях.

Вопросы для закрепления.

1. Чем отличаются абзацы от заголовков?

   Какие бывают списки?

   Какие теги используются для изменения шрифта?Что такое «информация»?

4. Домашние задание:

1. Создайте таблицу, которая в первой строке содержит одну ячейку, во второй – две, в третьей – три ячейки.

2. На практике понаблюдайте эффект использования различных значений атрибута ALIGN тега .

теги html (8)

В настоящее время я изучаю html / css и заметил, что общая методика заключается в том, чтобы разместить общий контейнер div в корне тега body:

Есть ли веская причина для этого? Почему css не может ссылаться на тег тела?

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

Все ответы выше меня ошибаются. Тело действительно принимает ширину, поля, границы и т. Д. И должно действовать как ваш первоначальный контейнер. Элемент html должен действовать как ваш фоновый «холст», как он был предназначен. На десятках сайтов, которые я сделал, мне нужно было использовать только контейнер div.

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

Не делай этого. Используйте divs экономно и нацелитесь на точную разметку.

ОБНОВЛЕНИЕ - Не уверен, что случилось с SO, потому что я могу отредактировать этот ответ с 5 лет назад, но я не могу ответить на комментарии, поскольку он говорит, что мне нужно 50 Rep, прежде чем я смогу это сделать. Соответственно, я добавлю свой ответ на ответы, полученные здесь. - = - = -

Я только что нашел это, спустя годы после моего ответа, и вижу, что есть некоторые последующие ответы. И, конечно же, вы шутите?

Установленный сайт-заполнитель, который вы нашли для моего домена, который я никогда не утверждал, был моей разметкой или стилем или даже упоминался в моем сообщении, был очень четко базовым CMS-установкой с одним словом контента (он так же сказал на главной странице). Это не моя разметка и стиль. Это был шаблон Silverstripe по умолчанию. И я не беру на себя ответственность за это. Это, однако, возможно, один из двух примеров, о которых я могу думать, что это потребует контейнера div.

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

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

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

Честно говоря, я озадачен тем, что люди думают, что вам действительно нужен контейнер-контейнер, и начинайте с него, прежде чем даже пытаться просто создать тело. Тело, как я слышал, однажды объяснил один из оригинальных авторов спецификации CSS, было предназначено как «исходный контейнер».

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

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

Некоторые браузеры ( Internet Explorer) не поддерживают определенные свойства на теле, в частности width и max-width .

Самые распространенные причины для меня таковы:

1. Макет может иметь фиксированную ширину (да, я знаю, я много работаю для дизайнеров, которые любят фиксированную ширину), и
2. Таким образом, макет можно сосредоточить, применяя text-align: center к телу, а затем margin: auto влево и вправо от div контейнера.

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

Я мог бы, когда я установил ширину тела. В моем случае - 960 пикселей.

Это css, который я использую:

Это прекрасно центрирует встроенные блоки, которые также имеют фиксированную ширину.

Надеюсь, это полезно для всех.

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

Это позволяет вам размещать контент на странице, одновременно стирая фон или другие эффекты без проблем. Рассматривайте это как «Кадр» для контента.

У контейнера div очень хорошо, потому что, если вы хотите, чтобы сайт был центрирован, вы просто не можете сделать это только с телом или html ... Но вы можете, с divs. Почему контейнер? Его обычно используют, только потому, что его код должен быть чистым и читаемым. Так что это контейнер... Он содержит весь сайт, на случай, если вы захотите его обмануть:)

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

Создано 29.08.2010

Вступление

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

При подготовке этого материала использовалась книга:
"CSS. Профессиональное применение веб-стандартов"
Энди Бадд, Камерон Молл, Саймон Коллизон
Вильямс 2009

"HTML и XHTML. Подробное руководство."
Чак Муссиано, Билл Кеннеди
Символ 2008
А так же другие материалы.

Схема DTD

В самом начале раздела, в вводной статье, я писал - "вводим новые понятия и элементы по мере необходимости..." И вот эта необходимость настала.
Поговорим о высоком. Схема DTD (Document Type Definition - определение типа документа) представляет собой набор правил, читаемых компьютером и определяющих, что разрешено и не разрешено в конкретном документе (x)HTML. Браузеры используют эти правила при синтаксическом разборе веб-страницы, чтобы проверить, действительна ли она. Код документа должен быть не только синтаксически правильным, но и действительным (valid), т.е. соответствовать стандартам W3C (World Wide Web Consortium). Если код недействителен, браузер попытается интерпретировать разметку самостоятельно по ему одному известным правилам (нестандартный режим). Результат может быть непредсказуемым, скорее всего плачевным...
DTD предоставляется браузеру в объявлении DOCTYPE . Браузер выбирает режим вывода в зависимости от... В общем, нам достаточно знать следующее:

Если документ (x)HTML плохо сформирован или не содержит объявления DOCTYPE , он будет выведен в нестандартном режиме!

Объявление DOCTYPE представляет из себя 2 строки кода на языке SGML (Standard Generalized Markup Language - стандартный обобщенный язык разметки), размещенные в начале документа. Это объявление "заверяет" браузер, что Ваш документ намерен соответствовать указанному в нем стандарту. Если до этого мы начинали документ с тега html , то теперь будем начинать вот так:

Объявление DOCTYPE и тег html ...

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

Тег

Подготовка

Многие браузеры на основе своих таблиц стилей присваивают значения по умолчанию многим элементам страницы. Поэтому перед тем как писать код, рекомендуется сбросить эти значения. Для этого в папке css создадим файл reset.css , а в html-документе добавим на него ссылку.

Код файла reset.css /* сброс значений по умолчанию*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } table { border-collapse: collapse; border-spacing: 0; }

Как прописано в стандартах и скучных учебниках, тег div (division) разбивает документ на отдельные части, разделы. Вот так вот скупо, тоска.... Видимо это писалось еще во времена тотальной табличной верстки, когда он был не очень популярен - как-то без него обходились.
А выглядит он вот так:

Контейнер div

На примере этого тега, о котором, в общем-то писать действительно нечего, кроме того, что это блочный элемент, как параграф или загловок, мы рассмотрим наиболее важные концепции CSS. При использовании его с атрибутами class и id , тег div является основным строительным материалом для блочной верстки страниц в современном веб-дизайне.

Код HTML

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

На этом лирическое отступление заканчиваем и переходим к наверно САМОЙ СЕРЬЕЗНОЙ главе раздела HTML&CSS

Модель контейнеров

Область содержимого

Модель контейнеров управляет размещением и выводом элементов на странице. В рамках этой модели каждый элемент страницы рассматривается, как прямоугольный контейнер, обладающий определенными параметрами. У контейнера может быть содержимое (это то, что мы в него положили) или он может быть пустым. Дальше я буду все объяснять очень подробно! Это важно .

Эксперемент #1 Создадим 2 контейнера - один с текстом, другой пустой. Цвет фона для них сделаем #a55. /* Стили CSS */ .test_num1{ background-color:#a55; /* цвет фона */ }

СОДЕРЖИМОЕ. Текст.

Из полученного делаем выводы:

• Без указания каких либо параметров контейнер с содержимым имеет высоту, достаточную для вмещения содержимого, и занимает максимально возможную ширину (ширина родительского элемента)
• Пустой контейнер мы не видим вообще!!! Он просто "схлопнулся" по высоте. (в браузере IE6 - видим....)

СОДЕРЖИМОЕ. Текст.

Выводы:

• Пустой контейнер с явно заданными размерами выводится нормально
• Первый сюрприз. Браузер IE6 отображают контейнеры по другому, нежели все остальные... Специально задав недостаточную ширину, ожидалось, что содержимое выйдет за пределы блока. Так оно и случилось во всех браузерах, кроме IE6, который проигнорировал заданное значение width и увеличил ширину блока до размеров содержимого. Со свойством height то же самое, увеличивает размер контейнера по вертикали. Привыкайте.
• Обещаная подсказка (*) : Если вы сейча отключите объявление DOCTYPE, то сможете увидеть, что все версии браузеров IE увеличивают ширину контейнера и увеличат высоту, если текста будет больше (Opera, кстати, тоже увеличит высоту)
• При необходимости, когда ширины контейнера не хватает, текст переносится на следующую строку по пробелу.
• Свойсто CSS overflow , отвечает за способы отображения содержимого, если оно не вмещается. Что это такое - посмотрите, пожалуйста, в справочнике. Поэксперементируйте, добавляя разные значения свойства overflow в класс test_num2 , и посмотрите, что из этого получится

Отступы и рамки

В соответствии справилами CSS, свойства width и height устанавливают размер не контейнера, а области содержимого. По сути, мы имее дело с ЧЕТЫРЬМЯ(!) контейнерами, где содержимое является так называемым "ядром" (core content area) и помещается еще в 3 контейнера. Каждый из них имеет параметр, соответствующий значению одноименного свойства CSS (ни одно из этих свойств не является обязательным). В разных источниках используются разные термины для описания этих свойств. Схематически модель контейнеров можно представить так.

margin: 20px

border: 10px

padding: 30px

padding - внутренний отступ, или внутренняя полоска, или подложка. Обрамляет содержимое, отделяя его от границ контейнера. Заливается цветом фона вместе с содержимым.

border - рамка. Имеет цвет, толщину и стиль используемых линий. Чаще используются в декоративных целях.

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

Добавление padding , border и margin не изменяет размеры области содержимого, но изменяет общий размер контейнера.

Вычисляем ширину контейнера:
width + 2 *(padding + border + margin) = 40+2*(30+10+20) = 160px
Высота вычисляется аналогично (height вместо width ) и, в нашем случае, равна ширине.

А теперь простыми словами и более подробно

Свойства padding и border

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

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

Вычисляем общую ширину контейнера на основании имеющихся занчений свойств.

Так как высота не задана явно, она будет увеличиваться по мере заполнения контейнера содержимым.
Общая ширина контейнера = ширина содержимого +
отступ справа +отступ слева + толщина рамки*2

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

520+10+30+4*2 = 568px

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

Так как внутренних отступов нет,
Общая ширина контейнера = ширина содержимого + толщина рамки*2

Width= 568- 1*2 = 566px

Где 568 – ширина первого контейнера, а 1 – толщина рамки нашего контейнера.

Повидимому, здесь необходимо сделать некоторые пояснения:
Значения некоторых свойств для 1-го и 2-го контейнеров совпадают, например цвет фона, стиль и цвет рамки. Поэтому мы можем воспользоваться этим классом, а потом ПЕРЕОПРЕДЕЛИТЬ (!) несовпадающие свойства. Этот прием достаточно часто используется веб-дизайнерами.
Фишка в том - как мы его переопределили. Оказывается, к одному селектору можно применять несколько классов, указывая их для атрибута class через пробел! Причем, если в этих классах есть одинаковые свойства, то последнее переопределяет предыдущие. Соответственно, для контекстного селектора p действуют те же правила.
И еще, мы не стали переопределять полностью свойство border , а сделали это только для значения толщины рамки, использовав для этого свойство border-width .

Свойство margin

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

margin: 30px 20px;

Поля первого блока:
верхнее, нижнее - 30px
правое, левое - 20px

Ширина и высота блока, а так же рамка в данном примере значения не имеют.

Второй блок окружен полями - 50px;
Все достаточно просто, визуально разница в отступе от левого края хорошо заметна. Интерес представляет расстояние между блоками...
Логично было бы предположить, что расстояние между блоками, нижнее поле одного из которых равно 30px, а верхнее поле другого 50px, будет равно сумме этих полей, т.е. 80px. Но это не так. Смежные вертикальные полоски сливаются, принимая ширину большей из них. В нашем случае зазор между блоками будет 50px. Это очень полезное правило, позволяющее убирать не нужные вертикальные зазоры между абзацами, например. По горизонтали поля не сливаются.

Сейчас мы более подробно остановимся на этом очень важном для понимания моменте - слияние внешних полосок.

Html-код со встроенными стилями

Cлияние смежных вертикальных полей родительского и дочернего элементов.

Из вышепреведенного примера видно, что нижнее поле блока div , равное 15px, и верхнее поле блока p - 20px, "схлопнулись" и дали результирующее поле размером 20px. При этом горизонтальные поля остались на месте. (в браузере IE6 - нет...)
А теперь, если родительскому блоку div добавить рамку border:1px solid #111 , или внутренний отступ padding:5px , верхнее и нижнее поля вернутся на место! (проверьте самостоятельно)

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

Так же сливаются верхние и нижние вертикальные поля пустого элемента, а если пустых элементов несколько и они расположены друг над другом, то все их верикальные внешние полоски сольются в одну!

margin: 0px 20px;

Для свойства margin можно задавать ОТРИЦАТЕЛЬНЫЕ значения. Их можно использовать для наслоения элементов друг на друга. Для второго блока мы задали поля 50px, а потом переопределили значение для верхнего поля
-30px; . Еще отрицательные значения иногда используют для сокрытия элемента. Задав достаточно большой отрицательный отступ, например -2000px, мы смещаем элемент за пределы страницы, т.е. делаем его невидимым. Попробуйте самостоятельно.

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

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

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

Установите, пожалуйста, на свой компьютер второй браузер (Opera, Mozilla, Safari, GoogleChrome,IE6-8). Один из них должен быть IE!
О кроссбраузерности мы будем говорить позже, а пока хотя бы фиксируйте для себя различия в поведении браузеров. По этой ссылке вы можете скачать IETester

Блохи и грабли

• Грабли, говорите.... Да они пофсюду!!!
• Если что-то не идет, хотя должно по идее... - внимательно проверьте, а еще лучше просто скопируйте по-новой объявление DOCTYPE
• К сожалению браузеры IE5 и IE6 считают размеры контейнера по своему. Они считают свойство width равным сумме области содержимого и отступов, как внеш. так и внутренних.
• Наибольшее количество проблем возникает в браузерах Internet Explorer, для которых иногда приходится писать параллельный код CSS. Уже скоро:)

Плавающие элементы. Свойство FLOAT

Создано 28.08.2010

Понимание этой, достаточно не простой концепции, поможет нам …. в общем, если вы хотите чтобы элементы на странице вели себя предсказуемо …. Блин! Как же написать-то???

Итак: что плавает, как плавает и зачем плавает.
Плавают элементы, определенные тегами, для которых задано свойство float .

Float: left | right | none; /* Прим. если значение none - то элемент не плавающий */

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

Для примера берем рисунок и 2 параграфа с текстом. Помещаем все это в контейнер div . Контейнеру задаем рамку, для наглядности. Задаем для рисунка обтекание слева…. Не однозначный момент.…

Слева – это не значит, что содержимое будет обтекать наш рисунок слева, наоборот – справа! Иными словами, рисунок будет слева по отношению к последующему содержимому. Уф.… Как сложно иногда бывает описывать простые вещи. Вот так это выглядит.

А вот так это записывается: /*** код css ***/ .test-float { border:1px solid yellow; /* рамка контейнера (для наглядности)*/ } .test-float img { float:left; /* обтекание слева */ height:120px; /* высота рисунка */ margin:4px; /* внешние отступы со всех сторон */ }

первый параграф

второй параграф

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

Clear: both | left | right;

Соответственно отменяет обтекание: любое | слева | справа (в подавляющем большинстве случаев применяется значение both ). Ага, забыл ответить на свой же вопрос – "зачем плавает".

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

Так вот, свойство clear позволяет отменить обтекание. Для чего нам его отменять? Представьте себе, что в предыдущем примере у нас не 2 абзаца обтекают рисунок, а 1 абзац и 1 нумерованный список, причем список достаточно длинный. И если часть списка начнет обтекать рисунок снизу, а не с боку, то выглядеть это будет достаточно противно…. Представили? Поэтому лучше после первого параграфа очистить плавающие элементы, чтобы последующее содержимое начиналось ниже рисунка.
В нашем примере нужно просто очистить второй параграф, для этого добавим класс clear в нашу таблицу css, а потом укажем этот класс в качестве атрибута второго параграфа.

Clear {clear: both;} /*---------------------*/ .......

второй параграф

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

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

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

Пример 1

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

Пример 2

К двум блокам добавляем через пробел второй класс:
class="float-box test-box1 " тем самым переопределяя значение свойства float и width . Все три блока заключены в контейнер-оболочку

Блоки div#2 и div#3 делаем обычными, они тут же перестают видеть блок div#1, которого нет в общем потоке, и спокойно занимают его место. Происходит наслоение контейнеров. (В браузере IE7 и ниже - все друг друга видят и никто ничье место не занимает.... Вот так)

Пример 3

Опять все три блока плавающие. Заключены в контейнер-оболочку. Увеличиваем ширину блока div#3.

div#3 - не поместился по горизонтали и был перенесен вниз. Но "зацепился" за div#1 (мы специально сделали контейнеры разной высоты) и пристыковался к его левой кромке. Вот, кстати, подходящий пример (*) того, как изменение размера плавающего элемента может разрушить страницу.

Если внимательно сравнить последний пример с предыдущим, то можно заметить, что расстояние по вертикали между блоками div#2 и div#3 разное. В прошлый раз мы сделали эти блоки обычными и, как мы помним из модели контейнеров, их внешние поля слились. У плавающих элементов слияния внешних полосок НЕ ПРОИСХОДИТ! Таким образом зазор по вертикали стал равен margin-bottom + margin-top , а не большему из них, как в обычной жизни... Не стоит про это забывать.

Ну и еще один сюрприз. Контейнер-обертка схлопнулся (горизонтальная черта над блоками - слившиеся верхняя и нижняя линии рамки), т.к. все содержащиеся в нем блоки плавающие, а значит их нет в общем потоке и отношение к ним соответствующее - как к пустому месту (опять же браузеры IE7 и ниже живут по своим законам...). Что делать?
Есть 3 варианта решения этой проблемы.

1. Сделать содержащий контейнер-обертку тоже плавающим, задав для него свойство float . Тогда он будет относится к вложенным блокам как к "своим"
2. Установить контейнеру-обертке для свойства overflow значение hidden . Это трюк. И, как большинство трюков, в некоторых ситуациях имеет побочные эффекты, о которых мы поговорим в главе "Позиционирование"
3. Очистка с помощью свойства clear . Для этого должен быть элемент, которому это свойство можно было бы присвоить, например параграф p или блок div , в конце концов просто горизонтальная линия hr

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

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

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

Clear {clear: both;}

Блохи и грабли

• Вечная проблема - сползание блоков, которым надлежит распологаться горизонтально, вниз. Почему? Суммарный размер ширины блоков + отступы + рамки превышает ширину содержащего блока или страницы
• Браузер IE6 это отдельная, долгая и безумно печальная история (IE7 тоже, кстати, при благоприятных условиях может запросто разрушить вашу страницу). Пока мы на этом подробно останавливаться не будем

Позиционирование

Создано 02.09.2010

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

Блочные и строчные контейнеры

Строчные контейнеры (span, strong, i и другие..) выводятся в строке горизонтально. Блочные контейнеры (p, h1, div ... ) выводятся вертикально один над другим, если значение свойства float не определяет их как плавающие. Деление элементов на блочные и строчные достаточно условно, потому что задав определенное значение свойству элемента display , мы можем изменить тип генерируемого контейнера и переопределить элемент как:

• блочный - {display: block;}
• строчный - {display: inline;}
• ни контейнер ни его содержимое не выводится и не занимает места на странице - {display: none;}
• другие значения свойства смотрите в справочнике...

По умолчанию браузер выводит элементы документа последовательно, единым потоком. Изменить порядок следования мы можем с помощью свойства position (по умолчанию имеет значение static ).

Относительное позиционирование

Относительное позиционирование заключается в смещении элемента в потоке, относительно его начального положения.

div#2
position: relative;

margin-top: -30px;
margin-left: 30px;

Позиция элемента вычисляется с помощью свойств top, bottom, left, right .

Относительное позиционирование. CSS /* отсчет относительно изначальной позиции ! */ position: relative; left: 50px; top: 20px;

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

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

Контейнер, свойству position которого присвоено значение absolute , смещается вверх и занимает верхний левый угол ближайшего позиционированного элемента, у которого position: absolute | relative .

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

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

Абсолютное позиционирование. CSS /* отсчет относительно соответствующего угла позиционированного родительского контейнера ! */ position: absolute; right: 10px; top: 10px;

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

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

Фиксированное позиционирование. CSS /* отсчет относительно соответствующего угла экрана */ position: fixed; left: 0px; bottom: 200px;

Это абсолютное позиционирование, с той разницей, что позиция фиксируется относительно экрана . Зафиксированный элемент как-бы плавает в одном и том же месте экрана (как пример - логотип этого сайта), не смотря на прокрутку страницы. Браузер IE6 не поддерживает фиксированное позиционирование.

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

При наслоении контейнеров на переднем плане находится тот контейнер, у которого больше z-index. Свойство может принимать в качестве значений любые целые числа (в том числе отрицательные). Если известно, что элемент всегда должен находиться на поверхности, лучше задать значение побольше, с запасом, например: z-index: 2000;

Блохи и грабли

• Помните плавающие элементы? Чтобы предотвратить схлопывание содержащего контейнера, мы тогда задавали для него свойство overflow: hidden , и упоминали о возможных побочных эффектах. Так вот, если с помощью задания соответствующей позиции мы сместим какой либо блок (его часть) за границы содержащего контейнера, то "выступающую часть" просто обрежет .
• При абсолютном позиционировании в браузере IE6 родительскому элементу нужно явно задавать размеры, иначе блок будет позиционирован относительно страницы... Косяк браузера
• Часто забывают, что родительский элемент должен быть явно позиционирован! (при абс.поз.)

Практикум

Создано 19.10.2010

Подготовка

Создаем папку practicum (корневой каталог), внутри нее создаем папку css .
- В корневом каталоге создаем документ practicum1.html
- В папку css создаем файл practicum_css .css
- В начало документа вставляем объявление DOCTYPE (пока просто вставляем, более подробно мы разберем его позже)
- Структурируем документ, определяя основные теги: html, head, body
- Пишем что-нибудь внятное в теге title , а в разделе head ссылаемся на нашу таблицу стилей в папке css

Чтобы протестировать документ и правильность подключения таблицы стилей, задаем для тега body цвет фона #ccc , вставляем в документ параграф с произвольным текстом и обновляем документ. Все.

Постановка задачи

С относительным позиционированием мы уже разобрались. Все было достаточно просто и понятно. Гораздо интереснее - как я это "нарисовал"... Похоже относительным позиционированием здесь дело не обошлось....

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

1-й этап

Родительский контейнер

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

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

параграф 1

2-й этап

Правый блока (5) . Увеличиваем высоту, убираем фон и прижимаем к правому краю. Для этого создаем идентификатор #rightBox . Если мы просто пропишем в таблице css идентификатор #rightBox и применим его к правому блоку, то с удивлением обнаружим, что ничего не изменилось! Типичная ошибка, связаная со специфичностью. Дело в том, что к блоку применимы сразу два стилевых правила: #wrapper div и #rightBox . Первое из них более специфично, т.к. использует контекстный селектор. Чтобы все-таки переопределить первое правило, записываем идентификатор применительно к элементу div, выглядеть это будет вот так: div#rightBox . Теперь правила имеют одинаковую специфичность и применено будет то, которое записано последним. Если в результате перестановки правил в таблице стилей нужное нам правило окажется ближе к началу страницы, то оно опять не сработает.... Чтобы наше правило было определяющим, вне зависимости раньше или позже оно прописано в таблице, нужно сделать его более специфичным, например записывать так:

Параграф 1

Параграф 2

Второй блок (2) . Убираем фон, рамку делаем пунктирной. Класс - #old_position

Четвертый блок (4) . Устанавливаем относительное позиционирование. Смещаем вниз-влево. Идентификатор - #test_box . Вопрос - на сколько нужно сместить блок (4) влево (от начальной позиции), чтобы имитировать сдвиг блока (2) вправо на 50px?
Расчет.
Сначала вычислим расстояние от левого края блока (4):
отступ слева + 3 блока с правым отступом и удвоенной рамкой

2 + 3 * (100 + 10 + 2)= 338px

Потом вычислим положение сдвинутого вправо псевдоблока (2):
отступ слева + 1 блок с правым отступом и удвоенной рамкой + псевдосдвиг

2 + (100 + 10 + 2) + 50 = 164px

В результате получаем реальный сдвиг:
338 - 164 = 174px

#wrapper #test_box{ position:relative; right:174px; top:30px; }

Параграфы . Почему на 1-ом этапе мы задали для параграфов clear:left ? Потому что нам нужно, чтобы они обтекали только правый блок (5). Можете поэкспериментировать: уберите очистку и сделайте ширину блоков меньшего размера. Текст параграфа "устремится" в образовавшийся зазор между блоками (4) и (5). Насчет блока (4): мы помним, что хоть визуально он и смещен, но продолжает занимать первоначальную позицию в потоке.
Второй параграф очищаем полностью и отменяем обтекание. Иногда, чтобы не создавать специально идентификатор или класс, проще прописать правило непосредственно в документе, в атрибуте соответствующего тега.

3-й этап

Рисуем указатели величины сдвига . Для этого помещаем внутри блока (2) еще один блок с таким же атрибутом class="old_position" . Чем повторять те же свойства в еще одном классе, правильнее применить уже существующий класс, а потом, путем добавлением к атрибуту нового класса или идентификатора, добавить недостающие свойства и переопределить имеющиеся. Еще раз напомню, что если мы планируем использовать какой-либо набор свойств многократно, то их нужно оформлять как класс, если однократно, то лучше как идентификатор.
Переопределять свойства будем в идентификаторе #pointer . Переопределяем цвет рамки, убираем верхнюю и левую рамку и добавляем размеры блока (вернее тоже переопределяем, но те, которые были установлены еще во #wrapper div )

left:50px top:30px

Параграф 1

Параграф 2

Надписи, указывающие величину сдвига . Размещаем их внутри блока #pointer , применяем абсолютное позиционирование и смещаем в заданную позицию уже снаружи (за счет величины сдвига, превышающей размеры родителя, который никак на это не реагирует, потому что не видит абсолютно позиционированные элементы). Надписи заключаем в теги span , в качестве атрибута которых указываем класс caption . Мы помним, что плавающий или абсолютно позиционированный строчный тег автоматически становится блочным! Почему в данном случае удобнее применить тег span , а не div . Этим мы избавляем себя от необходимости переопределять ранее установленные для тегов div свойства, такие как рамка, фон и пр....
Если мы сейчас проверим, что у нас получилось, то, увы, не найдем своих надписей. Почему? Абсобютно позиционированные элементы находятся в не позиционированном родительском блоке! Значит они будут смещены относительно верхнего левого угла страницы. Вот там их и ищите.
Устанвливаем для родителя position:relative .

Два блока внутри блока (5) . Здесь совсем просто. Для определения стилевых правил используем конструкцию #rightBox div . Отменяем обтекание, устанавливаем размеры и отступы. Индивидуальные правила для каждого блока задаем прямо в атрибутах тегов.

4-й этап

Вставляем текст параграфов и названий блоков. В правом блоке (5) уменьшаем размер шрифта, а в блоках #4.1 и #4.2 выравниваем текст по правому краю.

/* добавляем размер шрифта, выравнивание текста */ #rightBox div{ ... font-size:75%; text-align:right; } #rightBox p{ font-size:75%; }

left:50px top:30px

Параграф под блоком, смещенным за счет внешнего отступа:
margin-top: -30px;
margin-left: 30px;

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

Cравнивая с блоками #4.1 и #4.2, размещенными справа, где блок #4.2 смещен вверх за счет отрицательного внешнего отступа, видим, что во втором случае элемент реально смещается, освобождая пространство для следующего за ним параграфа

Последние штрихи. Прозрачность . Иногда в презентационных целях можно тот или иной элемент сделать полупрозрачным. Регулировать прозрачность можно, используется свойство opacity , которому присваивается значение от 0 до 1 (1-не прозрачно). В браузерах IE свойство opacity не работает, и для этих же целей используется свойство filter , которому значение прозрачности присваивается следующим хитрым способом:
filter:alfa(opacity=80) , соотвестственно, от 0 до 100

Какой же способ применить нам? Оба. В CSS браузер игнорирует код, который не понимает, поэтому во всех браузерах, кроме IE, будет проигнорировано свойство filter , а в IE наоборот - opacity

Порядок наложения позиционированных элементов друг на друга определяет z-index . Чем больше z-index (целые числа), тем выше элемент по оси Z. Отрицательные числа применять можно, но не желательно... не все браузеры любят...
Чтобы блок #4.1 был сверху, нужно присвоить ему больший z-index (по умолчанию - auto, т.е. последующие выводятся выше, чем предыдущие). Чтобы наложившийся блок не закрывал текст, делаем выравнивание по правому краю. Уменьшаем размер шрифта.

Оптимизация

В окончательном варианте документ будет выглядеть так:

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

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

Добиться определенного результата можно разными способами. Рассмотренный выше пример продемонстрировал всего лишь один из этих способов.

Классы и специфичность. С одной стороны, мы стараемся не плодить классы и идентификаторы, а за счет использования контекстных селекторов обходиться существующими. С другой, при большом уровне вложенности элементов (по принципу "матрешки"), специфичность может сильно усложнить стилевые правила и тем самым снизить читабельность кода. Нужно находить разумный компромисс. В нашем случае конструкцию #wrapper div вполне можно было бы заменить классом .className , указав его в атрибуте каждого блока (1) - (5), с последующим переопределением. Или вообще, вполне оправдано определить для каждого блока свой идентификатор, а общие значения свойств задать с помощью правила, использующего множественные селекторы.

Вы можете попробовать сделать это самостоятельно. Экспериментируйте.