Clever Geek Handbook

CSS menu bar border

I am trying to have these small left and right borders on both sides of the text. Here's what I'm trying to do: http://imgur.com/xCZnGgJ

My problem is that the borders don't line up with the height of the surrounding div, but they only go the same height of the text. Here is a screenshot: http://imgur.com/I2jjsAm

I dried the addition height: 30px

to li

and ul

, but that doesn't 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 a {
  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>
Run codeHide result


If anyone knows, is there anyway to bring the two boundaries closer together?

+3
html css css3


source to share


4 answers


Add padding:6px 15px 6px 15px;

in li

instead a

. It also 0.5px

doesn't work. What is half a pixel? Your code has been updated. See below!

EDIT: Note. I also changed the hover effect to affect the element li

instead 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 a {
    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>
Run codeHide result


+1


source to share


You can simply change the li to display: inline-block; I created a jsfiddle for you.

#pre_header li {
    display: inline-block;
    border-right: 1px solid #414141;
    border-left: 1px solid #414141;
}


Also, don't use .5px, use one amount. I used 1px.

http://jsfiddle.net/xeqsn83a/

0


source to share


Try this :

* {
    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;
    font-size: 0;
}

#pre_header li {
    display: inline-block;
    border-right: 1px solid #414141;
    border-left: 1px solid #414141;
    margin-right: 1px;
}

#pre_header a {
    text-decoration: none;
    color: #fff;
    padding: 6px 15px 6px 15px;
    font-size: 16px;
    line-height: 30px;
}

#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>
Run codeHide result


I changed display: inline

to inline-block

to li

and border-width

to 1px

(it must be an integer). Also made li

elements closer to each other using the method font-size: 0

(read this article to understand).

0


source to share


If you want borders to touch, you need float

it. And as others have noted, your border width should be the actual pixel size. There is no such thing as .5px. Here's an example of what (I think) you are trying to do:

http://jsfiddle.net/tuc4Lwuu/

#pre_header li {
  float: left;
  border-right: 1px solid #414141;
  border-left: 1px solid #414141;
  margin-right: 2px;
}
0


source to share






More articles:


All Articles
Loading...
X
Show
Funny
Dev
Pics