УРОК 11. РАССТАНОВКА БЛОКОВ И КОНТЕЙНЕРОВ

Проверка задания 5

На уроке 10 вы получили задание:

• Создать новый проектный html-файл "project9.html";
• Вставить в файл три контейнера <div> с небольшими текстами, в которых будет по 2 абзаца, т.е. блока (контейнера) <p> по 3-4 предложения;
• Назначить каждому контейнеру <div> внешние отступы в 25 пикселей и жирную чёрную рамку толщиной 5 или 6 пикселей;
• Назначить содержимому (контенту) каждого контейнера <div> внутренний отступ от краёв контейнера: 15px 22px 18px 27px;
• Назначить ширину каждого контейнера <div> последовательно: 80%, 70% и 60%;
• Назначить каждому блоку <p> внутри контейнеров <div> внешние отступы по 14 пикселей и жирную чёрную рамку толщиной 3 пикселя;
• Назначить каждому блоку <p> внутри контейнеров <div> внутренние отступы по 18 пикселей;
• Назначить каждому блоку <p> внутри каждого контейнера <div> различную ширину в процентах - 40% и 65% соответственно.

У меня получился такой результат в html-файле:

В каждом из трёх контейнеров <div> у нас по два абзаца, заключённых в блоки <p>.

На экране браузера у вас должен появиться схожий результат дизайна:

Какие бы мы не присваивали характеристики контейнерам и блокам внутри контейнеров, всё равно они выравниваются по левому краю.

Позиционирование внутренних блоков в контейнере

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

Для этого наш первый контейнер <div> сделаем родственным блокам, которые помещены внутри него. Иначе браузер может воспринять блоки <p> как самостоятельные контейнеры. Для этого нам в стили первого контейнера <div> необходимо вписать селектор position (с англ. "положение") и дать ему значение relative (с англ. "родственный"):

position: relative;

Также нам необходимо тогда назначить контейнеру высоту, используя соответствующий селектор height (с англ. "высота"). Предлагаю поставить значение 250 пикселей:

height: 250px;

Тогда в стилях первого контейнера у нас получиться:

<div style="width: 80%; height: 250px; position: relative; margin: 25px; padding: 15px 22px 18px 27px; border: 6px solid black;">

У вас должен был получиться такой код стиля первого контейнера <div>:

На экране браузера у вас должен появиться схожий результат дизайна:

Я применил высоту в 250 пикселей. Однако, если у вас получилось наслоение нижней границы контейнера на второй блок <p>, то надо пока просто увеличить значение height (высоты)/

Например, у вас получилось так. Ничего страшного: увеличьте значение высоты.

Вы можете попробовать увеличить на 50 пикселей, сохранить файл, обновить браузер. Не достигли пока желаемого? Увеличьте ещё, пока после сохранения файла и обновления браузера нижняя часть рамки контейнера <div> не опустилась ниже второго внутреннего блока <p>.

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

position: absolute;

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

width: 400px;

Пока что у вас получилось так:

На экране браузера у вас должен появиться схожий результат дизайна:

Блоки наслоились друг на друга.

Результат пока не достигнут: блоки не расположились горизонтально, потому что оба "прижались" к верхнему левому углу материнского контейнера <div>. Чтобы их "разлепить", необходимо добавить в расположение блоков начальную точку позиционирования от левой стороны материнского контейнера <div>. Мы уже знаем, что оба блока отодвинуты от левой стороны контейнера на 14 пикселей:

<p style="...; margin: 14px; ...;"> (внутренние отступы материнского контейнера <div> в случае с абсолютным расположением внутреннего блока автоматически отменяется)

Зелёная область - внутренние отступы padding. Как мы видим, они перестали работать.

Что мы видимо с внешними отступами margin самих блоков:

Оранжевая область - внешние отступы margin. Как мы видим, только они теперь работают относительно материнского контейнера <div>.

При абсолютном позиционировании блоков внешние их отступы работают только относительно границ материнского контейнера <div>, но не относительно друг друга!!!

Теперь дальше. И ширина каждого блока нами установлена в 400 пикселей. Так что для первого блока установим удаление слева в ноль, а для второго - 450 пикселей, чтобы наверняка отодвинуть его за пределы первого блока:

left: 0px; и left: 450px;

Теперь проверим код стилей первого контейнера <div> и обоих блоков <p> внутри него:

Посмотрим теперь, что получилось после сохранения html-файла и обновления браузера:

Блоки, наконец-то, расположились в ряд!

Мы достигли поставленной цели.

Теперь вы понимаете, почему мы сменили проценты ширины на пиксели? Верно, чтобы браузер понимал, как располагать блоки в контейнере. И это только один из способов совмещать блоки и контейнеры! Он простой, но в вёрстке не всегда эффективен, поэтому в дальнейшем мы освоим и второй, более современный и удобный способ позиционирования блоков и контейнеров.

Однако, теперь контрольный вопрос: "Каково теперь расстояние между двумя блоками <p>? Ответ мы разберём на следующем занятии.

Теперь увеличим ширину второго блока до 600 пикселей:

width: 600px;

Проверим код стиля:

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

Позиционирование контейнеров с блоками между собой

Ну, а теперь пришло время самих контейнеров.

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

• в первом контейнере соответственно по 250 пикселей;
• во втором контейнере соответственно по 220 пикселей.

Во втором блоке первого контейнера уменьшим отступ слева до 300 пикселей, и ширину самого первого контейнера <div> теперь ужмём с 80% до значения 650 пикселей, чтобы оба блока туда вместились по ширине и отступам, и увеличим высоту до 300 пикселей (если не хватит, то сделайте побольше).

Код стилей тогда получится такой - проверим:

Дизайн контейнеров и блоков тоже изменился:

Далее разместим и блоки второго блока горизонтально с учётом заданной им ширины:

position: absolute;

left: 0px; и left: 250px;

Чтобы всё получилось, нам и второй контейнер <div> необходимо сделать материнским по отношению к его блокам:

position: relative;

Теперь придадим селекторам ширины и высоты второго контейнера <div> абсолютные значения, например:

width: 550px; height: 300px;

Теперь код стиля второго контейнера <div> и его блоков будет таковым:

Сохраним новый код и обновим браузер:

Мы получили второй контейнер <div> готовый к горизонтальному позиционированию. Осталось их объединить, чтобы расположить горизонтально. Для этого мы и должны вновь вспомнить главный принцип веб-вёрстки - "принцип матрёшки". Значит, чтобы сделать первых два контейнера "одной командой", необходимо их заключить в один контейнер <div>:

1. Вставим новую строку над первым контейнером, поставив курсор после открывающего тега <html> на строке 2 и нажав Enter:

2. Вставим туда полный тег <div>:

3. Раздвинем этот тег, чтобы туда потом размещать внутренние контейнеры <div>:

4. Выделим два первых контейнера и скопируем их в пустую строку 4 между тегами <div>, а затем удалим оба старых контейнера:

Если вы всё сделали правильно, то в браузере ничего не изменится:

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

1. Сохраним html-файл как новый проект "project10.html".

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

• первый внутренний <div> - width: 600px; height: 300px; position: absolute; left: 0px;
• второй внутренний <div> - width: 550px; height: 300px; position: absolute; left: 700px;

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

width: auto; height: 400px; position: relative;

4. Отодвинем новый контейнер от краёв браузера и "оденем" в жирную рамку:

margin: 20px; border: 5px solid black;

Проверим код стилей:

Если у вас всё верное, то должно получиться как у меня:

Теперь вы научились с помощью значений селектора позиционирования (position и left) и селектора ширины и высоты (width и height) передвигать контейнеры и блоки внутри них как угодно.

Назначение имени контейнеру и блоку

Чтобы было проще работать с контейнерами и блоками при вёрстке, когда их десятки и сотни, а также если они группируются по общим селекторам CSS и их значениям, принято назначать атрибут HTML класса и его имя, например:

<div class="one">

Назначим теперь большому контейнеру <div> атрибут класса с именем "common", двум внутренним контейнерам <div>, соответственно, "inside1" и "inside2". Третий, внешний контейнер назовём пока "out". В имени классов нельзя допускать пробелов!!!

Порядок записи класса и его имени на примере первого контейнера:

Строка 3. При наборе атрибута class программа Sublime Text выдаёт подсказку, которую мы нажимаем.

Строка 3. Сформирован атрибут "class", в который мы можем теперь вписать имя.

Мы вписали имя "common" в атрибут класса.

Теперь это же сделаем с остальными контейнерами:

В строках 4, 8 и 13 вы видите обозначение классов контейнеров <div>.

Далее назначим имена блокам <p>, соответственно контейнерам: inside11, inside12, inside21, inside22, out1 и out2.

В строках 5, 6, 9, 10, 14 и 15 вы видите установленные атрибуты class с соответствующими именами.

Теперь вы умеете назначать классы и имена контейнерам и блокам.

Практика

Задание 6.

1. Переименовать наш проект в следующий - "project11.html".
2. Приведите все блоки <p> в каждом контейнере к одинаковой ширине в 220 пикселей.
3. Откорректируйте высоту блоков "inside11" и "inside12", чтобы они помещались внутри контейнера "inside1".
4. Откорректируйте высоту блоков "inside21" и "inside22", чтобы они помещались внутри контейнера "inside2".
5. Откорректируйте высоту контейнеров "inside1" и "inside2", чтобы все они помещались внутри контейнера "common".
6. Разместите третий контейнер "out" во внутрь контейнера "common", как мы уже сделали с двумя первыми во время занятия, и расположите его правее.
7. Откорректируйте высоту блоков "out1" и "out2" и его самого контейнера "out", чтобы всё вмещалось в единый контейнер "common".

На следующем уроке мы научимся использовать цвета.

Если вам понравилось, подписывайтесь на мой канал!

PhD Alexander G. Buychik, info@buychik.ru, +79217702472