Pull to refresh

Comments 120

а у вам есть решение?
устаревшие браузеры — это ие6- или ие8-?
резиновая только по ширине или и по высоте?

можно подробнее про задание? ато в данной формулировке его можно легко решить с помощью отрицательных марджинов.

Почему именно такая расстановка блоков? Например, E должен быть 50% шириной и 50% высотой?

И самое главное — подобные задачи, как и порнуха, должны иметь сюжет, тогда интереснее решать ;)
А должен быть высотой 50пикселей или 40% от высоты окна браузера?
плюс не ясно насчет блока С, толи он 100% по ширине и 30% по высоте, толи 75% по ширине
на счёт ширины блока С я догадался по позиции буквы С (я так понял, она ровно посередине). Но да, условие недостаточно полное.
Порнуха с сюжетом совершенно неинтересна )
суть задачи не в размерах и процентах, а в компоновке. можно представить решения с любыми процентами, лишь бы компоновка соответствовала картинке. точного решения не требуется
на базе margin устраивает?
кидайте любые варианты
dashed-линия, обозначающая центр — нужна?
компоновка не резиновая. меняю ширину главного дива и все разваливается.

вообще, в условии было указано о том, что не должно быть абсолютного позиционирования, даже для главного дива (у вас указаны высота и ширина),

по хорошему, компоновка должна производится на все пространство окна браузера

но как вариант — принимается, за неимением других
А как запрет на абсолютное позиционироание влечет за собой запрет на явное указание высоты и ширины?
если компоновка это слои, то z-index
представьте готовое решение
не успел своё допереписать) твоё — отличное.
решение хорошее, впечатление немного портит скролл, но это мелочи.
внес правку, забыл тестовый бордер у #grid убрать.
border можно заменить на outline. но у меня в фоксе 3.5 вертикальный скролл в высоту экрана
беда этого решения еще и в трудностях с padding для главного блока, добавив padding: 20px в #grid я не получил ожидаемого результата
естественно. его можно врапнуть или указывать ему margin
это неестественно, это очевидные костыли
margin, кстати, не помогает
да, это css, в котором хотелось бы использовать padding по его прямому назначению
впрочем, решение есть, как вариант принимается
Ребята, кидайте пожалуйста еще линки на тестовые странички! Каждый пастебин себе копировать и на локале открывать не айс ;)
Ушло в закладки. Спасибо.
А есть такое же но только с js?
Не знаю, но подсознание шепчет, что где-то когда-то видал.
Погуглите html+css+js+sandbox и вариации
Есть, на хабре было уже, но адреса не помню. Там фреймворки ещё разные можно сразу подключать удобно
* браузеронезависимо
от решения aubt почти не отличается, сервис хорош
В корне отличается. Там позиционирование реализовано за счёт других блоков, что довольно хрупко. В моём же позиционируется совершенно независимо.
пока лучшее решение,
но проблема с добавлением padding: 30px в #grid остается
В условии об этом ни слова. И проблемы как-то не заметил, по крайней мере в FF4
ff 3.6
нормальный отступ появился и от левого края и от верхнего
а чем в корне отличается от задачи в посте? те же z-index, те же отрицательные margin
в корень зри — внимательней ;)
Блок B состоит из двух элементов. Cheat detected.
Мощно. А почему работает не объясните?
По псевдоклассу блоку создали его продолжение, выпнув его в абсолют, предварительно поменяв отображение со встроенного на встроенно-блочный. Это гениально и просто.
Вы молодец, я даже не догадался до такого решения, но как мне кажется, это редко можно будет использовать в реальных ситуациях (когда к примеру в этих текстах будет текст, и текст в блоке #a будет в этом блоке все равно под блоком #D) Конечно если в блоках будут использоваться картинки, то возможно юзабельно. Хотя возможно я придираюсь, ведь никто не будет специально закрывать один блок с текстом другим. Отличное решение.
Ответ CSS Grid Alignment Level 3 (http://dev.w3.org/csswg/css3-grid-align/) — 29-я спецификация из семейства CSS (предложена Microsoft).
да, про этот ответ я и напишу в отдельном посте :-)
Несмотря на то что это предложение действительно прагматично решает ряд задач, более безобразной технологией в CSS до данной была только одна — CSS Advanced Layout Module (попытка изобрести тот же велосипед)
а в чем состоит безобразность по вашему?
а) в том что CSS (Cascading Style Sheets) вообще не для layout создан (что здесь cascading?)
б) в синтаксе, например: grid-columns: auto minmax(min-content, 1fr);
Кажется мне, что ничего тут страшного нет.
Во-первых, что здесь не может быть cascading? Во-вторых — почему это стили, отечающие за визуальное отображение котнента, не могут отвечать за раскладку его на странице? Это ведь ключевая составляющая визуального форматирования, как раз работа для стилей. То, что создание раскладок не включено в более ранние спецификации — скорее недоработка, чем принципиальное идеологическое решение.

Ну и не вижу, чем этот синтаксис хуже градиентов или транслейтов.
Хотелось бы все-таки более конструктивных возражений, раз уж они есть :)
один вопрос — а что тогда должно отвечать за layout?
А в чём, если не секрет, сакральный смысл отказа от абсолютного позиционирования?
В резиновом design (необходимом, например, при разработке приложений). На данный момент есть только одна альтернатива: Flexible Box Layout Module (кстати в той или иной мере поддерживается во всех браузерах, включая IE9)
(кстати в той или иной мере поддерживается во всех браузерах, включая IE9)

Во всех браузерах сказочного мира :)
Не спорю. Flex Box — изобретение ранее доступное только в XUL. Я веду проект Ample SDK — JavaScript UI Framework, в нем [в числе прочего] есть реализация XUL для всех браузеров, для чего пришлось реализовать и Flex Box на HTML4/CSS1/JavaScript
Как с нагрузкой на старичках?: )
Без проблем — reflow происходит редко и разово
Куда в сорс смотреть? Сходу не нашёл
Что-то я не понял. А почему в «резиновом design» нельзя использовать position: absolute?
можно, сглупил я, похоже
А в чём проблема применить z-index и position: relative?
У меня еще одна задача. Придумать применение такой разметке. Кто справится?
Как раку ногу оторвать…

Зайдите на www.automobiles.lt/ (не переживайте о рекламе, вы там, все равно, ничего не поймете), там слева (в рамке) есть реклама сайта про кино. Каждый раз при смене репертуара, приходится лепить новую картинку, а с приведенной структурой цсс, можно все сделать автоматически.
а при чём тут эта разметка?
Как минимум при том, что сетку рамок, в виде пнг файла, в этом месте использовать можно, но она не гибкаят, так как надо картинки подгонять, плакаты не одинаковые. А в данном случае система цсс, куда более гибкая.
cssdesk.com/EuMPJ
Наша верстальщица наваяла. Никто не хочет с прекрасной девушкой инвайтом поделиться? :)
Из профиля ChemAli:
Работаю: ФСБ РФ
А если надо чтобы внешний контейнер занял всю высоту/ширину?
Да вроде без проблем
Хм… а если надо размеры давать в абсолютных единицах? #A {...height:200px;...}
Тогда это уже другая задача.
Требования: используется только CSS, не использовать абсолютное позиционирование, компоновка должна быть резиновой, вопросом поддержки устаревших браузеров можно пренебречь.

Согласен, все же интересно как решить дополненную задачу.
если текста больше, то он появляется в неожиданных местах
cssdesk.com/y9ax2
с точки зрения практики, а не задачи о сферических конях в вакууме это очень очень очень плохо
Радует, что мы тут как раз о конях. По крайней мере, пока XaocCPS свой следующий пост не написал :)
Это из-за line-height
Спасибо всем сочувствующим — добрый человек demonstr пригласил к нам милую даму.
А если надо размеры давать в абсолютных единицах? #A {...height:200px;...}
Тоже решал: cssdesk.com/sLDdU
Тока не знаю как отцентрировать буквы, сейчас твой варинт буду изучать )
если текста больше, то он появляется в неожиданных местах
см. cssdesk.com/NRL6g

решение проблемы вертикального центрирования через content не очень хорошее, но выбора нет)
Какая задача, такое и решение =)
ну я просто стараюсь рассматривать еще практические аспекты применения
в данном случае хотелось бы помимо всего прочего избежать внезапных выползаний текста, например сделать скроллинг или просто не отображать то что выползло
Без абсолютного позиционирования довольно просто, а без относительного слабо? :)
А z-index-ы как расставлять?
а без z-index'ов слабо? так что угодно можно довести до абсурда…
Ну так в css можно и линки на картинки прописывать. По этому можно сделать универсальный метод:
grid — фоновая картинка с изображение того что должно быть, а ABCD — сделать невидимым.
начните уменьшать высоту браузера и вы заметите, что див D уедет вниз относительно нижней стороны дива A

центровка текста по вертикали нечестная, стоит вписать текста побольше, и все поедет
float — отличная замена z-index
Кажется, уже пора опубликовать оригинальное решение.
Хм, ну ладно всех интересует смысл этой задачки, но меня интересует другое: это якобы сложно? Я либо отстал со своей занятостью от мира, либо я даже не знаю что думать. Интересно было бы услышать ответ.
Only those users with full accounts are able to leave comments. Log in, please.