Плавающие блоки

Каркас страницы

Страница это ваш дом с несколькими комнатами. Вы ждёте гостей. Для комфорта расставляете удобные кресла для чтения, цветочные вазы с яркими цветами, стены украшаете картинами, в гостиной разжигаете камин… На веб-странице всё должно быть так же аккуратно и удобно.

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

Мысленно проведите вертикальные и горизонтальные границы этих блоков и увидите каркас страницы. Это и есть те самые «комнаты», в которых можно увидеть всё: и текст, и рисунки, и элементы оформления. Каркас страницы формируется из блочных элементов.

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

     

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

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

Размеры блоков

Ширина и высота блока

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

В рабочей папке создайте папку task_04, а в ней файл из копии шаблона файл с именем float. Документ в файле назовите Поплавки. В BODY создайте несемантический элемент DIV для визуальной группировки вложенных блоков. В нём структуру из элементов, соответствующих ролям, указанным cлева на картинке выше: ШАПКА, ВНЕШНЯЯ ПАНЕЛЬ, статья и подвал. В каждый из блоков запишите их названия.

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

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

····STYLE
htmlheight100%занять всю высоту рабочей областиbackground-colorwhiteдля правильного отображения заливки [BODY]
bodyheight100%background-colorsilverсеребряныйfontmenufont-size2.5emfont-weightboldtext-transformuppercaseвсе буквы прописные ? colorblack
····/STYLE

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

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

Поинтересуйтесь у руководителя, правильно ли вы ответили на вопрос? Если правильно, то вы поднялись ещё на одну ступеньку по профессиональной лестнице. Вы научились за образом страницы видеть код HTML + CSS, по которому она построена. Теперь вы сумеете исправить правило CSS так, что бы отключить верткальную полосу прокрутки.

Нескучное оформление

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

  • для шапки: forestGreen (зелёный лес);
  • для внешней панели: tomato (помидор);
  • для статьи: blueViolet(сине-фиолетовый);
  • для подвала: dodgerBlue (синий хитрец);

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

Родителем цветных блоков является DIV, а BODY, их предок (дедушка). Но это ещё раз подтверждает то, что блочный элемент DIV тоже занимает все 100% ширины родителя и всю её передаёт своим детям как наследство от «дедушки».

Теперь создайте правило для div . В него добавьте следующие свойства:

  • ширину установите в 760px,
  • отступов сверху и снизу быть не должно их величина равна 0, а справа и слева пусть браузер вычислит автоматически — auto,
  • поля тоже не одинаковые, сверху и снизу 0, а справа и слева 10px,
  • добавьте элементу рамку из границ сплошной линией solid шириной 1px серого цвета gray.
  • и в конце фон армейского цвета khaki.

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

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

  1. Свойство, устанавливающее ширину и высоту блокам, не будем записывать. По умолчанию ширина равна 100% родительской, а высота — размеру контента. Кстати, а какова ширина каждого из этих блоков в пикселах?
  2. Отступы по 10 пикселов сверху и снизу, а справа и слева 0.
  3. Текст выровняйте по центру.
  4. Символам назначьте белый цвет.
  5. И «для красоты» ещё пару свойств:
    • Рамка. Стиль всех четырёх границ groove в пять пикселов цвета silver,
    • и закругления углов, чтобы выглядели не острыми и не кололись. border-radius10px

Чтобы придать законченный вид странице внесите изменения в правило CSS для BODY.

  1. Отключите вертикальную полосу прокрутки. Вы же уже выяснили, из-за значения какого свойства она включилась?
  2. И удалите свойство цвет. Пусть его значение будет по умолчанию — прозрачным.

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

Макет готов для экспериментов. Пора приступать.

Поплавки

Математика

Задача — разместить блоки внешней панели и статьи в одной строке.

Для её выполнения нужно блоки сделать ýже, то есть задать им конкретную ширину. Запланируем блоки одинакового размера. Тогда ширина каждого будет занимать половину свободного пространства или в два раза меньше, чем сейчас. Как вы думаете, это правильное утверждение? Давайте порассуждаем.

Во-первых. Ширина width не совсем тот размер, какой блок занимает на экране. Размер общий экранный размер блока складывается так: заданная ширина + с двух сторон (поля + границы + отступы).

Во-вторых. Между всеми соседними блоками установлен вертикальный промежуток в 10px. Нужно запланировать такой же горизонтальный промежуток между двумя горизонтально располагаемыми блоками внешняя панель и статья.

Чтобы время провести с пользой поступим как «состоятельные кроты» из мультфильма «Дюймовочка»:

А что если нам посчитать?

И то дело!

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

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

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

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

Вычисление собственной ширины блока из расчётного размера.

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

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

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

Поток

Оба блока, уменьшенные по ширине, могли бы разместиться рядом друг с другом. Но почему-то это не так.

На самом деле это не ширина блочных элементов равна по умолчанию 100% родительской. Она может быть и меньше. Это браузер для них выделяет ширину равную width родителя: от края и до края. А блоки уже сами по умолчанию занимают всю выделенную им ширину. Поэтому ни статья, ни внешняя панель даже укороченные не могут оказаться рядом. Чтобы их поместить в одну строку нужно понимать, как браузер отображает элементы HTML.

Поток — схема размещения объектов на странице.

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

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

Если блочному элементу в свойстве float задать значение left или right, то он всплывёт поднимется над потоком, освободит в нём своё место и сдвинется в указанном направлении — станет поплавком. На освободившееся место тут же подтянутся следующие за ним блоки.

Поведение поплавков и окружающих их блоков наглядно представлено далее на Площадке Полигона «Поплавки».

В Полигоне блоки (серый и красный) могут выступать в роли поплавков. После того, как в правилах CSS изменять у них значение float, сквозь их полупрозрачные фоны будет видно поведение и других блоков.

Проверьте это самостоятельно. Фантазируйте, экспериментируйте. Самый интересный эксперимент начинается со слов: «А что будет, если…».

Чтобы убедиться в поведении блоков в потоке, измените ширину зелёного и серого блоков до 30%. Блоки остались на своих строках, хотя в первой строке справа достаточно свободного места для обоих. Чтобы вернуть Площадку в начальное состояние выберите (щёлкните) кнопку Сброс.

Затем попробуйте серому блоку изменить значение float, отправьте его в плаванье к левой границе родительского блока.

Он не сдвинулся с места потому, что его ширина 100% и он просто не может двигаться. Но что и почему произошло с красным? Попробуйте уменьшить ширину серого до 35%.

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

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

Верните Площадку в начальное состояние и проделайте то же и с красным. Когда он всплыл над потоком, его ширина изменилась автоматически — сжалась до ширины контента. Это не зря.

Все элементы плавающих блоков из блочных displayblock становятся строчно-блочными displayinline-block. Не забудьте это.

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

У свойства очистки три основных значения: left очистит пространство только под блоками прижатыми влево, right — вправо, а значение both — очистит пространство одновременно и слева, и справа. Проверьте разные значения с синим блоком.

Далее экспериментируйте самостоятельно с серым и красным блоками. Установите им ширину в 40%. Сдвиньте оба влево, затем вправо, потом один влево другой вправо и наоборот. Не забывайте иногда включать очистку чтобы понять и её особенности. После этого вы станете мастером в использовании плавающих блоков.

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

Полигон. Площадка 3 Плавающие блоки

Если у серого блочного элемента свойству float задать значение left или right, то он поднимется над потоком и освободит в нём своё место, в которое тут же подтянутся следующие за ним блоки. Что будет после того, как в правиле CSS красного свойству изменить значение float на right или left. Проверьте самостоятельно.
Блок свойством float поднятый над потоком освободил занимаемое им место. Его сразу занял подтянувшийся следующий элемент. Но… Поднятый блок, как бы отбрасывает в поток свою тень, которая не позволяет контенту других элементов занимать это место. Текст вынуждено обтекает плавающий блок.
Использовать плаванье элементов можно по разному:
  • располагать блоки страницы по горизонтали;
  • вставлять в текст изображения, формулы и т. п.
  • размещать многострочную серию изображений;
  • добавлять фонарики с анонсом в начале статьи;
Если под плавающими блоками нужно прекратить обтекание и убрать подтянувшиеся блоки, то блоку следующему за ним назначьте свойство, очищающее пространство занятое под плавающими: clear.
Если «Площадка» работает неправильно, сообщите руководителю.

Флот

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

··...floatleftблок не в потоке и прижат к левой границе

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

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

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

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

Стоит создать общее правило очистки для любого элемента, например, cls. Это, аббревиатура от английское слово clears, как и название свойства clear.

Всем элементам, следующим после поплавков, нужно будет добавить в атрибут class=... значение cls, объединив их в единый класс. Они все будут подчиняться созданному правилу и не станут занимать освобождённые пространства под поплавками.

.clsclearleftочистить под левым поплавком

Оцените что получилось.

Дизайнерские ошибки

Кораблекрушение

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

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

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

Нужно чтобы блок статья отступил вправо от блока внешняя панель на «убежавшие» 10px. Отступ — свойство margin. Чтобы блок отступал не от всех сторон сразу, а только вправо — margin-left. Создайте отдельное правило только для статьи и добавьте свойство, чтобы она отодвинулась от панели на 10px. Если всё сделано правильно, первая и вторая ошибки уже исправлены.

Сложный фарватер

Лоцманы водят корабли по сложным фарватерам без кораблекрушений. Ошибок 1 и 2 можно было избежать! Первый блок поплыл влево, а второй блок мог бы плыть и вправо.

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

Так как мы вычислили ширину блоков с учётом промежутка в 10px, то и первой ошибки тоже не будет. Она исчезла сама собой. Но у нас остался «подводный» камень.

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

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

Схлопывание

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

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

Именно так ведут себя два элемента на блочной модели слева.

Элементы в потоке схлопывают отступы как на рисунке слева.
Для поплавков схлопывание не используется.

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

  1. Создавая блоки, мы каждому установили отступы сверху и снизу по 10px. И пока они были в потоке, шли один за другим, схлопывание накладывало нижний отступ одного на верхний отступ другого. За счёт наложения промежуток между блоками оставался равным 10px.
  2. Но как только внешняя панель и статья были удалены из потока, то схлопывание прекратилось. Нижний отступ шапки и верхний отступ поплавков не наложились друг на друга, а сложились вместе. Промежуток между блоками стал равен 20px.
  3. Между поплавками и подвалом другой эффект. Следующему за поплавками подвалу назначено свойство очистки пространства. Оно и очистилось только по высоте поплавка без нижних отступов. Отступы ведь не входят в размер элемента.

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

Добавьте в правило для плавающих блоков ещё и значение верхнего отступа margin-top0.

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

Домашнее задание

Анонс

Одна из распространённых областей применения плавающих блоков — врезки. Рассмотрим анонс как одну из самых популярных врезок.

Небольшая разминка. В папке task_04 из копии шаблона создайте файл notice.htm, и назовите документ в нём Анонс статьи. В элемент BODY вставьте текст начала статьи, предложенной ниже, и разметьте её тегами элементов HTML5.

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

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

Анонс

Задача анонса (Анонс -- предварительное объявление, извещение.) привлечь внимание читателя к содержанию статьи и подтолкнуть к прочтению основной части текста.

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

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

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

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

Чем можно заинтересовать читателя в анонсе? Ответами на вопросы: «О чём статья?», «Почему об этом?», «Почему ещё одна, если об этом уже много сказано?» или самая интересная цитата из статьи.