【问题标题】:Navigation Div Affecting Other Nav Elements影响其他导航元素的导航 div
【发布时间】:2014-04-14 13:40:58
【问题描述】:

我有几个 div 元素充当主导航。当页面处于活动状态时,我为每个页面设置了一个单独的 div 元素,以便 div 的高度更高。由于某种原因,这似乎会影响页面上其他 div 的行高/位置。

这是我的 SASS

#neo_mainnav {  /* Main navigation */
        position: fixed;
        bottom: 35px;
        width: 480px;

        .nav_text {
            font: 14pt Arial, Helvetica, sans-serif;
            text-align: center;
            vertical-align: middle;
            line-height: 35px;
        }

        #video_nav {
            float: left;
            margin-right: 10px;
            width: 112.50px;
            height: 35px;
            background: #66a9c6;
        }

        #video_nav_active {
            float: left;
            margin-right: 10px;
            width: 112.50px;
            height: 50px;
            background: #66a9c6;
        }

        #gallery_nav {
            float: left;
            margin-right: 10px; 
            width: 112.50px;
            height: 35px;
            background: #f0a262;
        }

        #gallery_nav_active {
            float: left;
            margin-right: 10px;
            width: 112.50px;
            height: 75px;
            background: #f0a262;
        }

        #floorplans_nav {
            float: left;
            margin-right: 10px;
            width: 112.50px;
            height: 35px;
            background: #66a9c6;
        }

        #floorplans_nav_active {
            float: left;
            margin-right: 10px;
            width: 112.50px;
            height: 75px;
            background: #66a9c6;
        }

        #contact_nav {
            float: left;
            width: 112.50px;
            height: 35px;
            background: #f0a262;
        }

        #contact_nav_active {
            float: left;
            width: 112.50px;
            height: 35px;
            background: #f0a262;
        }
    }   /* Main navigation end */

HTML 可以在这里看到http://jsfiddle.net/MQcGF/

整个页面可以在这里查看http://www.neoscapelabs.com/projects/469seventh/gallery.php

【问题讨论】:

  • 请同时发布您的相关 HTML。
  • 我的错误,我添加了一个 JSFiddle 到我的 HTML。也可以在我下面链接的网站上查看。

标签: html navigation sass css


【解决方案1】:

我最近遇到了类似的问题,我通过将(更高的)z-index 分配给“活动”状态/类来解决它。它对我有用。 以防万一,为了避免和我一样的挣扎;请记住,z-indexing 仅适用于定位元素。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-02-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多