Резиновая верстка — линейная зависимость горизонтального положения DIV-ов

[vittore]

хорошая идея.

[Delka]

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

[ney]

Без абсолютного позиционирования можно эту задачу решить? ;)

[burzilov]

При position:relative тоже сработает, наверняка. Целью моего топика было не дать конечное решение, а подкинуть пищу для размышлений. Так что - думайте, пробуйте! :)

[uvarov]

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

[burzilov]

Горизонтального скролла нет, потому что на страничке всего один элемент, да ещё и абсолютно спозиционированный. Но даже если добавить других элементов, вызывающих появление скролла, этот абсолютный блок всё равно уедет за края (срабатывает отрицательный margin-left). И, кстати, это не бага, а фича :) Можно не беспокоиться за скроллинги при набрасывании ползающих элементов поверх странички.

[provotorov]

Да, эт основная проблема данного метода.
В приведенном примере элемент уезжает за пределы экрана при ширине экрана меньшем 610 пикселей. В принципе, это приемлимо из расчета, что большинство пользователей сети имеют разрешение от 1024 по ширине. Хотя многие уже сейчас активно заходят на сайты с мобильных устройств, я бы не стал про них забывать.
Во многих других примерах подобный метод будет неприемлем даже при расширениях от 1024.

[burzilov]

Для пользователей мобильных устройств можно (и нужно) подключать другой css-файл, с облёгченной графикой и адаптированным под более узкие экраны дизайном. Насчёт уезжания за пределы экрана - этот метод прежде всего предназначен для размещения различных картинок, являющихся элементами интерфейса, уезжание которых за границы не навредит функциональности. Представьте себе, например, такой дизайн: в шапке сайта письменный стол, вид сверху, заполняет всю ширину экрана. Требуется разбросать по столу разные предметы (кружка, листочки, маркеры, степлер, мышь, клавиатура и т.п.) Здесь основное требование - не допускать слишком пустых мест на поверхности стола. А если какой-нибудь маркер при узком экране заползёт за край - ну и фик с ним :) Вот для такого ТЗ мой способ подходит как нельзя лучше.

[unspecified]

чтоб не уезжало за границы можно поставить в процентах координаты

[n1313]

Странно, статья про абсолютное позиционирование, а на сайте Балчуга всё двигается яваскриптом. Как так?

[burzilov]

Ух, блин, ошибся :) Убираю ссылку...

[DAREDEVIL]

На сайте xhtml.ru описывались те же методы, но для центрирования.
Горизонтальное: http://xhtml.ru/2005/05/06/horizontal_centerbox/
Вертикальное и горизонтальное: http://xhtml.ru/2005/05/24/vertical_centerbox/

[burzilov]

Действительно, один из методов, описанных там (с отрицательным значением margin-left) является частным случаем моего метода. Спасибо за ссылки.

[simpel]

Не пойму, позиционирование в %% — это же очевидно, или я не прав?

[burzilov]

Простое позиционирование в процентах, как Вы предлагаете, - это Y=a*X, т.е. частный случай общего вида линейной функции. Моей задачей было именно найти способ использовать общий вид функции Y=a*X+b.
Кстати, мой дизайнер просил ещё и ломаную функцию попробовать, т.е. например до 800 пикс. действует одна линейность, с 800 до 1200 другая, и потом третья. Я ему объяснил, что тут уже одним CSS не обойдёшься. у него и другие пожелания были, например, использовать не линейную функцию, а какую-нибудь кривую. В конечном итоге мы с ним "расстались" :)

[set]

не правы... ещё раз прочитайте условия задачи и попробуйте решить её в процентах и без отрицательного маргина.

[hlomzik]

Глупый пост.
В вашем случае изменение не линейное ни разу. Про проценты вам уже сказали в случае пропорциональной зависимости, ага.
Особенно убила фраза про гугление арифметических преобразований...

[chEbba]

Здрасьте..приехали. Почему это оно не линеное? У нас было 2 точки и мы сами сказали что зависимость будет линейная. И нашли формулу
Y = 0.5X - 150 Это что не линейная функция??
Вы путаете с прямой пропорциональностью.

ЗЫ про гугление правда тоже позабавило =)

[hlomzik]

Хм... ну да, изменение-то в принципе линейное...
Однако в верстке имхо стоит ограничиться прямой пропорциональностью — всё-таки мало когда пригодится блок, вылазящий за край экрана. Да и другие блоки вам будет труднее спозиционировать с таким решением. Не будут ли проценты проще? ;)

[chEbba]

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

[burzilov]

А что не так с гуглением? :) В пятом классе я был лет 15 назад, и после этого ни разу не сталкивался с нахождением уравнения прямой по двум точкам :)

[pxx]

Ничего сверхестественного. Все на уровне школьной математики.

[chEbba]

Ага, дожили...обсуждаем как по 2м точкам построить прямую.

[burzilov]

Применяем школьные знания на практике ;)

[itlife]

Сама задача, что есть два дизайна одного дизайна на разные размеры браузера, меня смущает..
То есть нужно заложить в вёрстке как бы два совпадения с двумя дизайнами, задача конечно реальная, но исключительная и уж заморочистая блоков то много, прям перфекционизм...
обычно вид дизайна, при других размерах экрана, ложится на плечи верстальщика, мол вот дизайн, а при других размерах должно быть "всё ништяк".
Требования конечно бывают разные и такие требования видимо от очень профессиональных дизайнеров могут поступить. При вёрстке не часто занимаешься матиматическими выкладками, пусть и школьными, и это уже интересно. Обычно хватает "размер замерил - в css цифру написал"
Спасбо за пищу... перекусил)

[burzilov]

Спасибо за комментарий. Кстати, дизайнер рисовал по 3 (три!) макета, 1004, 1200 и 1600 пикс. по ширине. И потом ещё придирался, почему на верстке некоторые объекты смещены на 5-10 пикс. в сравнении с его макетами. Еле уговорил его делать по два макета с линейными перемещениями объектов :)

[Vii]

В дополнение к предыдущему комменту: думаю не многие дизайнеры согласились бы рисовать по два (почти одинаковых) макета на страницу. Ведь на много проще сказать fronter'у "тут всё должно быть пропорциональненько" и всё, полетели...
Я, когда подобная задача была, выкручивался обычной пропорцией: общая длина макета (px) — 100%, требуемая длинна (px) — X%. Получилось конечно не так "идеально" как у вас, но вроде все остались довольны. )))

А способ очень интересный, спасибо (на плюс кармы нету, извините уж).

[burzilov]

Надеюсь, что хоть кому-то, кроме меня, этот способ хоть разок пригодится :) Про дизайнеров, рисующих по несколько макетов на страницу, см. мои комменты выше :)

[YuriChetverikov]

не знаю..
сколько работаю - дизайнеры всегда присылают два макета, под 1000 и под 1600 пкс..
делаю под 100 минимум, под 1600 максимум. в этом рэндже все должно быть идеально..
меньше 1000 - распорки, больше 1600 - max-width (+хаки для IE)

[set]

пока фрилансил (верстальщик я), у меня такие заказы бывали довольно часто, присылают как минимум два варианта страницы 1000рх и 1900рх , далее всё происходило примерно так ,как описал топикстартер :) ограничение на минимальную ширину в 1000рх ( рекомендация заказчика) обычно спасало от ситуации с блоком, который уехал за пределы экрана...

[YuriChetverikov]

ага. то же самое я написал выше.
и это нормально, что дизайнер присылает две версии..

[quwiero]

В данный момент делаю страничку, где 6 блоков на горизонтали меняют свое положение при изменении окна браузера. Абсолютно позиционированные относительно родителя. (Пока не уверен, что получилось кросс-браузерно.) Все задавал в процентах, никаких формул и зависимостей не выводил. Иными словами, вы зря усложняете.

[Karakteristika]

А что происходит с блоками, если уменьшить ширину окна браузера до, скажем, 250 px? Друг на друга не наползают?

[quwiero]

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

[burzilov]

А можно посмотреть на Ваш макет? А ещё лучше, в комплекте с версткой. ;)

[quwiero]

Можно посмотреть вёрстку (минимальный код). Куда вам её кинуть?

[burzilov]

А прямо сюда если?

[quwiero]

Иван, стоит ли? Если коротко, 6 блоков с классами вида, напрмер, "division first", "… second" и т.д. В стилях для класса division задано абсолютное позиционирование, для каждого блока — смещение влево в % (4, 20, 36, 52, 68, 84), для последнего — отступ справа 4%.

[burzilov]

Соглашусь с тем, что мой специфический способ пригодится при появлении специфической задачи :) Всё зависит от того, как дизайнер видит своё творение, и что он требует от верстальщика.

[quwiero]

А я соглашусь с тем, что первый раз читал невнимательно и плохо понял о чем речь. Сейчас исправился :)

[burzilov]

при изменении ширины экрана?
Ну, основная задача резины - это не плавность перемещения при уменьшении окна вручную, а правильное и полное отображение на разных мониторах. Насколько мне известно, большинство пользователей используют браузеры развёрнутыми на весь экран и не часто играются с шириной окна :)

[set]

специально подобный способ не искал ( как-то сам до этого допёр :) ), но и случайно подобное описание не попадалось, к сожалению... может не пришлось бы изобретать велосипед :)) с удовольствием бы плюсанул вас, но 1 - не умею, 2 - кажись, и не могу вдобавок ( хз, как это делается и что для этого нужно ). вобщем, спасибо за статью, думаю, найдутся люди, которые оценят её по достоинству и воспользуются вашим велосипедом :)

[oknechirik]

по-моему, пропорционально, если говорить про html-страницы, — это значит пропорционально окну браузера, а не голове дизайнера. проценты для этого более чем достаточны. это раз.
а два, так это, что использование абсолюта в верстке хоть и более чем приемлемо, но к сожалению редко применимо (
кроме как для позиционирования некоторых отдельных элементов.
хотя все зависит от дизайнера: веб он дизайнер или просто рисовальщик красивых картинок

[set]

могу согласиться с тем, что название темы не совсем соответствует содержимому, это да... насчёт абсолютного позиционирования - категорически не согласен! применяю довольно часто и везде оно к месту, хотя, в большинстве случаев, можно обойтись и без него, но зачем? у меня есть работы, где 80% блоков спозиционировано именно абсолютно и именно с использованием даного метода...

[burzilov]

Изменил название темы. Теперь соответствует? :)

[set]

ага :) задачу, думаю, тоже стоит правильно подать, всоответствие с названием темы, т.к. всё-таки тут не совсем пропорционально меняется положение...

[DEHisOK]

Спасибо за труды.
Интересно, но по-моему, неоправданно.
% в этом случае достаточно.
Даже, скорее, не в этом случае, а в случае верстки, а подобных Вашему ТЗ - не так много.
С уважением, Денис!

[r3s3t]

А как бороться со смещением синего блока “за кадр” при сильном сужении окна браузера?

[burzilov]

Т.к. смещение напрямую зависит от ширины родительского блока (в моём случае родительский блок - body), достаточно просто для этого блока указать необходимый min-width (в ИЕ6, не понимающем этот параметр, можно использовать img-распорку :))

[r3s3t]

Ну, понимаете, в таком случае к первому извращению добавляется второе.

[burzilov]

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

[r3s3t]

Правильно. Это и есть выход. :)