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>
If anyone knows, is there anyway to bring the two boundaries closer together?
source to share
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>
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>
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).
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:
#pre_header li {
float: left;
border-right: 1px solid #414141;
border-left: 1px solid #414141;
margin-right: 2px;
}
source to share