Пунктирная/круглая вертикальная линия в div

Question

У меня есть div (родительский элемент), внутри которого у меня есть три основных элемента: - пунктирная линия от вершины div до средней части (до заголовка), - заголовок , - пунктирная линия от середины до дна div

Вопрос - как сделать эти пунктирные линии (работающие как div с фоном) текучей средой и сделать их высоту приспосабливаемой к высоте экрана? У меня такой скрипку: http://jsfiddle.net/5wo01f1y/4/

часть моего кода:

 <section id="whatwedo"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-8 col-lg-offset-2"> 
       <div class="dots">&nbsp;</div> 
        <div class="heading"><span>We love</span> <h1>What we do</h1></div> 
        <p>Bakery & Sweets</p> 
       <div class="dots">&nbsp;</div> 
        <i class="fa fa-chevron-down btn-down"></i> 
      </div> 
     </div>   
    </div> 
</section> 

CSS:

@import url(http://fonts.googleapis.com/css?family=Signika+Negative:300,400,600,700&subset=latin-ext); 
@import url(http://fonts.googleapis.com/css?family=Merriweather:400italic,400,700,700italic&subset=latin-ext); 

body { 
    font-family:'Signika Negative', sans-serif; 
    font-size:14px; 
} 

html, body { 
    min-height:100%; 
    height:100%; 
} 

#whatwedo .heading { 
    display:inline-block; 
    background:#da2027; 
    } 

#whatwedo .heading span { 
    color:#fff; 
    text-transform:uppercase; 
    font-size:36px; 
} 

#whatwedo p { 
    font-family:'Merriweather', sans-serif; 
    color:#fff; 
    font-size:1.7em; 
} 

#whatwedo{ 
    background-color:#da2027; 
    margin-top:0; 
    padding-top: 85px; 
    padding-bottom: 30px; 
    text-align:center; 
    height:100%; 
} 

#whatwedo h1 { 
    color: white; 
    text-transform:uppercase; 
    display:inline-block; 
} 

.btn-down { 
    text-align:center; 
    margin:0 auto; 
    color:#fff; 
} 

.dots { 
    height:100%; 
    margin:0 auto; 
    width:9px; 
    overflow:hidden; 
    background:url('http://s23.postimg.org/8wexsdl07/dot.png') repeat-x; 
} 

мне нужно использовать JQuery или что может быть проще взломать делать?

Answer 1

http://jsfiddle.net/Muthukumaru/5k7qLmjs/1/ Использование этого CSS для верхней точки

.heading span:before{ 
content: "\00a0 "; 
background: transparent url("http://s23.postimg.org/8wexsdl07/dot.png") repeat-x scroll 0% 0%; 
width:9px; 
position: absolute; 
top:0px; 
left:49% 
} 

для нижней точки использовать класс для р тега, как <p class="dot1">Bakery & Sweets</p>

.dot1:before{ 
content: "\00a0 "; 
background: transparent url("http://s23.postimg.org/8wexsdl07/dot.png") repeat-x scroll 0% 0%; 
width:9px; 
position: absolute; 
bottom:0px; 
left:49% 
} 

я выровненной середине точки я использовал левый: 49%. если вы думаете, что это значение не соответствует. установить точное среднее использование «calc», как left:calc(50% - 9px);, мы уменьшаем ширину 9px