фантазии не хватает

[musulman]

скрин :

интересует как как можно сверстать эти кнопки ?

врестка фисированная я вот думаю как будет лучше ?

вставлять одним рисунком как то даже стыдно

кто что посоветует ?

[Mordraug]

А чем вам не нравятся такие кнопки? достаточно просто все. Если вас смущает нижняя ? так сделайте вы этот элемент арнамента поверх слоем. на эти кнопки вам 1 картинка только понадобится , ммм.. знание вот этого урока , немного смекалки, и возможно вот эта статья в контексте как все сделать с одной картинкой. Использование PNG применительно к вашему случаю смысла не имеет.. ну вот как-то так. Пробуйте, не будет получаться ? поможем.

[klierik]

1. кнопка - обычная структура бокса. а то есть 3div structure

2. полоска на фоне - background

3. белая тень между кнопками - лучше всего вставлять ручками каждый раз. сам рисунок помещаем в див с фоновым изоб.

4. графити. весь блок с кнопками - position: relative;

графити в отдельный див в фон. изо. и position: relative; + top + left;

все 8)

[Mordraug]

да все гораздо проще =) 3 дива там нафиг не надо..

а надо там 1 див (под все меню) и 1 ul (поскольку меню это список ссылок ? так и верстать его нужно грамотно ? списком, количество элементов списка равно количеству кнопок.). Как убирать маркеры у списка и задавать отступы нужные, надеюсь объяснять не нужно? Внутри элементов списка - ссылки (смотри урок "эффект перекатывания").

Код должен в итоге получиться примерно такой:

<div id="menu_container">
<ul>
<li><a href="#" title="кнопка 1">Кнопка 1</a></li>
<li><a href="#" title="кнопка 2">Кнопка 2</a></li>
<li><a href="#" title="кнопка 3">Кнопка 3</a></li>
<li><a href="#" title="кнопка 4">Кнопка 4</a></li>
</ul>
<img src="mega_ornament.gif" width="" height="" alt="" class="mega_ornament" />
</div>

Картинок должно получиться что-то вроде четырех:

1 - фон под всем меню;

2 - фон в элементе списка (это как раз эти разделители между кнопками);

3 - сама кнопка (1 картинка на 2 состояния);

4 - это, собственно ? орнамент, который накладывается снизу поверх кнопки.

Тени вокруг ? это отдельный разговор, их можно решить по-разному. Либо картинок будет чуть больше, либо код усложнится чуток.. все зависит от потребностей.

В общем, что-то вроде этого

Если сам все же не разберешься ? выложи кусочек psd (в архиве) с этим меню (ну или хотябы 2 гифа/пнг с активным и неактивным состоянием) ? завтра в перерыве между работой сверстаю его для разнообразия Увидишь, что ничего там сложного нет.