Навигация по сайту

[Vlad]

Переделываю верхнее меню на сайте, чтобы оно во-первых, было на ul-li, во-вторых на прозрачном фоне, чтобы его легко менять. Получилось следующее.

http://htmlbook.ru/themes/html5/navigation.html

Есть небольшая проблемка. Для получения прозрачности применяются всякие хитрые сдвиги, за счёт этого при выборе пункта текст сдвигается влево на 10 пикселов. Хотелось бы, чтоб верхний текст вообще не двигался. Что посоветуете?

[swetlana]

А зачем картинки?

Почему не применить border-radius?

[Vlad]

Там снизу вкладки еще закругление, не знаю как его сделать через border-radius.

[rash]

Там снизу вкладки еще закругление, не знаю как его сделать через border-radius.

Как-нибудь так не получится: http://kizmarh.ya.ru/replies.xml?item_no=1376 ?

[swetlana]

Там снизу вкладки еще закругление, не знаю как его сделать через border-radius.

и действительно…

вот получился некоторый костылик.

Для #menu .show добавить padding-left: 10px;

Для #menu span добавить padding-right: 5px;

Для #menu .show span добавить margin-right: -10px; и padding-right: 15px; Убрать position: relative;

Крутилось только в веб-инспекторе, более нигде не тестировалось.

Но тут работает исправно.

Основная мысль, надеюсь, понятна.

Как-нибудь так не получится: http://kizmarh.ya.ru/replies.xml?item_no=1376 ?

Это же круть крутейшая!

[Vlad]

Как-нибудь так не получится: http://kizmarh.ya.ru/replies.xml?item_no=1376 ?

Классная идея. Но она не работает с рамками, только одноцветными областями.

Ещё пришла в голову идея сделать два внутренних уголка-рисунка и добавлять их через after и before ко вкладке.

и действительно…

вот получился некоторый костылик.

Для #menu .show добавить padding-left: 10px;

Для #menu span добавить padding-right: 5px;

Для #menu .show span добавить margin-right: -10px; и padding-right: 15px; Убрать position: relative;

Спасибо, но все равно какие-то сдвиги происходят. Но идея сделать на CSS3 упала на благодатную почву. Попробую поискать решение сделать всё красиво и без картинок.

[swetlana]

Ещё пришла в голову идея сделать два внутренних уголка-рисунка и добавлять их через after и before ко вкладке.

вполне правильная идея.

[psywalker]

Vlad

Влад, отправил тебе письмо вот с таким вариантом, и по моему доделанным всё таки.

http://css-live.ru/htmlbook/navigation.html

[Vlad]

Сделал как посоветовала Светлана, внутренние уголки добавил через псевдоэлементы. Вот результат в разных браузерах.

IE7

IE8

IE9

Fx

В IE9 вылез небольшой косячок, которого нет в предыдущих версиях, смещение вкладки на один пиксел вверх, из-за этого видны небольшие линии сбоку. Почти незаметны, но если приглядеться как в анекдоте...

У вкладки используется две границы — светлая и тёмная. Светлая практически не видна, но если её убрать, видно, что с ней было лучше.

[swetlana]

graceful degradation в действии

а где посмотреть вживую можно?

Сделал как посоветовала Светлана…

У вкладки используется две границы — светлая и тёмная. Светлая практически не видна, но если её убрать, видно, что с ней было лучше.

ух… на этот счёт Светлана ещё может кой-чего посоветовать. Особенно по результатам недавнего спора, в котором таки была рождена истина.

Edited February 26, 2011 by swetlana

[Vlad]

О чём речь?

[swetlana]

Вот о предыдущем посте речь. Охота посмотреть вживую на результат. Это возможно?

[Vlad]

Пока нет. Завтра выложу.