Полоска на всю ширину экрана
Блочные элементы имеют по умолчанию ширину родительских элементов. Так, если вы поместите тег <h1>
в <body>
(и, конечно же, используете сброс CSS, чтобы у <body>
не было отступов), то <h1>
автоматически станет шириной на весь экран браузера. Это просто.
Но в наши дни верстка текста на всю ширину окна браузера (что часто означает "на весь экран компьютера") встречается очень редко. Строка текста в таком случае получается слишком длинной и неудобной для чтения. Разумно, что возникает желание сделать декоративные элементы шириной на весь экран (с позиции эстетики), а ширину текста ограничить для удобства посетителя. Например так:
Напрашивается очевидное решение - сделать внутренний контейнер для заголовков, например:
<h1> <div>Заголовок</div> </h1> <p>... Текст ... </p>
Так элемент <h1>
будет оставаться шириной на весь экран, а элемент <div>
можно явно сделать одинаковой ширины с элементом <p>
.
h1 div, p { width: 50%; margin: 0 auto; }
Однако такое решение выпадает из семантики. Элемент <div>
не несет никаких структурных нагрузок, а служит только для стиля. В идеале, таких ситуаций надо избегать.
И с помощью псевдо элементов задачу можно элегантно решить! Вместо внутреннего контейнера в каждом заголовке будем использовать контейнер для всей области (который имеет специальный тег).
<section> <h2>Заголовок</h2> <p>... Текст ... </p> <h2>Заголовок</h2> <p>... Текст ... </p> </section>
Мы будем ограничены шириной элемента <section>
. Но наши заголовки также будут иметь ограничение по ширине. И вот здесь в дело вступают псевдо элементы. Мы используем их для создания расширений вправо и влево для заголовков.
section { width: 50%; margin: 0 auto; } h2 { position: relative; background: black; } h2:before, h2:after { content: ""; position: absolute; background: black; /* Соответствует фону элемента h2 */ top: 0; bottom: 0; width: 9999px; /* Очень большая ширина */ } h2:before { right: 100%; } h2:after { left: 100%; }
Нужно быть осторожным с очень широким элементом, так как нам не нужна горизонтальная полоска прокрутки.
body { overflow-x: hidden; }
Такое решение работает во всех браузерах, которые поддерживают псевдо элементы (а таких большинство, включая IE8 с почти полной поддержкой).
В демонстрации также приведен пример расширения полоски только вправо или влево.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/gFbhPFwmyOE/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Самый лучший человек тот, который живет преимущественно своими мыслями и чужими чувствами, самый худший сорт человека - который живет чужими мыслями и своими чувствами. Из различных сочетаний этих четырех основ, мотивов деятельности - все различие людей. Люди, живущие только своими чувствами, - это звери. Толстой Лев Николаевич - (1828-1910) - великий русский писатель. Его творчество оказало огромное влияние на мировую литературу |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.