Горизонтальное резиновое меню.

[eleonore]

Использую display:table; и display:table-cell. Подскажите,пожалуйста,что делать,если в некоторых пунктах меню два слова,а в некоторых одно??"Двухсловесные" пункты при изменении размеров браузера скачут очень не красиво.

При разрешении от 1024 и больше все хорошо:http://s41.radikal.r...19dc3cb1c98.jpg

Когда сужается меньше 1024px происходит следующее: http://s018.radikal....f2c078a8d48.jpg

Задала white-space:nowrap для li, помогло,слова перестали уходить друг под друга.

Но теперь при сужении окна появляется огромная полоса прокрутки: http://s017.radikal....8b2ac1a4496.jpg

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

html:

<nav>

<ul class="navigation">

<li><a href="#">SEARCH AIRPLANES</a></li>

<li>|</li>

<li><a href="#">RESTORATION</a></li>

<li>|</li>

<li><a href="#">MAINTENANCE</a></li>

<li>|</li>

<li><a href="#">EXHIBITIONS & AIRSHOW</a></li>

<li>|</li>

<li><a href="#">CONTACTS AND FEEDBACK</a></li>

</ul>

</nav>

css:

ul.navigation{

display:table;

width:100%;

}

ul.navigation li{

display:table-cell;

padding:10px;

text-align:center;

white-space:nowrap;

}

[Daiver]

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

И под какие минимальные разрешения должно работать?

[eleonore]

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

И под какие минимальные разрешения должно работать?

под 768px, сужаться должно все меню.не только шрифт,а каждый li ,пропорционально сужаться должен и текст и паддинги..

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

И под какие минимальные разрешения должно работать?

И да,все должно идти в одну строку.

[eleonore]

Нашла ещё вариант

html:

<div class="navig">

<a href="#">SEARCH AIRPLANES</a>|

<a href="#">RESTORATION</a>|

<a href="#">MAINTENANCE</a>|

<a href="#">EXHIBITIONS & AIRSHOW</a>|

<a href="#">CONTACTS AND FEEDBACK</a>

<span class="empty"></span> <!-- элемент, занимающий вторую строку -->

</div>

css:

div.navig{

width: 90%; /* ширина меню */

margin: 0 auto; /* центрирование обертки меню */

text-align: justify; /* растягиваем содержимое меню */

overflow: hidden; /* скрываем не поместившиеся пункты */

}

div.navig a{

text-decoration: none; /* убираем подчеркивание ссылки */

display: inline-block; /* если больше 1 слова в пункте */

color:#47566b; /* цвет ссылок */

width:18%;

text-align:center;

vertical-align:top;

}

.empty{

width: 100%;

display: inline-block;

}

Но при сужении на 1024px слова падают друг под друга,что мне кажется не слишком красиво,хотя вроде и ничего,но все же хочется,чтобы все шло в одну строчку:

О меньших расширениях я молчу,там вообще все в кучу становится.

[mrnobody]

http://htmlbook.ru/css/white-space

white-space: nowrap;

но тогда нужно задать минимальную ширину или блоку с менюшкой или самим пунктам меню.

Edited April 28, 2013 by mrnobody

[eleonore]

http://htmlbook.ru/css/white-space

Я пробовала nowrap,проблемы это моей не решает.при 1024px получаю следующее:

может я вообще не тем путем иду?...

Edited April 28, 2013 by eleonore