Съезжает меню

[massef]

Добрый вечер!

 

Сделал меню, но при масштабировании последний пункт съезжает.

Подскажите, что можно с этим сделать?

 

http://jsfiddle.net/P274Z/embedded/result/

Edited January 18, 2014 by massef

[Aleksandr.L]

Вот так надо? http://jsfiddle.net/LMvak/3/embedded/result/

[massef]

Вот так надо? http://jsfiddle.net/...mbedded/result/

Нет, нужно выровнять по середине, но тогда съезжает.

 

В макете вообще вот так

 

по бокам видны направляющие, это макс. ширина 1470px, кто муже расстояние между пунктами не ровное (руки бы оторвать дизайнеру), но я сделал по своему.

[Z1gnet]

Подскажите, что можно с этим сделать? http://jsfiddle.net/...mbedded/result/

вы по определению сделали не правильно. вы попытались подогнать отступы что бы получился эффект того что навигация растянута на 1470рх. но если добавить хотя бы одну букву к любому пункту меня то все сразу валится. к тому же я так понимаю что это резиновый сайт (глупо делать сайт шириной 1470рх) , а значит навигация должна сужаться. тут нас спасут табличные свойства. вот так http://codepen.io/Z1gnet/pen/EIrgb

[massef]

 

Подскажите, что можно с этим сделать? http://jsfiddle.net/...mbedded/result/

вы по определению сделали не правильно. вы попытались подогнать отступы что бы получился эффект того что навигация растянута на 1470рх. но если добавить хотя бы одну букву к любому пункту меня то все сразу валится. к тому же я так понимаю что это резиновый сайт (глупо делать сайт шириной 1470рх) , а значит навигация должна сужаться. тут нас спасут табличные свойства. вот так http://codepen.io/Z1gnet/pen/EIrgb

 

 

Спасибо большое. Сайт фиксированный, я сам удивился когда увидел эти размеры.

 

Небольшой вопрос.

Я правильно понимаю, что если нужно растянуть меню равномерно в рамках максимальной ширины макета, то нужно использовать имитацию таблицы?

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

[Z1gnet]

есть разные способы, но я предпочитаю имитацию таблицы. как по мне это самый оптимальный вариант. вы легко можете удалять, добавлять или изменять пункты меню. везде отлично работает начиная с ие8. не нужно никаких лишних блоков и классов, не нужен js, плюс можно выровнять текст по вертикали. там еще есть такая фишка как если вам нужно что бы кнопки были одинакового размера (это заметно когда кнопки блочные и с фоном на ховер), то нужно просто на ul задать свойство table-layout: fixed;

Edited January 19, 2014 by Z1gnet

[Светлана Г.]

есть разные способы, но я предпочитаю имитацию таблицы. как по мне это самый оптимальный вариант. вы легко можете удалять, добавлять или изменять пункты меню. везде отлично работает начиная с ие8. не нужно никаких лишних блоков и классов, не нужен js, плюс можно выровнять текст по вертикали. там еще есть такая фишка как если вам нужно что бы кнопки были одинакового размера (это заметно когда кнопки блочные и с фоном на ховер), то нужно просто на ul задать свойство table-layout: fixed;

Но при таком способе надо учитывать то, что таблица не ломается, и если ее размер превысит ширину родителя - появится прокрутка.