Верстальщики! Помогите разобраться!

Вопрос пойдет о верстке блоков с закругленными углами. Мой способ таков
HTML

<div class="main_menu l_t">

<div class="r_t">

		<div class="l_b">

			<div class="r_b">

				<p>param</p>									</div>

		</div>

	</div>

</div>

css

.r_t, .r_b, .l_t, .l_b {background-repeat:  no-repeat;}

.l_t {background-position: 0 0;}

.r_t {background-position: 100% 0; }

.l_b {background-position: 0 100% }

.r_b {background-position: 100% 100%; }


.main_menu {background-image:  url("../images/violet/l_t.gif"); background-color: #464E8C;}

.r_t {background-image:  url("../images/violet/r_t.gif"); }

.l_b {background-image:  url("../images/violet/l_b.gif"); }

.r_b {background-image:  url("../images/violet/r_b.gif");  }

Однако заказчик требует чтобы было сделано как здесь! ссылка

Потому что «ИЗОБРАЖЕНИЙ БЫТЬ НЕ ДОЛЖНО.Это не мой каприз, это диктовка оптимизации, чем меньше изображений, тем меньше http потоков, тем меньше нагрузка на сервер. Поэтому нужно избавляться от лишних данных, особенно от таких явных.»
При сохранении bg ведь не сохраняется вот он и думает, что там графики нет((
Может я чего то недопонимаю или всё-таки он прав надо делать так!((
Подскажите как надо.

ссылка

Приветствую собрата по ремеслу!!!
Пункт 1. Заказчик всегда прав. Если неправ, смотри пункт первый.
Хоть и не совсем понял в чем беда, изображений должно быть меньше. А сделать можно и попроще, если опишете суть проблемы.

Цитата:

При сохранении bg ведь не сохраняется вот он и думает, что там графики нет((

Плохой из тебя верстальщик, если не можешь разобраться в чужом коде. В примере, который тебе привел заказчик - изображений нет.

Если исходить из того, что лучше, что хуже - твой вариант меньше грузит комп. Вариант заказчика - меньше грузит траффик.

З.Ы. йа не верстальщег.

Если заказчик хочет, то пусть получит.

В каждом проекте для решения "закругленных углов" нужно определиться с решением (или как в данном случае - диктует заказчик) - картинки vs кучка div'ов.

Без изображений - лучшего варианта чем на cssplay.co.uk просто нет.

С картинками же ваше решение можно оптимизировать несколькими способами, например:

Если ширина блока задана строго

<div class="header"><!-- в background верхняя часть блока с закругленными углами --></div>

<div class="content">content</div>

<div class="footer"><!-- соответственно нижняя часть --></div>

В большинстве случаев даже и без header можно обойтись, присвоив background с закругленными углами блоку content

Или "крутой" семантический вариант для особых извращенцев

<div class="content">content</div>

<hr class="footer" />

<!-- здесь в CSS hr присваивается бэкграунд, для IE же чтобы убрать border нужен fix через conditional comments конструкция вида <div class="hr"><hr /></div> (сответственно поправить таблицу стилей) -->

Ну и если ширина неизвестна, то что-то вида

<div class="header"><div class="r_t"><!-- сдвигаем слой float'ом --></div></div>

<div class="content">content</div>

<div class="footer"><div class="r_b"><!-- сдвигаем слой float'ом --></div></div>

Соответственно, тоже можно оптимизировать и сократить количество div, присвоив background блоку content.

Всем спасибо за советы, я сделал двумя способами и тказался)) Не могу я так верстать это не семантично к тому же валидацию не проходит.

Цитата:

валидацию не проходит

это не так

Sir_Michael нет с вашими примрами всё ок

Цитата:

Всем спасибо за советы, я сделал двумя способами и тказался)) Не могу я так верстать это не семантично к тому же валидацию не проходит.

Цитата:

Sir_Michael нет с вашими примрами всё ок

:blink: