How to become an author
Search
Write a publication
Pull to refresh

Comments 120

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

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

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

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

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

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

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

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

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

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

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

центровка текста по вертикали нечестная, стоит вписать текста побольше, и все поедет
Rating is hidden
Кажется, уже пора опубликовать оригинальное решение.
Rating is hidden
UFO just landed and posted this here
Sign up to leave a comment.

Articles

Your account

Sections

Information

Services

Support
© 2006–2024, Habr