Полоска на всю ширину экрана

Блочные элементы имеют по умолчанию ширину родительских элементов. Так, если вы поместите тег <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

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Полоска на всю ширину экрана | | 2012-06-19 12:07:58 | | Статьи Web-мастеру | | Блочные элементы имеют по умолчанию ширину родительских элементов. Так, если вы поместите тег в (и, конечно же, используете сброс CSS, чтобы у  не было отступов), то автоматически станет шириной на | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: