I want to create a very simple tab style that looks like this:
_____ _____ _____
_|_____|_| |_|_____|______________
So basically there is a horizontal border on the bounding box that breaks for the active tab. I'm using a basic list, with the following CSS, but the outer border always appears over the individual tabs. I've tried various positioning and z-index as well to no avail.
ul.tabHolder {
overflow: hidden;
clear: both;
margin: 1em 0;
padding: 0;
border-bottom: 1px solid #666;
}
ul.tabHolder li {
list-style: none;
float: left;
margin: 0 3px -1px; /* -1 margin to move tab down 1px */
padding: 3px 8px;
background-color: #444;
border: 1px solid #666;
font-size: 15px;
}
ul.tabHolder li.active {
background-color: #944;
border-bottom: 1px solid #944;
}
On the Design tab, choose Page Borders. In the Borders and Shading dialog box, in the Apply to list, choose the page (or pages) you want to remove the border from. Under Setting, choose None.
Add a border to selected textOn the Home tab, click the arrow next to the Borders button. In the Borders gallery, click the border style that you want to apply.
Look for the properties border , border-top , border-bottom , border-right , and border-left . Either remove it, or change the value to 0 or for each. This will remove the border.
Try this solution by Eric Meyer.
Content below copied from the site to ensure the answer is still valid if the site closes, changes or breaks.
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link {
color: #448;
}
#navlist li a:visited {
color: #667;
}
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a#current {
background: white;
border-bottom: 1px solid white;
}
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
ABOUT THE CODE Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.
Changing your existing code as little as possible - try display: inline-block
for the li
tags, with the border on a .menu
container div
:
.menu {
border-bottom: 1px solid #666;
}
ul.tabHolder {
overflow: hidden;
margin: 1em 0 -2px;
padding: 0;
}
ul.tabHolder li {
list-style: none;
display: inline-block;
margin: 0 3px;
padding: 3px 8px 0;
background-color: #444;
border: 1px solid #666;
font-size: 15px;
}
ul.tabHolder li.active {
background-color: #944;
border-bottom-color: #944;
}
HTML used to illustrate (added div at bottom to show blending of active tab into div colour):
<div class="menu">
<ul class="tabHolder">
<li>Menu 1</li>
<li class="active">Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<div style="background-color: #944; height: 1em">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With