CODEWITHSUNDEEP
htmlcss
C.J.
C.J.

Reputation: 6879

Position li elements to cover their parent ul border to make tabs?

I have a jsFiddle of what I'm trying:

My problem is getting the <li> elements to go down 1 pixel inside the <ul> so their border will cover up the <ul> border.

I was hoping this could be done without additional markup, but I've been having trouble.

Any ideas?

<ul class="tabs">
    <li class="act">Active</li>
    <li>Not Active</li>
</ul>

body {background:#eee;}
ul
{
   margin:10px; padding-left:20px;
   overflow:hidden;
   border-bottom:solid 1px rgba(0,0,0,.2);
}
li
{
   display:inline-block; margin-right:1px;
   border-bottom:solid 1px transparent; border-radius:7px 7px 0 0;
   height:35px; padding:0 9px;
   font:bold 12px/35px Arial; color:#444;
}
li.act
{
   border-bottom:solid 1px #D4D4D4;
   box-shadow:0 1px rgba(255, 255, 255, 0.75) inset, 0 2px 5px rgba(0, 0, 0, 0.5);              

   background: -moz-linear-gradient(top, #EDEDED 0%, #D4D4D4 65%);
   background: -webkit-linear-gradient(top, #EDEDED 0%, #D4D4D4 65%);
}

Upvotes: 0

Views: 1178

Answers (1)

rgthree
rgthree

Reputation: 7273

You won't be able to achieve what you want with your ul having a border-bottom and overflow:hidden, as your li will be cutoff before (above) the border.

I see you want your ul to keep the overflow:hidden to hide the li's box-shadow. That's fine, but we'll need to fake the border. We can do that by creating a pseudo-element, and position that behind the li's. Here's the CSS and a forked JSFiddle: http://jsfiddle.net/rgthree/2xfkB/

ul {
   position:relative;
   margin:10px; padding-left:20px;
   overflow:hidden;
}
ul:before{
    content:'\0020';
    display:block; height:1px; overflow:hidden;
    position:absolute; bottom:0px; left:0px; right:0px; z-index:1;
    background:rgba(0,0,0,.2);
}
li {
    position:relative; z-index:2; /* position on top of "border" pseudo-element */
    display:inline-block; margin-right:1px;
    border-bottom:solid 1px transparent; border-radius:7px 7px 0 0;
    height:35px; padding:0 9px;
    font:bold 12px/35px Arial; color:#444;
}
li.act{
    border-bottom:solid 1px #D4D4D4;
    box-shadow:0 1px rgba(255, 255, 255, 0.75) inset, 0 2px 5px rgba(0, 0, 0, 0.5);              
    background: -moz-linear-gradient(top, #EDEDED 0%, #D4D4D4 65%);
    background: -webkit-linear-gradient(top, #EDEDED 0%, #D4D4D4 65%);
}​

Upvotes: 2

Related Questions