Div навигации, влияющий на другие элементы навигации

0

У меня есть несколько элементов 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

  • 0
    Пожалуйста, также оставьте свой соответствующий HTML.
  • 0
    Моя ошибка, я добавил JSFiddle, который идет в мой HTML. Его также можно посмотреть на сайте, на который я ссылаюсь ниже.
Теги:
sass
navigation

1 ответ

0

В последнее время у меня была аналогичная проблема, и я решил ее, назначив (более высокий) z-индекс "активным" состояниям/классам. Это сработало для меня. На всякий случай, чтобы избежать той же самой борьбы; помните, что z-индексирование работает только с позиционированными элементами.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню