Встроенная картинка описывает мой макет.Как видите, проблема в моем горизонтальном меню.Сначала он выравнивается по правому краю, а затем выбранная вкладка не имеет нижней границы (что создает эффект обложки).Если вы выберете вторую вкладку, то у 2nd li не будет нижней границы, а остальные будут связаны.
Проблема в том, как этого добиться?Единственное решение, которое я могу придумать, - это: hover img, который будет пустым, чтобы стереть выбранную нижнюю границу.
Код пока:
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-->
Есть какие-нибудь предложения о том, как добиться эффекта отсутствия нижней границы для выбранных вкладок?
Я не очень хорош в создании небольшой графики, если это возможно, я хотел бы сделать это сCSS.Не имеет значения, включает ли это добавление нескольких элементов div или около того.