CODEWITHSUNDEEP
cssmenubarborder
PathOfNeo
PathOfNeo

Reputation: 1089

Custom horiz.menu CSS bottom-border trick? needed

The embedded pic describes my layout. As you can see, the problem is in my horizontal menu. First of all it is right aligned and then the selected tab has no bottom border (which creates a front-paper effect). If you would select the second tab, then the 2nd li wouldn't have a bottom border and the rest would be connected.

Problem is, how to accomplish this? The only solution I can think of is a :hover img which would be blank to erase the selected bottom border.

CSS layout preview

The Code so far: 

body
{
font:100% 'century gothic', Verdana, Arial, Helvetica, sans-serif;
color:#3F3F3F;
}
#wrapper
{
width:960px;
height:700px; /*temp*/
margin:0 auto;  
background:#FFF;
}

#header   /*not visible on the embedded layout*/
{
width:960px;
height:91px;
}

#nav-bar
{
width:960px;
height:50px;

border-bottom:#000070 1px solid;  
    /*
       If only <ul> has bottom border then i wouldn't have the bottom border for 
       the whole #nav-right. But this is also a problem for the selected 
       tab that doesn't have any
    */
}
#nav-left
{
    float:left;
width:73px;
height:50px;
border-right:1px #000070 solid;
}
#nav-right
{
float:left;
width:882px;
height:50px;

display:inline-block;
position:relative;  
    /*now i can use absolute on the <ul> for bottom-right positioning*/
}
#nav-right ul
{
list-style: none;
/*padding: ...  ;*/

position:absolute;
bottom:0px;
right:5px;

border-top:1px solid #000070;
border-left:1px solid #000070;
border-right:1px solid #000070;
 }
 #nav-right li 
 {
    display:inline-block;
/*padding: ...;*/
 }
 #nav-right li a 
 {
/*padding: ...;*/
text-decoration:none;
margin:0;
color:#CCC;
 }
 #nav-right li a:hover 
 {
color:#000070;
font-weight:bold;                
 }
 #content
 {
    width:960px;
clear:both;
 }
    #con-left{/*...*/}
     #con-right{/*...*/}



 HTML STRUCTURE:

<body>
<div id="wrapper">

    <div id="header"><img src="#" /></div>

    <div id="nav-bar">
        <div id="nav-left"></div>
        <div id="nav-right">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Items</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>  <!--END: nav-bar-->

    <div id="content">
        <div id="con-left"></div>
        <div id="con-right">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices semper orci in euismod. Proin sed justo at lectus dapibus <br> 
            interdum. Donec quis elit massa, id porttitor eros. Nullam vel consectetur diam. <br>
            Phasellus bibendum, justo sed vehicula luctus, velit lectus rhoncus velit, at placerat nibh sapien quis felis. Mauris id aliquet. <br>  
            Integer mattis convallis luctus. Vivamus suscipit euismod sodales. Suspendisse cursus, erat eu egestas gravida, est mi semper ,<br> 
            quis sagittis purus mi sit amet nisl. Praesent adipiscing molestie sem. Mauris vitae arcu nibh, tristique laoreet nisi. Proin quis<br>
            id sapien condimentum facilisis et at odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br>
            Morbi eget est elit, nec rutrum enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br>
            </p>     
        </div>
    </div>


</div><!--END: wrapper-->

Any suggestions on how to accomplish the no bottom-border effect for selected tabs?

I'm not so good making small graphics, if it's possible I would like to do it with CSS. Does not matter if it involves adding a few div's or so.

Upvotes: 0

Views: 3002

Answers (2)

Sotiris
Sotiris

Reputation: 40086

You can add the following css:

ul li:hover {
    border-bottom: 1px solid white;
    margin-bottom: -1px;
}

So when you hover the li of the menu, a white border overlap the blue border of the container div.

Example: http://jsbin.com/ujomi5/3

Upvotes: 3

Dave Anderson
Dave Anderson

Reputation: 12294

What about defining a selected css class and applying it to only the currently selected li element in ul. Have that remove the border that is otherwise applied to all ul elements generally? I assume whatever mechanism navigates between pages will also have the ability to add that css class to the appropriate li element.

You're using id specific css selectors when using class selectors could be more powerful. Say you have the following styles;

.nav-left { border-bottom: 1px solid black; }
.nav-selected { border-bottom: 0 solid black; color:blue; }
#nav-item-1 { background-color: red; }   
#nav-item-2 { background-color: green; }
#nav-item-2 .nav-selected { color: orange; }

You can have multiple class specifiers in elements if you have to render the output and aren't applying your styles client-side with a framework like jQuery.

<li id="nav-item-1" class="nav-left nav-selected">
<li id="nav-item-2" class="nav-left">

The order of the class attributes overrides previous class selectors so nav-selected will remove the border applied with nav-left. The addition of the id selectors will give you blue on red and orange on green respectively for your item-1 and item-2 elements.

Upvotes: 1

Related Questions