Как создать двустороннюю пунктирную линию вокруг заголовка?

Я пытаюсь получить заголовок (h1) в верхней части шаблона, как показано ниже (точки представляют собой вертикально центрированную точечную линию изображения):

пример заголовка http://www.pixelplus.nl/klanten/klijsen/example.jpg< /а>

Обычно я делал так:

<h1><span>This is a title</span></h1>

Отцентрируйте текст в h1 и добавьте фоновый цвет к span, а также немного отступов.

В текущем проекте я имею дело с прозрачным фоном над background-image. Итак... span фонового цвета не будет летать.

Попробовав несколько вещей, это ближе всего:

<header class="headerPage">
    <div class="row">
        <div class="dotted">&nbsp;</div>
        <div class="title"><h1>This is a title</h1></div>
        <div class="dotted">&nbsp;</div>
    </div>
</header>

И этот CSS:

header.headerPage {
    display: table;
    margin: 0 0 35px;
    width: 100%;
}
header.headerPage .row {display: table-row;}
header.headerPage .row div {display: table-cell;}
header.headerPage .row div.dotted {
    width: 10%;
    background: url('../img/line-dotted.svg') left center repeat-x transparent;
}
header.headerPage .row div.title {
    padding: 0 15px;
    text-align: center;
}
header.headerPage .row div.title > * {display: inline;}
header.headerPage .row div h1 {margin: 0;}

Как видите, заголовок действует как table. Проблема в width: 10%; разделов с точками. Как сделать так, чтобы они имели переменную ширину относительно динамической высоты h1? Надеюсь, это можно сделать в css/scss.


html css
person Rick    schedule 04.02.2015    source источник
comment
Этот аналогичный вопрос может помочь для прозрачного фона: разделитель строк под текстом и прозрачным фоном вам просто нужно изменить границу на пунктирную и положение линии.   -  person web-tiki    schedule 04.02.2015
comment
вы можете использовать псевдоэлемент jsfiddle.net/e6y5uq3u/1   -  person Vitorino fernandes    schedule 04.02.2015
comment
Возможно, адаптация этого ответа может сделать то, что вы хотите: stackoverflow.com/a/3097961/1331011   -  person Wormbo    schedule 04.02.2015
comment
Вы изменили свой вопрос после того, как я опубликовал свой ответ :(   -  person DreamTeK    schedule 04.02.2015

Ответы (5)


arrow_upward
8
arrow_downward

Это решение адаптировано из этого ответа: разделитель строк под текстом и прозрачным фоном

Пунктирная линия останется вертикально центрированной в соответствии с высотой текста (размер шрифта, несколько строк) и адаптируется к ширине текста:

разделитель пунктирной линии

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body{
    background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG);
    background-repeat:no-repeat;
    background-size:100% auto;
    font-family: 'Open Sans', sans-serif;
}

.divider{
    color:#ccc;
    width:70%;
    margin:20px auto;
    overflow:hidden;
    text-align:center;   
    line-height:1.2em;
}

.divider:before, .divider:after{
    content:"";
    vertical-align:middle;
    display:inline-block;
    width:50%;
    border-bottom:2px dotted #ccc;
    margin:0 2% 0 -55%;
}
.divider:after{
    margin:0 -55% 0 2%;
}
h1:nth-child(2){
    font-size:3em;
}
span{
  display:inline-block;
  vertical-align:middle;
  }
<h1 class="divider">Today</h1>
<h1 class="divider">Today News</h1>
<h1 class="divider"><span>Today News<br/>More text<span></h1>

Обратите внимание, что если у вас нет нескольких строк, эффект может быть достигнут без <span> и только с одним тегом.

person web-tiki    schedule 04.02.2015
comment
Вы круты, сэр! @веб-тики - person Rick; 04.02.2015

arrow_upward
1
arrow_downward

Для этого вы можете использовать псевдоэлементы:

ДЕМО

body {
  background: tomato;
  /* or whatever */
}
h1 {
  text-align: center;
  overflow: hidden;
}
span {
  display: inline-block;
  position: relative;
  padding: 0 10px;
}
span:before,
span:after {
  content: '';
  display: block;
  width: 1000px;
  position: absolute;
  top: 0.73em;
  border-top: 1px dotted black;
}
span:before {
  right: 100%;
}
span:after {
  left: 100%;
}
.small {
  font-size: 10px;
}
<h1><span>Text</span></h1>

<h1><span>Lengthy Text</span></h1>

<h1><span>Very Lengthy Text</span></h1>

<h1><span class="small">Smaller Font</span></h1>

person Danield    schedule 04.02.2015

arrow_upward
0
arrow_downward

Вы должны использовать точечное изображение на фоне h1 и использовать цвет фона span, задайте отступ h1 справа и слева, чтобы показать фон.

person Symfony    schedule 04.02.2015
comment
Диапазон с фоновым цветом не будет работать из-за прозрачного фона контейнера. Вы увидите разницу между фоном контейнера и фоном диапазона. - person Rick; 04.02.2015

arrow_upward
0
arrow_downward

Как уже упоминалось в комментарии, вы можете попробовать изменить этот ответ на аналогичный вопрос.

CSS:

        h1 {
            position: relative;
            width: 100%;
            text-align: center;
        }
        h1 .text {
            position: relative;
            display: inline-block;
            background: white;
            margin: auto;
        }
        h1 .filler {
            position: absolute;
            left: 0;
            right: 0;
            border-bottom: dotted 1px black;
            height: 50%;
        }

и HTML:

    <h1><div class="filler"></div><div class="text">Your Title</div></h1>

По сути, фон текста будет скрывать нижнюю границу наполнителя, где находится текст. Вы можете скрыть большую часть границы, применяя отступ слева и справа в текстовом элементе.

person Wormbo    schedule 04.02.2015

arrow_upward
0
arrow_downward

ДЕМО

Не совсем уверен, что вы хотели, но это был мой вывод.

СПОСОБ 1: ИСПОЛЬЗОВАНИЕ ВАШЕГО КОДА

header.headerPage {
    display: table;
    margin: 0 0 35px;
    width: 100%;
}
header.headerPage .row {display: table-row;}
header.headerPage .row div {display: table-cell;}
header.headerPage .row div.dotted {
    width: 10%;
    background: #ed8;
    border-bottom:1px dotted #000;
}
header.headerPage .row div.title {
    padding: 0 15px;
    text-align: center;
    background: #ed8;
}
header.headerPage .row div.title > * {display: inline;}
header.headerPage .row div h1 {margin: 0;}
<header class="headerPage">
    <div class="row">
        <div class="dotted">&nbsp;</div>
        <div class="title"><h1>Klijsen, bijna 50 jaar ervaring</h1></div>
        <div class="dotted">&nbsp;</div>
    </div>
</header>

СПОСОБ 2: ОПТИМИЗИРОВАННЫЙ КОД

Судя по вашим комментариям, вот сильно урезанная версия с использованием меньшего количества кода и небольшой ручной работы для создания эффекта (я думаю), которого вы хотели.

.headerPage .row{
    width:100%;
    background: #ed8;
    border-bottom:1px dotted #000;
    text-align:center;
}
.headerPage .title {
    padding: 0 10px;
    border-bottom:2px solid #ed8;
    font-size:28px;
    font-weight:bold;
}
<header class="headerPage">
    <div class="row">
        <span class="title">Klijsen, bijna 50 jaar ervaring</span>
    </div>
</header>

person DreamTeK    schedule 04.02.2015
comment
Проблема в ширине точечного div. Я хочу, чтобы они почти «касались» заголовка. Таким образом, эти div должны быть переменной ширины. - person Rick; 04.02.2015
comment
Хорошо, я сделал новую версию, которая всегда соответствует ширине текста внутри нее. Кода для этого намного меньше, чем раньше. - person DreamTeK; 04.02.2015