html - CSS Menu bar border -


i'm trying have these small left , right borders either side of text. here i'm trying make: http://imgur.com/xcznggj

my problem borders not same height of surrounding div go same height of text. here screen shot: http://imgur.com/i2jjsam

i have dried adding height: 30px li , ul not change anything.

*{margin:0;}    #header {    width:100%;  }    #pre_header {    width:100%;    height:30px;    background-color:#202020;  }  .pre_header_content {    margin:0 auto;    width:1040px;  }  #pre_header ul {    list-style-type: none;    margin: 0;    padding: 0;    line-height:30px;  }  #pre_header li {    display: inline;    border-right: .5px solid #414141;    border-left: .5px solid #414141;  }  #pre_header {    text-decoration:none;    color:#fff;    padding:6px 15px 6px 15px;  }  #pre_header a:hover {    background-color:#4e4e4e;  }
<div id="header">    <div id="pre_header">      <div class="pre_header_content">        <ul>          <li><a href="pages/#.php">voucher codes</a></li>          <li><a href="pages/#.php">in-store codes</a></li>          <li><a href="pages/#.php">online codes</a></li>          <li><a href="pages/#.php">free samples</a></li>          <li><a href="pages/#.php">advertise</a></li>        </ul>      </div>    </div>    <div id="main_header">      <div class="main_header_content">        test      </div>    </div>  </div>

if knows there anyway bring 2 borders closer also?

add padding:6px 15px 6px 15px; li instead of a. , also, 0.5px not work. what's half pixel? updated code. see below!

edit: note: changed hover effect affect li element instead of a.

*{    margin:0;    box-sizing: border-box;  }    #header {      width:100%;  }      #pre_header {      width:100%;      height:30px;      background-color:#202020;  }  .pre_header_content {      margin:0 auto;      width:1040px;  }  #pre_header ul {      list-style-type: none;      margin: 0;      padding: 0;      line-height:30px;  }  #pre_header li {      display: inline;      border-right: 1px solid #414141;      border-left: 1px solid #414141;      padding: 0 15px;      float:left;      margin-right: 2px;  }  #pre_header li:last-child{    margin-right: 0;    }  #pre_header {      text-decoration:none;      color:#fff;          }  #pre_header li:hover {      background-color:#4e4e4e;    }
<div id="header">      <div id="pre_header">          <div class="pre_header_content">              <ul>                  <li><a href="pages/#.php">voucher codes</a></li>                  <li><a href="pages/#.php">in-store codes</a></li>                  <li><a href="pages/#.php">online codes</a></li>                  <li><a href="pages/#.php">free samples</a></li>                  <li><a href="pages/#.php">advertise</a></li>              </ul>          </div>      </div>      <div id="main_header">          <div class="main_header_content">              test          </div>      </div>  </div>


Comments

Popular posts from this blog

php - Zend Framework / Skeleton-Application / Composer install issue -

c# - Better 64-bit byte array hash -

python - PyCharm Type error Message -