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.
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.
You can add the following css:
So when you hover the
liof the menu, a white border overlap the blue border of the container div.Example: http://jsbin.com/ujomi5/3