Проверить домен:
ICQ Lamphoster.com 89-65-25

Виртуальный Хостинг
Заказать
Серверы VDS/VPS
Заказать
Купить Домены
Заказать
Лицензии ПО
Заказать

Резиновое меню 100%

Как создать Резиновое 100% меню, которое бы тянулось по всей ширине родительского блока. То есть левый пункт меню должен прижиматься к левому краю, а правый к правому. Между пунктами меню должно быть одинаковое расстояние. Вобщем все должно выглядеть как на примере ниже.

Как же это можно реализовать? Используя отступы между пунктами в процентах или задавая в процентах ширину каждого пункта мы не добъемся желаемого результата. На помощь здесь приходит текстовое выравнивание justify. При таком выравнивании все строки текста в абзаце, за исключением последней, растягиваются по всей ширине блока. Получается, что наша задача заставить растягиваться одну единственную строку текста. Для этого нужно добавить в строку длинный строковый (inline) элемент, который не умещался бы в первой строке и, следовательно, переносился бы на вторую, заставляя тем самым первую (наше Резиновое меню) растягиваться по всей ширине. В качестве такого элемента можно использовать рисунок или любой строковый элемент с большим значением margin.

CSS:  
                      
.main-menu {  text-align: justify !important;  overflow:hidden; /* for IE6 */  }   
.main-menu img { width:100%; height:0px; }

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

 


Новости

Весенняя лихорадка цен. Цены снижены более чем на 50%.  [Подробнее...]
Изменение цен на тарифы хостинга.  [Подробнее...]
Появилась возможность пополнять внутренний баланс  [Подробнее...]

Способы оплаты

Способы оплаты хостинга Lamphoster.com

Способы оплаты

Способы оплаты хостинга Lamphoster.com