html - trying to make icons fixed with css -


h4 {      color:#ffffff;      font-size:20px;      letter-spacing:2px;      display:inline-block;      padding:0 10px;  }    {      color:#ffffff;      font-size:20px;  }
<div class="col-md-12">      <i class="fa fa-angle-left" id="prev" aria-hidden="true"></i>      <h4 class="quotes" style="display:inline-block;">      web devloper      </h4>      <h4 class="quotes" style="display:inline-block;">      web designer      </h4>      <h4 class="quotes" style="display:inline-block;">      freelancer      </h4>      <i class="fa fa-angle-right" id="next" aria-hidden="true"></i>  </div>

how make next , previous icons stay fixed? here's problem:

add icons position: absolute; , parent element position: relative;. example:

#block {    padding: 20px 70px;    background: green;    width: 300px;    position: relative;  }  #prev, #next {    position: absolute;    color: white;    top: 50%;    margin-top: -5px;    width: 10px;    height: 10px;    background: white;  }  #prev {left: 20px;}  #next {right: 20px;}
<div id="block">    <div id="next"></div>    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>    <div id="prev"></div>  </div>


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -