gordi Posted November 19, 2009 Report Share Posted November 19, 2009 Часто верстальщики сталкиваются с проблемой – необходимо сделать графический блок, в котором может находиться любой контент, с возможностью его растягивания, как по высоте, так и по ширине.Предлагаю простой метод решения данной проблемы.На все про все два файла графики СтатьяПример Link to comment Share on other sites More sharing options...
psywalker Posted November 19, 2009 Report Share Posted November 19, 2009 Часто верстальщики сталкиваются с проблемой – необходимо сделать графический блок, в котором может находиться любой контент, с возможностью его растягивания, как по высоте, так и по ширине.Предлагаю простой метод решения данной проблемы.На все про все два файла графики СтатьяПримерАга круто, а если ширину с боди убрать..то упс Link to comment Share on other sites More sharing options...
gordi Posted November 19, 2009 Author Report Share Posted November 19, 2009 Ага круто, а если ширину с боди убрать..то упс Никто не мешеет указать ширину именно графическому блоку,в данном случае это сделано для простоты. Link to comment Share on other sites More sharing options...
psywalker Posted November 19, 2009 Report Share Posted November 19, 2009 Никто не мешеет указать ширину именно графическому блоку,в данном случае это сделано для простоты.Всегда надо делать наверняка, чтобы при любых раскладах ничего не сломалось Link to comment Share on other sites More sharing options...
gordi Posted November 19, 2009 Author Report Share Posted November 19, 2009 Всегда надо делать наверняка, чтобы при любых раскладах ничего не сломалосьО чем это?И чему там ломаться Link to comment Share on other sites More sharing options...
psywalker Posted November 19, 2009 Report Share Posted November 19, 2009 О чем это?И чему там ломаться Я выше описал Link to comment Share on other sites More sharing options...
gordi Posted November 19, 2009 Author Report Share Posted November 19, 2009 Я выше описалА я выше ответил Link to comment Share on other sites More sharing options...
psywalker Posted November 19, 2009 Report Share Posted November 19, 2009 У тебя картинка определённой ширины,а если мне нужна ширина блока 2000пк, то и картинку я должен такой ширины делать? Link to comment Share on other sites More sharing options...
gordi Posted November 19, 2009 Author Report Share Posted November 19, 2009 У тебя картинка определённой ширины,а если мне нужна ширина блока 2000пк, то и картинку я должен такой ширины делать?А как иначе Есть много других способов решить проблему, то у них свои подводные камни К примеру позиционирование 4 уголков:1. Точность нарезки2. Состыковка3. Если нужна картинка с градиентом сразу море проблем 4. и т.д. и т.п.Мой метод проще, к тому же по весу графики, по html-коду и стилям, более экономичный. Link to comment Share on other sites More sharing options...
psywalker Posted November 19, 2009 Report Share Posted November 19, 2009 А как иначе Есть много других способов решить проблему, то у них свои подводные камни К примеру позиционирование 4 уголков:1. Точность нарезки2. Состыковка3. Если нужна картинка с градиентом сразу море проблем 4. и т.д. и т.п.Мой метод проще, к тому же по весу графики, по html-коду и стилям, более экономичный.Ещё добавить пару элементов и я бы тебе сделал нормальный блок, который бы тянулся куда угодно и как угодно Link to comment Share on other sites More sharing options...
gordi Posted November 19, 2009 Author Report Share Posted November 19, 2009 Ещё добавить пару элементов и я бы тебе сделал нормальный блок, который бы тянулся куда угодно и как угодноПару элементов Зачем плодить лишние сущности, когда и так все работает.Принцип - "необходимо и достаточно", главная заповедь web-верстальщика Link to comment Share on other sites More sharing options...
psywalker Posted November 19, 2009 Report Share Posted November 19, 2009 Пару элементов Зачем плодить лишние сущности, когда и так все работает.Принцип - "необходимо и достаточно", главная заповедь web-верстальщика Эта заповедь плохого верстальщика. Качество - вот заповедь настоящего верстальщика Link to comment Share on other sites More sharing options...
gordi Posted November 19, 2009 Author Report Share Posted November 19, 2009 Эта заповедь плохого верстальщика. Качество - вот заповедь настоящего верстальщика Качество, как раз и предполагает минимум средств в достижении цели.Чем меньше сущностей, тем меньше вероятность поломки или не правильного поведения сущностей. Link to comment Share on other sites More sharing options...
psywalker Posted November 19, 2009 Report Share Posted November 19, 2009 Качество, как раз и предполагает минимум средств в достижении цели.Чем меньше сущностей, тем меньше вероятность поломки или не правильного поведения сущностей.Как раз таки в моём способе кроется качественный блок, с которым можно делать всё что угодно при любых раскладах, а вот в твоём "качестве" такого не наблюдается Link to comment Share on other sites More sharing options...
gordi Posted November 19, 2009 Author Report Share Posted November 19, 2009 (edited) Как раз таки в моём способе кроется качественный блок, с которым можно делать всё что угодно при любых раскладах, а вот в твоём "качестве" такого не наблюдается Вот и покажи свое решение, пока только одни слова, что мое болото лучше Что конкретно не устраиваетв моем методе?Или есть иные причины столь бурного не приятия? Edited November 19, 2009 by gordi Link to comment Share on other sites More sharing options...
psywalker Posted November 19, 2009 Report Share Posted November 19, 2009 Что конкретно не устраивает?Или есть иные причины столь бурного не приятия моего метода?Я уже написал, что меня не устраивает то, что если ширина блока будет 2000пк, то он развалиться, вот и всё. И я не хочу делать картинку 3000пк, чтобы она 100% работала при всех разрешениях, а вместо этого можно добавить пару элементов и делать с боксом что угодно. А ты мне говоришь..качество блин Link to comment Share on other sites More sharing options...
gordi Posted November 19, 2009 Author Report Share Posted November 19, 2009 (edited) Я уже написал, что меня не устраивает то, что если ширина блока будет 2000пк, то он развалиться, вот и всё. И я не хочу делать картинку 3000пк, чтобы она 100% работала при всех разрешениях, а вместо этого можно добавить пару элементов и делать с боксом что угодно. А ты мне говоришь..качество блинПокажи свой вариант.Посчитаем количество элементов.Количество строк таблицы стилей.Вес графики.Если я сделаю основной файл гарфики по ширине больше 2000px она будет весить чуть больше 1кб.Про вырезку не говорю, там вообще мизер получиться.А как у тебя? Edited November 19, 2009 by gordi Link to comment Share on other sites More sharing options...
psywalker Posted November 19, 2009 Report Share Posted November 19, 2009 Покажи свой вариант.Посчитаем количество элементов.Количество строк таблицы стилей.Вес графики.Если я сделаю основной файл гарфики по ширине больше 2000px она будет весить чуть больше 1кб.Про вырезку не говорю, там вообще мизер получиться.А как у тебя?Ок, принимаю вызов, значит задача следующая:Нужен блок, который будет тянуться во все стороны, до бесконечности.Полный кросс, включая ИЕ6Фон на странице белый, окВстречаемся тут Link to comment Share on other sites More sharing options...
s0rr0w Posted November 19, 2009 Report Share Posted November 19, 2009 Ок, принимаю вызов, значит задача следующая:Нужен блок, который будет тянуться во все стороны, до бесконечности.Полный кросс, включая ИЕ6Фон на странице белый, окВстречаемся тутМожно я вставлю свои 5 копеек?Задача в данном виде не несет коммерческого смысла. Мониторы ограничены, и разрешения более 1920 точек мы врядли увидим на столах потребителей в ближайшие 5 лет. Поэтому смысла тратить кучу времени для построения кода с учетом бесконечности я не вижу. Включая ИЕ6 - это бред. Давайте включим еще Оперу 7 и Нетскейп Навигатор 4.7 Link to comment Share on other sites More sharing options...
psywalker Posted November 19, 2009 Report Share Posted November 19, 2009 (edited) s0rr0w1) Мониторы ограничены, и разрешения более 1920 точек мы врядли увидим на столах потребителей в ближайшие 5 лет. Ок, отличная мысль, значит ещё 5 лет мы можем не боятся за то, что наш сайт развалиться.2) Поэтому смысла тратить кучу времени для построения кода с учетом бесконечности я не вижу.Картинка ПНГ 1920пк в ширину, это круто, я понимаю, это не то, что мои каких то два огромных пустых дива и маленький спрайт на все углы..В общем вот мой громоздкий вариант с лишними двумя дивамиhttp://www.psywalker.ru/Forum/box2/block/main.html Edited November 19, 2009 by psywalker Link to comment Share on other sites More sharing options...
Searcher Posted November 20, 2009 Report Share Posted November 20, 2009 а почему бы и не воспользоваться более надежным и менее тяжелым вариантом psywalker, помоему достоинства на лицо Link to comment Share on other sites More sharing options...
gordi Posted November 20, 2009 Author Report Share Posted November 20, 2009 (edited) s0rr0w1) Ок, отличная мысль, значит ещё 5 лет мы можем не боятся за то, что наш сайт развалиться.2) Картинка ПНГ 1920пк в ширину, это круто, я понимаю, это не то, что мои каких то два огромных пустых дива и маленький спрайт на все углы..В общем вот мой громоздкий вариант с лишними двумя дивамиhttp://www.psywalker.ru/Forum/box2/block/main.htmlПро спрайты почитай и поймешь с какими проблемами там сталкиваются: Спрайты Посмотри свой пример в OPERA или Google Chrome при ZOOM в плюс и минус, инверсия наблюдается Также при максимальном уменьшении размера окна браузера по горизонтали.Ты вот все о качестве говоришь, и два дополнительных элемента проблемы не решают Edited November 20, 2009 by gordi Link to comment Share on other sites More sharing options...
Great Rash Posted November 20, 2009 Report Share Posted November 20, 2009 psywalkerВсе круто, но я бы еще ограничил ширину твоего блока 50 пикселями, а то если совсем сузить окно получается неприятность Link to comment Share on other sites More sharing options...
gordi Posted November 20, 2009 Author Report Share Posted November 20, 2009 (edited) Выложил обновленный пример - testРазмер основного файла графики - 3000*36 (вес 775 б) [полностью данная графика используется одним файлом под горизонтальное меню].Вырезанной части - 3000*9 (вес 288 б)Совокупный вес - 1063 бЧто в принципе можно уменьшить.Разметка таже, никаких дополнительных контейнеров нет.Тестируем, высказываем замечания. Edited November 20, 2009 by gordi Link to comment Share on other sites More sharing options...
s0rr0w Posted November 20, 2009 Report Share Posted November 20, 2009 Вы неправильно оцениваете качество сборки. Главное не то, насколько универсально она сделана, а то, как легко ее изменять и расширятьЯ усложню задачу. Давайте в середине бокса проведем полоску фона, на которой будет написан заголовок блока.Вот как тут Link to comment Share on other sites More sharing options...
Recommended Posts