Комментарии 120
а у вам есть решение?
устаревшие браузеры — это ие6- или ие8-?
резиновая только по ширине или и по высоте?
можно подробнее про задание? ато в данной формулировке его можно легко решить с помощью отрицательных марджинов.
Почему именно такая расстановка блоков? Например, E должен быть 50% шириной и 50% высотой?
И самое главное — подобные задачи, как и порнуха, должны иметь сюжет, тогда интереснее решать ;)
устаревшие браузеры — это ие6- или ие8-?
резиновая только по ширине или и по высоте?
можно подробнее про задание? ато в данной формулировке его можно легко решить с помощью отрицательных марджинов.
Почему именно такая расстановка блоков? Например, E должен быть 50% шириной и 50% высотой?
И самое главное — подобные задачи, как и порнуха, должны иметь сюжет, тогда интереснее решать ;)
суть задачи не в размерах и процентах, а в компоновке. можно представить решения с любыми процентами, лишь бы компоновка соответствовала картинке. точного решения не требуется
на базе margin устраивает?
кидайте любые варианты
dashed-линия, обозначающая центр — нужна?
нет, пунктир не нужен
компоновка не резиновая. меняю ширину главного дива и все разваливается.
вообще, в условии было указано о том, что не должно быть абсолютного позиционирования, даже для главного дива (у вас указаны высота и ширина),
по хорошему, компоновка должна производится на все пространство окна браузера
но как вариант — принимается, за неимением других
вообще, в условии было указано о том, что не должно быть абсолютного позиционирования, даже для главного дива (у вас указаны высота и ширина),
по хорошему, компоновка должна производится на все пространство окна браузера
но как вариант — принимается, за неимением других
если компоновка это слои, то z-index
Если кто-то хочет решать, вот шаблон: pastebin.com/AwwqxhvK
не успел своё допереписать) твоё — отличное.
решение хорошее, впечатление немного портит скролл, но это мелочи.
внес правку, забыл тестовый бордер у #grid убрать.
border можно заменить на outline. но у меня в фоксе 3.5 вертикальный скролл в высоту экрана
ой. вот ссылка.
pastebin.com/yghWZpHn
pastebin.com/yghWZpHn
body { overflow : hidden; } ?
Ребята, кидайте пожалуйста еще линки на тестовые странички! Каждый пастебин себе копировать и на локале открывать не айс ;)
Зачем мучаться со страничками? cssdesk.com/
Ушло в закладки. Спасибо.
А есть такое же но только с js?
Не знаю, но подсознание шепчет, что где-то когда-то видал.
Погуглите html+css+js+sandbox и вариации
Есть, на хабре было уже, но адреса не помню. Там фреймворки ещё разные можно сразу подключать удобно
Не то — jsfiddle.net/?
Вот еще что-то похожее: code.google.com/apis/ajax/playground/?exp=libraries#jquery
Очень тривиальная задача.
cssdesk.com/XFjgW
cssdesk.com/XFjgW
«А так слабо?»
а чем в корне отличается от задачи в посте? те же z-index, те же отрицательные margin
Блок B состоит из двух элементов. Cheat detected.
не слабо.
чертов хабр.
cssdesk.com/ENeQx
cssdesk.com/ENeQx
mission impossible
Вот :) cssdesk.com/uufxf
труЪ :)
Мощно. А почему работает не объясните?
Вы молодец, я даже не догадался до такого решения, но как мне кажется, это редко можно будет использовать в реальных ситуациях (когда к примеру в этих текстах будет текст, и текст в блоке #a будет в этом блоке все равно под блоком #D) Конечно если в блоках будут использоваться картинки, то возможно юзабельно. Хотя возможно я придираюсь, ведь никто не будет специально закрывать один блок с текстом другим. Отличное решение.
Ответ CSS Grid Alignment Level 3 (http://dev.w3.org/csswg/css3-grid-align/) — 29-я спецификация из семейства CSS (предложена Microsoft).
да, про этот ответ я и напишу в отдельном посте :-)
Несмотря на то что это предложение действительно прагматично решает ряд задач, более безобразной технологией в CSS до данной была только одна — CSS Advanced Layout Module (попытка изобрести тот же велосипед)
А в чём, если не секрет, сакральный смысл отказа от абсолютного позиционирования?
В резиновом design (необходимом, например, при разработке приложений). На данный момент есть только одна альтернатива: Flexible Box Layout Module (кстати в той или иной мере поддерживается во всех браузерах, включая IE9)
(кстати в той или иной мере поддерживается во всех браузерах, включая IE9)
Во всех браузерах сказочного мира :)
Не спорю. Flex Box — изобретение ранее доступное только в XUL. Я веду проект Ample SDK — JavaScript UI Framework, в нем [в числе прочего] есть реализация XUL для всех браузеров, для чего пришлось реализовать и Flex Box на HTML4/CSS1/JavaScript
Что-то я не понял. А почему в «резиновом design» нельзя использовать position: absolute?
А в чём проблема применить z-index и position: relative?
У меня еще одна задача. Придумать применение такой разметке. Кто справится?
Как раку ногу оторвать…
Зайдите на www.automobiles.lt/ (не переживайте о рекламе, вы там, все равно, ничего не поймете), там слева (в рамке) есть реклама сайта про кино. Каждый раз при смене репертуара, приходится лепить новую картинку, а с приведенной структурой цсс, можно все сделать автоматически.
Зайдите на www.automobiles.lt/ (не переживайте о рекламе, вы там, все равно, ничего не поймете), там слева (в рамке) есть реклама сайта про кино. Каждый раз при смене репертуара, приходится лепить новую картинку, а с приведенной структурой цсс, можно все сделать автоматически.
cssdesk.com/EuMPJ
Наша верстальщица наваяла. Никто не хочет с прекрасной девушкой инвайтом поделиться? :)
Наша верстальщица наваяла. Никто не хочет с прекрасной девушкой инвайтом поделиться? :)
Фото вперед.
да легко :) devpoint.taba.ru/image/Konferenciya_DevPoi/45767_IMG_1249.html — справа.
А если надо чтобы внешний контейнер занял всю высоту/ширину?
Хм… а если надо размеры давать в абсолютных единицах? #A {...height:200px;...}
если текста больше, то он появляется в неожиданных местах
cssdesk.com/y9ax2
с точки зрения практики, а не задачи о сферических конях в вакууме это очень очень очень плохо
cssdesk.com/y9ax2
с точки зрения практики, а не задачи о сферических конях в вакууме это очень очень очень плохо
Спасибо всем сочувствующим — добрый человек demonstr пригласил к нам милую даму.
Я решил вот так cssdesk.com/Vqak8
А если надо размеры давать в абсолютных единицах? #A {...height:200px;...}
Тоже решал: cssdesk.com/sLDdU
Тока не знаю как отцентрировать буквы, сейчас твой варинт буду изучать )
Тока не знаю как отцентрировать буквы, сейчас твой варинт буду изучать )
если текста больше, то он появляется в неожиданных местах
см. cssdesk.com/NRL6g
решение проблемы вертикального центрирования через content не очень хорошее, но выбора нет)
см. cssdesk.com/NRL6g
решение проблемы вертикального центрирования через content не очень хорошее, но выбора нет)
Без абсолютного позиционирования довольно просто, а без относительного слабо? :)
Ну так в css можно и линки на картинки прописывать. По этому можно сделать универсальный метод:
grid — фоновая картинка с изображение того что должно быть, а ABCD — сделать невидимым.
grid — фоновая картинка с изображение того что должно быть, а ABCD — сделать невидимым.
Чую, до меня уже решили не раз.
Однако же, вот: pastebin.com/1KGapvAK
Однако же, вот: pastebin.com/1KGapvAK
без z-index и релатив: cssdesk.com/XrFQX
pastebin.com/BppNiK57 — простое решение. Все требования соблюдены :)
Кажется, уже пора опубликовать оригинальное решение.
отписал
habrahabr.ru/blogs/css/109276/
habrahabr.ru/blogs/css/109276/
НЛО прилетело и опубликовало эту надпись здесь
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Задачка на тему CSS