Дико глупый вопрос

[hedgehog]

Привет всем. Что-то я с утра безумно туплю и не могу придумать что сделать в такой простой ситуации: http://jsfiddle.net/p7vbu/

Что-то можно сделать, чтобы в этом случае меню не прыгало из-за увеличивающегося контента без задания жестких размеров/расположения пунктам меню и без js?

[MeTaN]

Привет всем. Что-то я с утра безумно туплю и не могу придумать что сделать в такой простой ситуации: http://jsfiddle.net/p7vbu/

Что-то можно сделать, чтобы в этом случае меню не прыгало из-за увеличивающегося контента без задания жестких размеров/расположения пунктам меню и без js?

ну например можно с padding при наведении поиграться,

li:hover{font-weight:bold;cursor:pointer; padding: 5px 3px 5px 4px}

но для длинного пункта меню прийдётся писать отдельный стиль, так что выход корявенький.

Можно более сложно.

<li> делать position: relative; в контенте дублировать название пункта по два раза в <span>- например, первый будет служить распоркой для <li> чтобы ширина была под буквы и текст этого спана text-indent: -1000px например, а второй спан сделать абсолютно позиционированным position: absolute; и выровнять посередине своего <li> тогда он никак не будет влиять на размеры контейнера <li>

Edited May 18, 2012 by MeTaN

[rus]

так а что вы хотели то? у меню без ховера стоит нормал, а с ховером - болд.

[hedgehog]

так а что вы хотели то? у меню без ховера стоит нормал, а с ховером - болд.

Можно на "ты" Как я уже описал в первом посте, из-за болда меню раздвигается. А этого хочется избежать.

ну например можно с padding при наведении поиграться,

но для длинного пункта меню прийдётся писать отдельный стиль, так что выход корявенький.

Шрифт рендерится в разных системах и браузерах по-разному. Не подгадаешь с паддингами.

Edited May 18, 2012 by hedgehog

[Seemann]

Не, не тупишь)

Просто, если это задумка какого-то дизайнера, то дай ему в лоб за такую идею , а если твоя, то так делать не советую

Нехороший, имхо, эффект.

[hedgehog]

Просто, если это задумка какого-то дизайнера, то дай ему в лоб за такую идею , а если твоя, то так делать не советую

Нехорошо так делать, если дизайнер - твой хороший друг и девушка, просто без опыта

[Avalon4eg]

а чем обусловлено то, что нельзя задать фиксированную ширину? может легче отказать от это

[hedgehog]

а чем обусловлено то, что нельзя задать фиксированную ширину? может легче отказать от это

Тем, что из этого макета я собираюсь верстать шаблон для CMS (Drupal), а пользователь не должен каждый раз лезть в шаблон, чтобы добавить пункт в меню или изменить текст.

[Avalon4eg]

Если нужно выделять пункт меню при наведении - то можно место font-weight к примеру поменять цвет заливки или текста - или это принципиально?

UPD. еще вариант как можно сымитировать жирность - добавить text-shadow на :hover =)

Edited May 18, 2012 by Avalon4eg

[MeTaN]

можно ещё text-shadow забахать. http://htmlbook.ru/css/text-shadow а для IE filter: Shadow(Color=#666666, Direction=45, Strength=4);

ой ссори уже написали выше.

Edited May 18, 2012 by MeTaN