Верстальщики! Помогите разобраться!
9 повідомлень
#16 років тому
Вопрос пойдет о верстке блоков с закругленными углами. Мой способ таков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 ведь не сохраняется вот он и думает, что там графики нет((
Может я чего то недопонимаю или всё-таки он прав надо делать так!((
Подскажите как надо.
посилання
188 повідомлень
#16 років тому
Приветствую собрата по ремеслу!!!Пункт 1. Заказчик всегда прав. Если неправ, смотри пункт первый.
Хоть и не совсем понял в чем беда, изображений должно быть меньше. А сделать можно и попроще, если опишете суть проблемы.
35 повідомлень
#16 років тому
Цитата:При сохранении bg ведь не сохраняется вот он и думает, что там графики нет((
Плохой из тебя верстальщик, если не можешь разобраться в чужом коде. В примере, который тебе привел заказчик - изображений нет.
Если исходить из того, что лучше, что хуже - твой вариант меньше грузит комп. Вариант заказчика - меньше грузит траффик.
2195 повідомлень
#16 років тому
Если заказчик хочет, то пусть получит.В каждом проекте для решения "закругленных углов" нужно определиться с решением (или как в данном случае - диктует заказчик) - картинки 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.
9 повідомлень
#16 років тому
Всем спасибо за советы, я сделал двумя способами и тказался)) Не могу я так верстать это не семантично к тому же валидацию не проходит.
2195 повідомлень