Comments 53
хорошая идея.
Без абсолютного позиционирования можно эту задачу решить? ;)
я только не совсем понял а почему обстно при ильном сжатии окна блок уезжает за рамки окна. по логике вещей он должен был бы остановится у края окна и при этом появился бы горизонтальный скрол. С точки зрения почему так происходит я то понимаю, но вот так не должно быть по моему.
Горизонтального скролла нет, потому что на страничке всего один элемент, да ещё и абсолютно спозиционированный. Но даже если добавить других элементов, вызывающих появление скролла, этот абсолютный блок всё равно уедет за края (срабатывает отрицательный margin-left). И, кстати, это не бага, а фича :) Можно не беспокоиться за скроллинги при набрасывании ползающих элементов поверх странички.
Да, эт основная проблема данного метода.
В приведенном примере элемент уезжает за пределы экрана при ширине экрана меньшем 610 пикселей. В принципе, это приемлимо из расчета, что большинство пользователей сети имеют разрешение от 1024 по ширине. Хотя многие уже сейчас активно заходят на сайты с мобильных устройств, я бы не стал про них забывать.
Во многих других примерах подобный метод будет неприемлем даже при расширениях от 1024.
В приведенном примере элемент уезжает за пределы экрана при ширине экрана меньшем 610 пикселей. В принципе, это приемлимо из расчета, что большинство пользователей сети имеют разрешение от 1024 по ширине. Хотя многие уже сейчас активно заходят на сайты с мобильных устройств, я бы не стал про них забывать.
Во многих других примерах подобный метод будет неприемлем даже при расширениях от 1024.
Для пользователей мобильных устройств можно (и нужно) подключать другой css-файл, с облёгченной графикой и адаптированным под более узкие экраны дизайном. Насчёт уезжания за пределы экрана - этот метод прежде всего предназначен для размещения различных картинок, являющихся элементами интерфейса, уезжание которых за границы не навредит функциональности. Представьте себе, например, такой дизайн: в шапке сайта письменный стол, вид сверху, заполняет всю ширину экрана. Требуется разбросать по столу разные предметы (кружка, листочки, маркеры, степлер, мышь, клавиатура и т.п.) Здесь основное требование - не допускать слишком пустых мест на поверхности стола. А если какой-нибудь маркер при узком экране заползёт за край - ну и фик с ним :) Вот для такого ТЗ мой способ подходит как нельзя лучше.
чтоб не уезжало за границы можно поставить в процентах координаты
Странно, статья про абсолютное позиционирование, а на сайте Балчуга всё двигается яваскриптом. Как так?
На сайте xhtml.ru описывались те же методы, но для центрирования.
Горизонтальное: http://xhtml.ru/2005/05/06/horizontal_centerbox/
Вертикальное и горизонтальное: http://xhtml.ru/2005/05/24/vertical_centerbox/
Горизонтальное: http://xhtml.ru/2005/05/06/horizontal_centerbox/
Вертикальное и горизонтальное: http://xhtml.ru/2005/05/24/vertical_centerbox/
Не пойму, позиционирование в %% — это же очевидно, или я не прав?
Простое позиционирование в процентах, как Вы предлагаете, - это Y=a*X, т.е. частный случай общего вида линейной функции. Моей задачей было именно найти способ использовать общий вид функции Y=a*X+b.
Кстати, мой дизайнер просил ещё и ломаную функцию попробовать, т.е. например до 800 пикс. действует одна линейность, с 800 до 1200 другая, и потом третья. Я ему объяснил, что тут уже одним CSS не обойдёшься. у него и другие пожелания были, например, использовать не линейную функцию, а какую-нибудь кривую. В конечном итоге мы с ним "расстались" :)
Кстати, мой дизайнер просил ещё и ломаную функцию попробовать, т.е. например до 800 пикс. действует одна линейность, с 800 до 1200 другая, и потом третья. Я ему объяснил, что тут уже одним CSS не обойдёшься. у него и другие пожелания были, например, использовать не линейную функцию, а какую-нибудь кривую. В конечном итоге мы с ним "расстались" :)
не правы... ещё раз прочитайте условия задачи и попробуйте решить её в процентах и без отрицательного маргина.
Глупый пост.
В вашем случае изменение не линейное ни разу. Про проценты вам уже сказали в случае пропорциональной зависимости, ага.
Особенно убила фраза про гугление арифметических преобразований...
В вашем случае изменение не линейное ни разу. Про проценты вам уже сказали в случае пропорциональной зависимости, ага.
Особенно убила фраза про гугление арифметических преобразований...
Здрасьте..приехали. Почему это оно не линеное? У нас было 2 точки и мы сами сказали что зависимость будет линейная. И нашли формулу
Y = 0.5X - 150 Это что не линейная функция??
Вы путаете с прямой пропорциональностью.
ЗЫ про гугление правда тоже позабавило =)
Y = 0.5X - 150 Это что не линейная функция??
Вы путаете с прямой пропорциональностью.
ЗЫ про гугление правда тоже позабавило =)
А что не так с гуглением? :) В пятом классе я был лет 15 назад, и после этого ни разу не сталкивался с нахождением уравнения прямой по двум точкам :)
Ничего сверхестественного. Все на уровне школьной математики.
Сама задача, что есть два дизайна одного дизайна на разные размеры браузера, меня смущает..
То есть нужно заложить в вёрстке как бы два совпадения с двумя дизайнами, задача конечно реальная, но исключительная и уж заморочистая блоков то много, прям перфекционизм...
обычно вид дизайна, при других размерах экрана, ложится на плечи верстальщика, мол вот дизайн, а при других размерах должно быть "всё ништяк".
Требования конечно бывают разные и такие требования видимо от очень профессиональных дизайнеров могут поступить. При вёрстке не часто занимаешься матиматическими выкладками, пусть и школьными, и это уже интересно. Обычно хватает "размер замерил - в css цифру написал"
Спасбо за пищу... перекусил)
То есть нужно заложить в вёрстке как бы два совпадения с двумя дизайнами, задача конечно реальная, но исключительная и уж заморочистая блоков то много, прям перфекционизм...
обычно вид дизайна, при других размерах экрана, ложится на плечи верстальщика, мол вот дизайн, а при других размерах должно быть "всё ништяк".
Требования конечно бывают разные и такие требования видимо от очень профессиональных дизайнеров могут поступить. При вёрстке не часто занимаешься матиматическими выкладками, пусть и школьными, и это уже интересно. Обычно хватает "размер замерил - в css цифру написал"
Спасбо за пищу... перекусил)
В дополнение к предыдущему комменту: думаю не многие дизайнеры согласились бы рисовать по два (почти одинаковых) макета на страницу. Ведь на много проще сказать fronter'у "тут всё должно быть пропорциональненько" и всё, полетели...
Я, когда подобная задача была, выкручивался обычной пропорцией: общая длина макета (px) 100%, требуемая длинна (px) X%. Получилось конечно не так "идеально" как у вас, но вроде все остались довольны. )))
А способ очень интересный, спасибо (на плюс кармы нету, извините уж).
Я, когда подобная задача была, выкручивался обычной пропорцией: общая длина макета (px) 100%, требуемая длинна (px) X%. Получилось конечно не так "идеально" как у вас, но вроде все остались довольны. )))
А способ очень интересный, спасибо (на плюс кармы нету, извините уж).
Надеюсь, что хоть кому-то, кроме меня, этот способ хоть разок пригодится :) Про дизайнеров, рисующих по несколько макетов на страницу, см. мои комменты выше :)
не знаю..
сколько работаю - дизайнеры всегда присылают два макета, под 1000 и под 1600 пкс..
делаю под 100 минимум, под 1600 максимум. в этом рэндже все должно быть идеально..
меньше 1000 - распорки, больше 1600 - max-width (+хаки для IE)
сколько работаю - дизайнеры всегда присылают два макета, под 1000 и под 1600 пкс..
делаю под 100 минимум, под 1600 максимум. в этом рэндже все должно быть идеально..
меньше 1000 - распорки, больше 1600 - max-width (+хаки для IE)
пока фрилансил (верстальщик я), у меня такие заказы бывали довольно часто, присылают как минимум два варианта страницы 1000рх и 1900рх , далее всё происходило примерно так ,как описал топикстартер :) ограничение на минимальную ширину в 1000рх ( рекомендация заказчика) обычно спасало от ситуации с блоком, который уехал за пределы экрана...
В данный момент делаю страничку, где 6 блоков на горизонтали меняют свое положение при изменении окна браузера. Абсолютно позиционированные относительно родителя. (Пока не уверен, что получилось кросс-браузерно.) Все задавал в процентах, никаких формул и зависимостей не выводил. Иными словами, вы зря усложняете.
А что происходит с блоками, если уменьшить ширину окна браузера до, скажем, 250 px? Друг на друга не наползают?
А можно посмотреть на Ваш макет? А ещё лучше, в комплекте с версткой. ;)
Можно посмотреть вёрстку (минимальный код). Куда вам её кинуть?
UFO just landed and posted this here
при изменении ширины экрана?
Ну, основная задача резины - это не плавность перемещения при уменьшении окна вручную, а правильное и полное отображение на разных мониторах. Насколько мне известно, большинство пользователей используют браузеры развёрнутыми на весь экран и не часто играются с шириной окна :)
Ну, основная задача резины - это не плавность перемещения при уменьшении окна вручную, а правильное и полное отображение на разных мониторах. Насколько мне известно, большинство пользователей используют браузеры развёрнутыми на весь экран и не часто играются с шириной окна :)
специально подобный способ не искал ( как-то сам до этого допёр :) ), но и случайно подобное описание не попадалось, к сожалению... может не пришлось бы изобретать велосипед :)) с удовольствием бы плюсанул вас, но 1 - не умею, 2 - кажись, и не могу вдобавок ( хз, как это делается и что для этого нужно ). вобщем, спасибо за статью, думаю, найдутся люди, которые оценят её по достоинству и воспользуются вашим велосипедом :)
по-моему, пропорционально, если говорить про html-страницы, — это значит пропорционально окну браузера, а не голове дизайнера. проценты для этого более чем достаточны. это раз.
а два, так это, что использование абсолюта в верстке хоть и более чем приемлемо, но к сожалению редко применимо (
кроме как для позиционирования некоторых отдельных элементов.
хотя все зависит от дизайнера: веб он дизайнер или просто рисовальщик красивых картинок
а два, так это, что использование абсолюта в верстке хоть и более чем приемлемо, но к сожалению редко применимо (
кроме как для позиционирования некоторых отдельных элементов.
хотя все зависит от дизайнера: веб он дизайнер или просто рисовальщик красивых картинок
могу согласиться с тем, что название темы не совсем соответствует содержимому, это да... насчёт абсолютного позиционирования - категорически не согласен! применяю довольно часто и везде оно к месту, хотя, в большинстве случаев, можно обойтись и без него, но зачем? у меня есть работы, где 80% блоков спозиционировано именно абсолютно и именно с использованием даного метода...
Спасибо за труды.
Интересно, но по-моему, неоправданно.
% в этом случае достаточно.
Даже, скорее, не в этом случае, а в случае верстки, а подобных Вашему ТЗ - не так много.
С уважением, Денис!
Интересно, но по-моему, неоправданно.
% в этом случае достаточно.
Даже, скорее, не в этом случае, а в случае верстки, а подобных Вашему ТЗ - не так много.
С уважением, Денис!
А как бороться со смещением синего блока “за кадр” при сильном сужении окна браузера?
Sign up to leave a comment.
Резиновая верстка — линейная зависимость горизонтального положения DIV-ов