Проверка задания 10
На уроке 15 вы получили задание:
- Создать свою отдельную проектную папку "my resume".
- Внутри данной проектной папки создать папки "resume" и "img".
- Создать собственную страницу резюме, используя знания данного урока.
У вас должен получиться дизайн, идентичный тому, что мы уже имитировали с нашим проектом "Project-One". Мы продолжим работать в нём, а затем вы будете новые теги и селекторы применять в своём личном проекте.
Сегодня мы научимся делать элементы страницы сайта "скользящими", т.е. гармонично стоящими там, где мы этого хотим, без искажения макета.
1. Флоутирование элемента
Термин "флоутирование" происходит от английского глагола "float", т.е. "плыть/парить". В принципе, это верно, потому что селектор CSS "float" означает обтекание одного контейнера соседним контейнером или одного блока другим в одном контейнере.
Селектор "float" обозначает относительное расположение одного контейнера/блока по отношению к соседнему, т.е.:
- если контейнер будет расположен слева, то пишем значение "left";
- если контейнер будет расположен справа, то пишем значение "right".
Следовательно, запись селектора будет следующей:
style="float: left;" или style="float: right;"
ВНИМАНИЕ: обтекание не бывает верхним (top) или нижним (bottom).
Теперь применим это на практике, разместив нашу вторую заготовку изображения для резюме "photo3.jpg" с вертикальным ориентированием слева от первого контейнера - "general".
1.1 Подготовка изображения.
Мы уже подготовили изображение в рамках урока 15.
1.2 Создание контейнера <div> для изображения
Теперь установим контейнер для размещения в будущем изображения между контейнерами "photo1", переименовав верхний контейнер для удобства, и "general":
Теперь мы можем вставить изображение в данный контейнер.
1.3 Установка контейнера с изображением
В результате, сохранив изменения в редакторе и обновив браузер, мы получили изображение второй фотографии:
Как мы видим, она появилась слева ниже отцентрованной первой фотографии, но всё же над текстом контейнера "general".
1.4 Совмещение контейнеров
Вот теперь нам и понадобится селектор "float", чтобы расположить блок "photo2", например, левее текста контейнера "general". Флоутировать надо не блок <img>, а именно контейнер <div>, в котором находится блок с изображением!!!
После сохранения обновлений в редакторе и обновления браузера мы получаем ожидаемый результат:
1.5 Установка отступов при флоутировании
Вы заметили, что при совмещении контейнеров текст как бы прижался к изображению. Это, конечно же, выглядит непрезентабельно. Чтобы "отодвинуть текст" мы должны использовать ТОЛЬКО внешние отступы контейнера (margin), который получил селектор "float". В нашем случае, это контейнер "photo2", следовательно, именно в нём мы должны прописать внешний отступ вправо, чтобы отодвинуть текст, например, на 25 пикселей:
margin-right: 25px;
Сохранив изменения и обновив браузер мы получили результат:
2. Флоутирование группы элементов
Если мы хотим разместить таким образом не один контейнер, например с изображением, а несколько в ряд, то применяется тот же принцип флоутирования сразу для нескольких элементов дизайна.
2.1 Создание второго контейнера <div>
Чтобы понять, как это работает, разместим в коде html-страницы второй контейнер для размещения изображения под контейнером "photo2":
2.2 Установка контейнера с изображением
Для тренировки мы повторно используем изображение 3 из папки "img":
Сохранив изменения в редакторе и обновив браузер, мы получаем два подряд изображения, но с потерей флоутирования:
2.3 Флоутирование группы контейнеров
Чтобы восстановить флоутирование, необходом сделать "плавающими" оба контейнера с изображениями, поэтому и контейнер "photo2" и контейнер "photo3" должны в стилях получить ориентацию "слева":
Сохранив изменения в редакторе и обновив браузер, мы получаем ожидаемый результат: контейнеры с изображениями расположились друг за другом слева, а текстовый контейнер вновь облегает их.
Остаётся сделать внешний отступ справа и для второго контейнера, чтобы текст вновь отодвинулся от изображения:
Сохранив изменения в редакторе и обновив браузер, мы получаем ожидаемый результат:
3. Флоутирование группы изображений вертикальной ориентации
На страницах сайта часто требуется расположить несколько изображений вертикально, а текстовую часть, например, справа. В этом случае контейнеры с изображениями необходимо объединить в одном общем для них контейнере <div>:
Сохранив изменения в редакторе и обновив браузер, мы получаем ожидаемый результат:
Если изображения слишком велики, то мы можем их уменьшить по ширине (width) в стилях каждого блока <img>.
Практика
Задание 11.
- В своей отдельной проектной папке "my resume" разместить на странице две своих фотографии в ряд с флоутированием.
- Создать клон данной страницы в виде html-файла в той же папке и расставить 2-3 свои фотографии в резюме вертикально с флоутированием колонки изображений.
На следующем уроке мы познакомимся с тем, как сделать адаптивный макет страницы.
Если вам понравилось, подписывайтесь на мой канал!
PhD Alexander G. Buychik, info@buychik.ru, +79217702472