CSS - Строка меню без таблиц на жидкой и центрированной

Question

Я пытаюсь создать панель меню без таблиц, используя несколько изображений PNG с прозрачными пленками. Строка меню вложена в оболочку с минимальной / максимальной шириной и центрируется с помощью автоматического левого / правого поля. В идеале я бы хотел, чтобы 1 секция корректировалась по длине с помощью фона repeat-x. Поскольку у png есть значение прозрачности, они не могут перекрывать друг друга, так как это увеличит видимость на перекрывающихся секциях.

Я пробовал абсолютное позиционирование, но это вынуждает вас иметь горизонтальное начальное местоположение, которое недоступно в макете жидкости. Стиль оболочки:

margin-left: auto; 
margin-right: auto; 
min-width: 960px; 
max-width: 1260px; 
padding: 0px 20px 0px 20px; 
overflow: visible;

Рабочий дизайн со столами: http://jsfiddle.net/f35UK/

Изображения (я использовал base64 в коде, но на всякий случай):

• http://imgur.com/REQ2E.png основной спрайт
• http://i.imgur.com/Mnp0q.png
• http://imgur.com/Mnp0q.png

Answer 1

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

http://basenharald.nl/3d/ в поиске источника для слова "navatie" ниже, что вы найдете навигацию UL

также откройте http://basenharald.nl/3d/css/style.css в поиске источника для "#nav".Это часть css для настройки навигации.