Jump to content
  • 0

Люди, помогите с вкладками, они начинают сводить меня с ума


varanika
 Share

Question

Люди, вот скоро крыша съедет. Пытаюсь добиться красоты вкладок. Важно, чтобы при активации каждой вкладки текст ее шапки приобретал тот же цвет, что и линия подчеркивания, а выходит глюк и первая вкладка навечно остается в цвете #333....

 

 

Код

  <div class="m-vibor">
              <br id="tab2"/>
              <br id="tab3"/>
              <a href="#tab1" class="m-vibor-menu">Категории</a>
              <a href="#tab2" class="m-vibor-menu">Гамма</a>
              <a href="#tab3" class="m-vibor-menu">Полезное</a>
              <div>
                  <select class="m-category-menu">
                     Текст 1
                  </select>
            </div>
              <div>
                     Текст 2
 
                 </div>
             <div>
              Текст 3
          </div>
 
      </div>
 
 
 
CSS 
 
#tab2, #tab3 {
    position: fixed;
}
.m-vibor > a, .m-vibor #tab2:target ~ a:nth-of-type(1), .m-vibor #tab3:target ~ a:nth-of-type(1), .m-vibor > div {
    padding: 0px 19px;
}
.m-vibor > a, .m-vibor #tab2:target ~ a:nth-of-type(1), .m-vibor #tab3:target ~ a:nth-of-type(1), .m-vibor #tab1:target ~ a:nth-of-type(1){
    border-bottom: 1px solid #777;
}
 
.m-vibor > a {
    line-height: 28px;
    text-decoration: none;
}
#tab2, #tab3, .m-vibor > div, .m-vibor #tab2:target ~ div:nth-of-type(1), .m-vibor #tab3:target ~ div:nth-of-type(1) {
    display: none;
    }
.m-vibor > div:nth-of-type(1), .m-vibor #tab2:target ~ div:nth-of-type(2), .m-vibor #tab3:target ~ div:nth-of-type(3) {
    display: block;
}
 
 
И проблемная часть:
 
 
.m-vibor > a:nth-of-type(1), .m-vibor #tab2:target ~ a:nth-of-type(2), .m-vibor #tab3:target ~ a:nth-of-type(3) {
      border-bottom: 1px solid #333;
      color: #333;
  }
.m-vibor a:hover, .m-vibor a:active, .m-vibor a:target {
    color: #333;
    border-bottom: 1px solid #333;
}
 
 
Ну почему Категории остаются темнее, а их подчеркивание меняется???

 

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By LUCIA
      Здравствуйте, пожалуйста, помогите, как сверстать такое меню? При переключении по страницам личного кабинета вкладка обозначается впуклостью 🙂 с кругом. Нужно в стилях играть с осями ?

    • By port723
      Всем привет,
       
      Страница с проблемой: http://mir-kaminov.su/foto-kaminov
      Суть проблемы: в фотогалерее после 2х кликов по одному изображению (увеличить и потом уменьшить картинку для просмотра) если отвести курсор в сторону - появляется оранжевая рамка на этой малой картинке.
      И пропадает только после клика по пустой области сайта. Похоже на "снять выделение".
      В хроме это малый прямоугольник, а в мозилле это прямоугольник во весь размер малого изображения.
       
      Не красиво это, второй день никак не найду корень проблемы. Самоучка, и прошу сильно не ругать.
       
      Прошу помощи,
      коллеги выручайте пожалуйста, где и на что заменить код ?
       
       
      Скриншот проблемы: фотка слева вверху с этой навязчивой оранжевой рамкой в точечку

    • By HtVik
      Вот и подошел  к завершению очередной интенсив от Html Academy. Поэтому хочу поделиться своими впечатлениями от участия и отзывом об этом ресурсе.
       
      Самые главные плюсы, которые я уяснил по результатм участия в курсах академии:
      система наставников. Это очень ценно, когда знающий человек указывает на твои ошибки и дает советы, как исправить; огромное количество практических занятий и заданий. Всем очень советую – не только тем, кто планирует заниматься версткой. Полезным будет пройти всем, чья работа связана с интернетом – очень расширит ваш кругозор.
       
      Если будете участвовать в интенсиве, то можете использовать промо-код от html academy  319847d44e . Этот промокод даст вам скидку в 10%. Адрес - htmlacademy.ru/intensive
       
      А кто-нибудь с этого форума уже проходил интенсив? 
    • By advokatua
      Проблема с псевдоклассом nth-child.
      Не могу понять каким образом он 3-ий "а" элемент воспринимает как 4-ый, а первого якобы вообще нету.
      Получается так будто элемент header тоже входит в счет, но причем тут хедер если явно указано
      .categories a:nth-child(1)
      ?
      55-ая строка CSS-ника
      Песочница: http://cssdesk.com/qxEvw
      Может кто подсказать или направить где конкретно почитать об таком странном поведении?
    • By weber100
      Здравствуйте, уважаемые знатоки верстки.
      У меня вопрос такой: как можно реализовать шаблон с фиксированной шириной, чтобы при увеличении масштаба элементы на странице (div-ы) у которых задана ширина, не выходили за окно монитора - без нижней полосы прокрутки.
      Вот пример реализации http://digital.redsign.ru/, ширина задана фиксированная 1120px, но мастабируется без проблем, а также левые баннеры скрываются, для более удобного просмотра.
      Если кто знает, прошу помочь. Также требуется опытный верстальщик для удаленной работы.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy