0

Нужно сверстать такое меню:
Неактивные пункты окрашены в серый цвет с использованием градиента, активная владка имеет цвет основого блока с информацией- белый, а пункт, на который наведен курсор, становится выше остальных, как на картинке

Не получается выровнять текст в пунках меню по вертикали, vertical-align не работает. Цвет выбранного пункта у меня не меняется на белый, нужен не пседокласс active, а что-то другое, но я не знаю что.
При наведении курсора высота пункта меню увеличивается вниз, а не вверх.
Пока что получается только так

Вот код, только там без картинок
http://jsfiddle.net/tUrHA/
Подскажите, как хотя бы приблизиться к тому, что я хочу получить?

2
  • Deonis, Большое спасибо!
    – Heidel
    23 мая 2012 в 17:28
  • Да не за что ...
    – Deonis
    23 мая 2012 в 17:47

2 ответа 2

1

Уж пардон за откровенность, но это свалка, а не CSS. Как-то бы упорядочили, что ли... Оптимизировать за вас не стал, сделаете сами. Смотрим пример для ваших закладок

7
  • То, что надо с изменением высоты пункта меню, спасибо за помощь! Но цвет активной владки на белый в вашем коде не меняется :( Не подскажите, что нужно в него добавить, чтобы это тоже было?
    – Heidel
    23 мая 2012 в 16:56
  • Вы используете Ajax? Или при клике страница перегружается? И по ходу пьесы, псевдокласс :active - это когда на ссылку нажимаешь, но это не значит, что она остается активной до тех пор, пока не нажмешь на другую.
    – Deonis
    23 мая 2012 в 16:57
  • Я пока еще не знаю Ajax, нужного эффекта средствами html и css можно добиться?
    – Heidel
    23 мая 2012 в 17:00
  • Да, я знаю, что псевдокласс :active это не, что нужно.
    – Heidel
    23 мая 2012 в 17:01
  • 1
    В этом случае выход такой - на каждой странице в соответствущий ей элемент <li>, добавить класс (напр., active_link), в котором задать белый цвет. Добавлять надо так: <li class="about active_link">
    – Deonis
    23 мая 2012 в 17:08
0

Используй line-height равный высоте блока. Будет по середине.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.