自定义horiz.menu CSS底部边框技巧？需要的

发布于 2024-10-13 00:08:21 字数 3613 浏览 11 评论 0原文

嵌入的图片描述了我的布局。如您所见，问题出在我的水平菜单中。首先，它是右对齐的，然后所选选项卡没有底部边框（这会产生封面纸效果）。如果您选择第二个选项卡，则第二个 li 将没有底部边框，其余部分将被连接。

问题是，如何实现这一点？我能想到的唯一解决方案是 :hover img ，它将为空白以擦除所选的底部边框。

CSS 布局预览

到目前为止的代码：

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 左右也没关系。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉态萌生 2024-10-20 00:08:22

您可以添加以下 css：

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

因此，当您将鼠标悬停在菜单的 li 上时，白色边框会与容器 div 的蓝色边框重叠。

示例：http://jsbin.com/ujomi5/3

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

回复收藏 0 原文

牵强ㄟ 2024-10-20 00:08:22

定义一个选定的 css 类并将其仅应用于 ul 中当前选定的 li 元素怎么样？是否删除了通常应用于所有 ul 元素的边框？我假设在页面之间导航的任何机制也都能够将该 css 类添加到适当的 li 元素。

当使用类选择器可能更强大时，您正在使用 id 特定的 css 选择器。假设您有以下风格；

.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; }

如果您必须渲染输出并且不使用 jQuery 等框架在客户端应用样式，则可以在元素中使用多个类说明符。

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

类属性的顺序会覆盖之前的类选择器，因此 nav-selected 将删除使用 nav-left 应用的边框。添加 id 选择器将为您的 item-1 和 item-2 元素分别提供红底蓝色和绿底橙色。

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.

回复收藏 0 原文

~没有更多了~