Графический контейнер

[gordi]

Часто верстальщики сталкиваются с проблемой – необходимо сделать графический блок, в котором может находиться любой контент, с возможностью его растягивания, как по высоте, так и по ширине.

Предлагаю простой метод решения данной проблемы.

На все про все два файла графики

Статья

Пример

[psywalker]

Часто верстальщики сталкиваются с проблемой – необходимо сделать графический блок, в котором может находиться любой контент, с возможностью его растягивания, как по высоте, так и по ширине.

Предлагаю простой метод решения данной проблемы.

На все про все два файла графики

Статья

Пример

Ага круто, а если ширину с боди убрать..то упс

[gordi]

Ага круто, а если ширину с боди убрать..то упс

Никто не мешеет указать ширину именно графическому блоку,

в данном случае это сделано для простоты.

[psywalker]

Никто не мешеет указать ширину именно графическому блоку,

в данном случае это сделано для простоты.

Всегда надо делать наверняка, чтобы при любых раскладах ничего не сломалось

[gordi]

Всегда надо делать наверняка, чтобы при любых раскладах ничего не сломалось

О чем это?

И чему там ломаться

[psywalker]

О чем это?

И чему там ломаться

Я выше описал

[gordi]

Я выше описал

А я выше ответил

[psywalker]

У тебя картинка определённой ширины,а если мне нужна ширина блока 2000пк, то и картинку я должен такой ширины делать?

[gordi]

У тебя картинка определённой ширины,а если мне нужна ширина блока 2000пк, то и картинку я должен такой ширины делать?

А как иначе

Есть много других способов решить проблему, то у них свои подводные камни

К примеру позиционирование 4 уголков:

1. Точность нарезки

2. Состыковка

3. Если нужна картинка с градиентом сразу море проблем

4. и т.д. и т.п.

Мой метод проще, к тому же по весу графики, по html-коду и стилям, более экономичный.

[psywalker]

А как иначе

Есть много других способов решить проблему, то у них свои подводные камни

К примеру позиционирование 4 уголков:

1. Точность нарезки

2. Состыковка

3. Если нужна картинка с градиентом сразу море проблем

4. и т.д. и т.п.

Мой метод проще, к тому же по весу графики, по html-коду и стилям, более экономичный.

Ещё добавить пару элементов и я бы тебе сделал нормальный блок, который бы тянулся куда угодно и как угодно

[gordi]

Ещё добавить пару элементов и я бы тебе сделал нормальный блок, который бы тянулся куда угодно и как угодно

Пару элементов

Зачем плодить лишние сущности, когда и так все работает.

Принцип - "необходимо и достаточно", главная заповедь web-верстальщика

[psywalker]

Пару элементов

Зачем плодить лишние сущности, когда и так все работает.

Принцип - "необходимо и достаточно", главная заповедь web-верстальщика

Эта заповедь плохого верстальщика. Качество - вот заповедь настоящего верстальщика

[gordi]

Эта заповедь плохого верстальщика. Качество - вот заповедь настоящего верстальщика

Качество, как раз и предполагает минимум средств в достижении цели.

Чем меньше сущностей, тем меньше вероятность поломки или не правильного поведения сущностей.

[psywalker]

Качество, как раз и предполагает минимум средств в достижении цели.

Чем меньше сущностей, тем меньше вероятность поломки или не правильного поведения сущностей.

Как раз таки в моём способе кроется качественный блок, с которым можно делать всё что угодно при любых раскладах, а вот в твоём "качестве" такого не наблюдается

[gordi]

Как раз таки в моём способе кроется качественный блок, с которым можно делать всё что угодно при любых раскладах, а вот в твоём "качестве" такого не наблюдается

Вот и покажи свое решение, пока только одни слова, что мое болото лучше

Что конкретно не устраиваетв моем методе?

Или есть иные причины столь бурного не приятия?

Edited November 19, 2009 by gordi

[psywalker]

Что конкретно не устраивает?

Или есть иные причины столь бурного не приятия моего метода?

Я уже написал, что меня не устраивает то, что если ширина блока будет 2000пк, то он развалиться, вот и всё. И я не хочу делать картинку 3000пк, чтобы она 100% работала при всех разрешениях, а вместо этого можно добавить пару элементов и делать с боксом что угодно. А ты мне говоришь..качество блин

[gordi]

Я уже написал, что меня не устраивает то, что если ширина блока будет 2000пк, то он развалиться, вот и всё. И я не хочу делать картинку 3000пк, чтобы она 100% работала при всех разрешениях, а вместо этого можно добавить пару элементов и делать с боксом что угодно. А ты мне говоришь..качество блин

Покажи свой вариант.

Посчитаем количество элементов.

Количество строк таблицы стилей.

Вес графики.

Если я сделаю основной файл гарфики по ширине больше 2000px она будет весить чуть больше 1кб.

Про вырезку не говорю, там вообще мизер получиться.

А как у тебя?

Edited November 19, 2009 by gordi

[psywalker]

Покажи свой вариант.

Посчитаем количество элементов.

Количество строк таблицы стилей.

Вес графики.

Если я сделаю основной файл гарфики по ширине больше 2000px она будет весить чуть больше 1кб.

Про вырезку не говорю, там вообще мизер получиться.

А как у тебя?

Ок, принимаю вызов, значит задача следующая:

Нужен блок, который будет тянуться во все стороны, до бесконечности.

Полный кросс, включая ИЕ6

Фон на странице белый, ок

Встречаемся тут

[s0rr0w]

Ок, принимаю вызов, значит задача следующая:

Нужен блок, который будет тянуться во все стороны, до бесконечности.

Полный кросс, включая ИЕ6

Фон на странице белый, ок

Встречаемся тут

Можно я вставлю свои 5 копеек?

Задача в данном виде не несет коммерческого смысла. Мониторы ограничены, и разрешения более 1920 точек мы врядли увидим на столах потребителей в ближайшие 5 лет. Поэтому смысла тратить кучу времени для построения кода с учетом бесконечности я не вижу.

Включая ИЕ6 - это бред. Давайте включим еще Оперу 7 и Нетскейп Навигатор 4.7

[psywalker]

s0rr0w

1)

Мониторы ограничены, и разрешения более 1920 точек мы врядли увидим на столах потребителей в ближайшие 5 лет.

Ок, отличная мысль, значит ещё 5 лет мы можем не боятся за то, что наш сайт развалиться.

2)

Поэтому смысла тратить кучу времени для построения кода с учетом бесконечности я не вижу.

Картинка ПНГ 1920пк в ширину, это круто, я понимаю, это не то, что мои каких то два огромных пустых дива и маленький спрайт на все углы..

В общем вот мой громоздкий вариант с лишними двумя дивами

http://www.psywalker.ru/Forum/box2/block/main.html

Edited November 19, 2009 by psywalker

[Searcher]

а почему бы и не воспользоваться более надежным и менее тяжелым вариантом psywalker, помоему достоинства на лицо

[gordi]

s0rr0w

1)

Ок, отличная мысль, значит ещё 5 лет мы можем не боятся за то, что наш сайт развалиться.

2)

Картинка ПНГ 1920пк в ширину, это круто, я понимаю, это не то, что мои каких то два огромных пустых дива и маленький спрайт на все углы..

В общем вот мой громоздкий вариант с лишними двумя дивами

http://www.psywalker.ru/Forum/box2/block/main.html

Про спрайты почитай и поймешь с какими проблемами там сталкиваются: Спрайты

Посмотри свой пример в OPERA или Google Chrome при ZOOM в плюс и минус, инверсия наблюдается

Также при максимальном уменьшении размера окна браузера по горизонтали.

Ты вот все о качестве говоришь, и два дополнительных элемента проблемы не решают

Edited November 20, 2009 by gordi

[Great Rash]

psywalker

Все круто, но я бы еще ограничил ширину твоего блока 50 пикселями, а то если совсем сузить окно получается неприятность

[gordi]

Выложил обновленный пример - test

Размер основного файла графики - 3000*36 (вес 775 б) [полностью данная графика используется одним файлом под горизонтальное меню].

Вырезанной части - 3000*9 (вес 288 б)

Совокупный вес - 1063 б

Что в принципе можно уменьшить.

Разметка таже, никаких дополнительных контейнеров нет.

Тестируем, высказываем замечания.

Edited November 20, 2009 by gordi

[s0rr0w]

Вы неправильно оцениваете качество сборки.

Главное не то, насколько универсально она сделана, а то, как легко ее изменять и расширять

Я усложню задачу. Давайте в середине бокса проведем полоску фона, на которой будет написан заголовок блока.

Вот как тут