Подвинуть пункт меню налево.

[amelice]

Начала верстать макет от Verdera.

Макет резиновый и видно что меню тоже тянется по ширине. Проблема с первым пунктом меню. По макету текст в меню отцентрирован, а в первом пункте текст выровнен с левого края, но пропорция сохранена. То есть с текста до правого бордюра расстояние такое же как в других пунктах.

Попробовала два варианта решения:

1. Просто сделала как в макете - отрезала часть ширины первого пункта, задала ему text-align:left, а остальным text-align:center. Ссылка

2. отрицательным маргином первый пункт подвинула налево.Ссылка

В первом случае ширину первого пункта сократила до 15%, когда ширина остальных пунктов 20%.

Во втором подвинула на 130 пк.

Но в двух случая меня смущает, что я не могу быть уверена как они поведу себя в разных браузерах, так как я просто все на глаз сокращала и двигала, что не знаю правильно ли так делать?

Еще во втором случая при уменьшении окна

.nav{
overflow:hidden;}

.nav хладнокровно режет пункты.

Что вы посоветуете, может есть какие то другие решения, чтоб можно было контролировать?

Edited August 3, 2011 by cheburek

[SelenIT]

Моя задумка была в том, что при таком подходе задачи двигать пункт и не возникло бы . Или настолько критично, чтоб вся полоска от черты до черты была кликабельной?

[amelice]

Моя задумка была в том, что при таком подходе задачи двигать пункт и не возникло бы . Или настолько критично, чтоб вся полоска от черты до черты была кликабельной?

SelenIT, ты можешь мне обяснить в ЛС? Если по твоей задумке получиться, то результат сюда выложим. Потому что У меня тоже с ИЕ7 проблемы.