Вложенный рисунок описывает мой макет. Как вы можете видеть, проблема в моем горизонтальном меню. Прежде всего, он выровнен по правому краю, а затем выбранная вкладка не имеет нижней границы (что создает эффект передней бумаги). Если вы выберете вторую вкладку, то второй li не будет иметь нижнюю границу, а остальные будут подключены.Пользовательский horiz.menu CSS нижний трюк?
Проблема в том, как это сделать? Единственное решение, о котором я могу думать, это: 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 или около того.
лучше дать и ваш HTML структуру. Также живой пример на jsbin.com или ваш тестовый сервер помогут больше. – Sotiris
html добавленный в вопрос. http://jsbin.com/ujomi5/2 – PathOfNeo
У меня была такая же проблема, и я нашел [это решение] (http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/). –