Задачка на тему CSS

[TheShock]

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

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

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

И самое главное — подобные задачи, как и порнуха, должны иметь сюжет, тогда интереснее решать ;)

[TheShock]

А должен быть высотой 50пикселей или 40% от высоты окна браузера?

[Dialog]

плюс не ясно насчет блока С, толи он 100% по ширине и 30% по высоте, толи 75% по ширине

[TheShock]

на счёт ширины блока С я догадался по позиции буквы С (я так понял, она ровно посередине). Но да, условие недостаточно полное.

[Spree]

Порнуха с сюжетом совершенно неинтересна )

[XaocCPS]

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

[TheShock]

на базе margin устраивает?

[XaocCPS]

кидайте любые варианты

[TheShock]

dashed-линия, обозначающая центр — нужна?

[XaocCPS]

нет, пунктир не нужен

[TheShock]

вот: pastebin.com/T1L5TvbG

[XaocCPS]

компоновка не резиновая. меняю ширину главного дива и все разваливается.

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

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

но как вариант — принимается, за неимением других

[Dialog]

если компоновка это слои, то z-index

[XaocCPS]

представьте готовое решение

[TheShock]

Если кто-то хочет решать, вот шаблон: pastebin.com/AwwqxhvK

[aubt]

pastebin.com/5Qcjr8aR

[TheShock]

не успел своё допереписать) твоё — отличное.

[XaocCPS]

решение хорошее, впечатление немного портит скролл, но это мелочи.

[aubt]

внес правку, забыл тестовый бордер у #grid убрать.

[TheShock]

border можно заменить на outline. но у меня в фоксе 3.5 вертикальный скролл в высоту экрана

[aubt]

ой. вот ссылка.
pastebin.com/yghWZpHn

[TheShock]

body { overflow : hidden; } ?

[XaocCPS]

беда этого решения еще и в трудностях с padding для главного блока, добавив padding: 20px в #grid я не получил ожидаемого результата

[TheShock]

естественно. его можно врапнуть или указывать ему margin

[XaocCPS]

это неестественно, это очевидные костыли
margin, кстати, не помогает

[TheShock]

это css) а задача какая?

[XaocCPS]

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

[dohlik]

Ребята, кидайте пожалуйста еще линки на тестовые странички! Каждый пастебин себе копировать и на локале открывать не айс ;)

[ChemAli]

Зачем мучаться со страничками? cssdesk.com/

[Yarc]

Ушло в закладки. Спасибо.

[chetzof]

А есть такое же но только с js?

[ChemAli]

Не знаю, но подсознание шепчет, что где-то когда-то видал.

[ChemAli]

Погуглите html+css+js+sandbox и вариации

[zvirusz]

javascript.info/play/rus — habrahabr.ru/blogs/webdev/108425/

[ArtyV]

Есть, на хабре было уже, но адреса не помню. Там фреймворки ещё разные можно сразу подключать удобно

[dzlk]

Не то — jsfiddle.net/?

[ChemAli]

о! точно, оно.

[ChemAli]

Вот еще что-то похожее: code.google.com/apis/ajax/playground/?exp=libraries#jquery

[ArtyV]

Очень тривиальная задача.
cssdesk.com/XFjgW

[ArtyV]

* браузеронезависимо

[deerua]

от решения aubt почти не отличается, сервис хорош

[ArtyV]

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

[XaocCPS]

пока лучшее решение,
но проблема с добавлением padding: 30px в #grid остается

[ArtyV]

В условии об этом ни слова. И проблемы как-то не заметил, по крайней мере в FF4

[JustLuckyGuy]

ff 3.6
нормальный отступ появился и от левого края и от верхнего

[googlebot]

«А так слабо?»

[turbo_exe]

а чем в корне отличается от задачи в посте? те же z-index, те же отрицательные margin

[ArtyV]

Внимательнее!

[googlebot]

в корень зри — внимательней ;)

[BugEater]

Блок B состоит из двух элементов. Cheat detected.

[Dmitry_f]

Костыль

[aubt]

не слабо.

[aubt]

чертов хабр.
cssdesk.com/ENeQx

[nayjest]

mission impossible

[Chizh]

Вот :) cssdesk.com/uufxf

[UrbanRider]

труЪ :)

[avz]

Мощно. А почему работает не объясните?

[Inquirer]

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

[loat]

Вы молодец, я даже не догадался до такого решения, но как мне кажется, это редко можно будет использовать в реальных ситуациях (когда к примеру в этих текстах будет текст, и текст в блоке #a будет в этом блоке все равно под блоком #D) Конечно если в блоках будут использоваться картинки, то возможно юзабельно. Хотя возможно я придираюсь, ведь никто не будет специально закрывать один блок с текстом другим. Отличное решение.

[ilinsky]

Ответ CSS Grid Alignment Level 3 (http://dev.w3.org/csswg/css3-grid-align/) — 29-я спецификация из семейства CSS (предложена Microsoft).

[XaocCPS]

да, про этот ответ я и напишу в отдельном посте :-)

[ilinsky]

Несмотря на то что это предложение действительно прагматично решает ряд задач, более безобразной технологией в CSS до данной была только одна — CSS Advanced Layout Module (попытка изобрести тот же велосипед)

[XaocCPS]

а в чем состоит безобразность по вашему?

[ilinsky]

а) в том что CSS (Cascading Style Sheets) вообще не для layout создан (что здесь cascading?)
б) в синтаксе, например: grid-columns: auto minmax(min-content, 1fr);

[TheShock]

один вопрос — а что тогда должно отвечать за layout?

[TheShock]

если не css и не html

[CAH4A]

А в чём, если не секрет, сакральный смысл отказа от абсолютного позиционирования?

[ArtyV]

В этом комментарии

[ilinsky]

В резиновом design (необходимом, например, при разработке приложений). На данный момент есть только одна альтернатива: Flexible Box Layout Module (кстати в той или иной мере поддерживается во всех браузерах, включая IE9)

[ArtyV]

(кстати в той или иной мере поддерживается во всех браузерах, включая IE9)

Во всех браузерах сказочного мира :)

[ilinsky]

Не спорю. Flex Box — изобретение ранее доступное только в XUL. Я веду проект Ample SDK — JavaScript UI Framework, в нем [в числе прочего] есть реализация XUL для всех браузеров, для чего пришлось реализовать и Flex Box на HTML4/CSS1/JavaScript

[ArtyV]

Как с нагрузкой на старичках?: )

[ilinsky]

Без проблем — reflow происходит редко и разово

[ArtyV]

Куда в сорс смотреть? Сходу не нашёл

[ilinsky]

https://github.com/clientside/amplesdk/blob/master/ample/languages/xul/classes/cXULElement.js

[CAH4A]

Что-то я не понял. А почему в «резиновом design» нельзя использовать position: absolute?

[ilinsky]

можно, сглупил я, похоже

[piumosso]

А в чём проблема применить z-index и position: relative?

[chaliy]

У меня еще одна задача. Придумать применение такой разметке. Кто справится?

[TheShock]

а при чём тут эта разметка?

[frobo7]

[zvirusz]

cssdesk.com/EuMPJ
Наша верстальщица наваяла. Никто не хочет с прекрасной девушкой инвайтом поделиться? :)

[ChemAli]

Фото вперед.

[zvirusz]

да легко :) devpoint.taba.ru/image/Konferenciya_DevPoi/45767_IMG_1249.html — справа.

[undead_ekb]

Из профиля ChemAli:
Работаю: ФСБ РФ

[ilinsky]

А если надо чтобы внешний контейнер занял всю высоту/ширину?

[ArtyV]

Да вроде без проблем

[ilinsky]

Молодчинка, супер!

[ilinsky]

Хм… а если надо размеры давать в абсолютных единицах? #A {...height:200px;...}

[zvirusz]

Тогда это уже другая задача.

Требования: используется только CSS, не использовать абсолютное позиционирование, компоновка должна быть резиновой, вопросом поддержки устаревших браузеров можно пренебречь.

[ilinsky]

Согласен, все же интересно как решить дополненную задачу.

[FINTER]

если текста больше, то он появляется в неожиданных местах
cssdesk.com/y9ax2
с точки зрения практики, а не задачи о сферических конях в вакууме это очень очень очень плохо

[zvirusz]

Радует, что мы тут как раз о конях. По крайней мере, пока XaocCPS свой следующий пост не написал :)

[dzlk]

Это из-за line-height

[zvirusz]

Спасибо всем сочувствующим — добрый человек demonstr пригласил к нам милую даму.

[Chizh]

Я решил вот так cssdesk.com/Vqak8

[ilinsky]

А если надо размеры давать в абсолютных единицах? #A {...height:200px;...}

[steinebel]

Тоже решал: cssdesk.com/sLDdU
Тока не знаю как отцентрировать буквы, сейчас твой варинт буду изучать )

[FINTER]

если текста больше, то он появляется в неожиданных местах
см. cssdesk.com/NRL6g

решение проблемы вертикального центрирования через content не очень хорошее, но выбора нет)

[Chizh]

Какая задача, такое и решение =)

[FINTER]

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

[KaLGaN]

Без абсолютного позиционирования довольно просто, а без относительного слабо? :)

[Chizh]

А z-index-ы как расставлять?

[FINTER]

а без z-index'ов слабо? так что угодно можно довести до абсурда…

[Hmelii]

cssdesk.com/TLRwA

[darkslesh]

Ну так в css можно и линки на картинки прописывать. По этому можно сделать универсальный метод:
grid — фоновая картинка с изображение того что должно быть, а ABCD — сделать невидимым.

[Embedder]

cssdesk.com/ahjzF

[FINTER]

начните уменьшать высоту браузера и вы заметите, что див D уедет вниз относительно нижней стороны дива A

центровка текста по вертикали нечестная, стоит вписать текста побольше, и все поедет

[alexzzam]

Чую, до меня уже решили не раз.
Однако же, вот: pastebin.com/1KGapvAK

[Embedder]

без z-index и релатив: cssdesk.com/XrFQX

[TheShock]

float — отличная замена z-index

[Shugich]

pastebin.com/BppNiK57 — простое решение. Все требования соблюдены :)

[RubyRoid07]

Кажется, уже пора опубликовать оригинальное решение.

[XaocCPS]

отписал
habrahabr.ru/blogs/css/109276/