Как сделать заголовок страницы с горизонтальным разделителем?

Question

[Viktor Grachev]

Добрый день! Подскажите пожалуйста как сделать заголовок H1 на странице такого вида:
Новости-------------------------------------------------------------------------------------Все новости
Заголовок с чертой сбоку понимаю как сделать а вот как создать заголовок чтобы в центре была линия не могу найти.

Answer 1

[Alex]

Вариант с фоном: контейнеру поставить линию в background, а под «Новости» и «Все новости» подложить фон того цвета, которого обычный фон. Минусы: не подходит для сложных фонов, фигово переносится

Вариант с флоатами: «Новости» — float: left, «Все новости» — float: right, после них блок с display: block, он сам займёт всю ширину между ними. Ему задать высоту и поставить линию на фон или бордером. Минусы: фигово переносится.

Вариант с флексбоксами: контейнеру display: flex, разделитель в отдельный блок, ему flex-grow: 1. Минусы: поддерживается только новыми браузерами.

Пример с тремя вариантами: jsfiddle.net/isquariel/3L0ttrak/2

Кстати, для группировки заголовков лучше использовать тег hgroup, а в нём уже h1 и h2.

Comments

[Viktor Grachev]

Спасибо Вам огромное это то что нужно!!!

[Alex]

azuron, на каком варианте остановились?

[Viktor Grachev]

на 2 он мне отлично подходит, сегодня реализую на сайте) еще раз спасибо за помощь!

Answer 2

[Alexey ZloDeeV]

Помню статью, в которой такую полосу делали для стилизации легенды(legend)
Я оттуда утянул пару строк кода на свой сайт (заголовки публикаций с линией)
Вот то, что утянул

.legend::before, .legend::after{
    content: "";
    position: relative;
    display: inline-block;
    width: 50%;
    height: 2px;
    vertical-align: middle;
    background: none repeat scroll 0% 0% padding-box content-box #000;
}

.legend::before {
    left: -0.5em;
    margin: 0px 0px 0px -50%;
}

.legend::after {
    left: 0.5em;
    margin: 0px -50% 0px 0px;
}

Но этот код для полос по бокам блока, думаю, что его можно подогнать под линию между двумя блоками

Comments

[Viktor Grachev]

Спасибо за Ваш ответ мне как раз пригодилось данное решения для оформление статьи!!!