Программы
Расположение элементов на странице

Расположение элементов на странице

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

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

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

Очевидно, что браузер отображает их сверху вниз, в порядке, который указан в документе (это неправда, но пока сойдёт). Такое поведение понятно, органично. Это принято называть потоком. А вот как они друг рядом с другом располагаться?

Типы html элементов

Начнём с простого:

  1. Есть элементы строчные (inline): ссылка, жирный шрифт, наклонный шрифт и очередной «элемент-пустышка» — span. Они выстраиваются относительно остальных элементов — как обычный текст.
    Тут также есть «базовая линия», высота текста, отступы, они также переносятся, как и любой другой текст.
  2. Есть элементы блочные (block). У них можно указывать ширину, высоту, отступы внутрь и наружу и прочие вещи. Это параграфы, заголовки, div и многие другие. Они ведут себя как «коробки».

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

Хм… А вот у изображений <img> есть ширина и высота, но они всё равно пытаются вести себя как строчные элементы. Да, есть третий тип «гибрид» предыдущих — строчно-блочный (inline-block).

Всё это мы, естественно, можем поменять через css-стили, используя правило display.

Просто текст, в котором тег <b style="display: block">b</b> с display: block.

<h3 style="display: inline-block">Пример заголовка inline-block</h3>

<p style="display: inline">
  Строчный параграф.
</p>

<button style="display: none">Невидимая кнопка</button>

Просто текст, в котором тег b с display: block.

Пример заголовка inline-block

Строчный параграф.

display: none — не отображать элемент, как некоторые уже догадались.

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

Плавающие элементы

Окей, вернёмся к тегу <img> — как же его красиво сверстать, чтобы как во всяких «модных» социалках?

Я имею в виду что-то такое:

Иванов X4ck3R Иван

Нравится программировать и верстать.

Скоро сделаю свою социалку. Осталось ещё чуть-чуть!

А не

Иванов X4ck3R Иван

Нравится программировать и верстать.

Скоро сделаю свою социалку. Осталось ещё чуть-чуть!

Воспользуйтесь средствами разработчика — посмотрите чем отличаются стили первого img и второго.

Всё дело во float: left — это css-свойство говорит о том, что элемент помещается слева, а все остальные должны его обтекать.

Поменяйте прямо в инструментах разработчика left на right — посмотрите, что получится. Поведение похоже на text-align, только для блоковых элементов.

Но, если пошёл против потока — сам и выравнивай! Например, может быть такая проблема с float — они наезжают друг на друга, даже когда ты явно указал, что они в разных div. Div то должны отделить inline элементы внутри себя в 2 разные линии друг под другом? Только если те в «потоке».

<div>
  <img src="http://900913.net/static/img/logo-192x192.png" style="float: left"> 900913 logo
</div>

<div>
  <img src="http://900913.net/static/img/logo-192x192.png" style="float: left"> 900913 one more logo
</div>
900913 logo
900913 one more logo

Тогда как же нам всё же предотвратить этот беспредел, вернуть поток там, где нам надо? Использовать свойство clear, которое отключит обтекание там, где нам не надо!

Например, так:

<div>
 <img src="http://900913.net/static/img/logo-192x192.png" style="float: left"> 900913 logo
</div>

<div style="clear: both">
 <img src="http://900913.net/static/img/logo-192x192.png" style="float: left"> 900913 one more logo
</div>

Или просто вставить «путышку» в месте, где нужен «разрыв».

<div style="clear: both"></div>

— отключит обтекание с обеих сторон.

Позиция элемента

Вот теперь можно уже и рассказать о том, что позиция элемента на странице не обязательно должна соответствовать позиции элемента в html-документе.

Если css-свойство float немного рвало поток — указывая потоку «обтекать» его, то свойство position просто издевается над потоком.

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

<img src="/media/uploads/2017/08/30/fly.png" style="position: fixed; bottom: 40px; right: 60px; width: 50px;"/>
  • position: fixed — задаёт, как позиционировать элемент (fixed — фиксировано на окне).
  • bottom: 40px — отступ относительно нижнего края.
  • right: 60px — отступ от правого края.

Также есть position: relative — самый грязный способ добиться «а вот эта кнопка должна быть на 2 пикселя левее и на 3 выше» — задаёт позицию относительно текущей.

position: absolute позволяет задать позицию элемента относительно ближайшего родителя с fixed, relative или absolute. Иногда полезно — когда надо прилепить блок к низу родительского.

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

Переверстать свою страницу div-ы c использованием float, сделать навигационную «шапку» (прилепить к верху окна) на странице, чтобы можно было между разделами удобно переходить.

Также может быть вам интересно:

CSS — стили

Гораздо позднее, чем HTML, появились каскадные таблицы стилей — CSS. Во времена беззакония и хаоса, когда у каждого браузера были свои свистелки и способы «сделать красиво», консорциум W3C принял рекомендацию CSS1.

Читать »

Оптимизируем изображения web-сайтов

Есть множество способов оптимизировать изображения в веб. Начиная от самых простых (вместо .bmp использовать .png), заканчивая построением модели человека и изучением значимости артефактов компрессии.

Читать »
Фото Как настроить отправку почты из Django

Как настроить отправку почты из Django

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

Фото Добавляем поддержку медиа-файлов в Django проект

Добавляем поддержку медиа-файлов в Django проект

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

Фото Настройка журналирования (логирования) в Python с примерами

Настройка журналирования (логирования) в Python с примерами

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

Фото Маленькая книга о Go (golang)

Маленькая книга о Go (golang)

Маленькая книга о Go распространяется под лицензией Attribution-NonCommercial-ShareAlike 4.0 International license. Вы не должны платить за эту книгу.

Фото Пример своей консольной команды в Django проекте

Пример своей консольной команды в Django проекте

Если вы работали с Django проектом, то, скорее всего, запускали команды из консоли (manage.py). В Django есть простой способ писать свои команды для управления проектом.

Фото Разграничение прав доступа на Django сайте

Разграничение прав доступа на Django сайте

Почти на любом веб-сайте необходимо разделять пользователей на группы и предоставлять им разные возможности. В Django есть довольно серьёзная система прав доступа для пользователей - давайте её рассмотрим!

Фото Пользователи и их создание в Django - своя регистрация на сайте

Пользователи и их создание в Django - своя регистрация на сайте

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

Фото Как на Bash посчитать число строк в проекте (директории)

Как на Bash посчитать число строк в проекте (директории)

Ниже будет представлен однострочник, решающий данную задачу на Bash + пошаговое описание его работы.