@XaocCPS1 дек 2010 в 04:39

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

1 мин

1.3K

CSS *

+28

120

Комментарии 120

@TheShock 1 дек 2010 в 04:53

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

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

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

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

@TheShock 1 дек 2010 в 04:54

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

@Dialog 1 дек 2010 в 05:05

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

@TheShock 1 дек 2010 в 05:07

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

@Spree 1 дек 2010 в 08:52

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

@XaocCPS 1 дек 2010 в 05:21

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

@TheShock 1 дек 2010 в 05:22

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

@XaocCPS 1 дек 2010 в 05:23

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

@TheShock 1 дек 2010 в 05:25

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

@XaocCPS 1 дек 2010 в 05:28

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

@TheShock 1 дек 2010 в 05:42

вот: pastebin.com/T1L5TvbG

@XaocCPS 1 дек 2010 в 05:54

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

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

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

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

НЛО прилетело и опубликовало эту надпись здесь

@Dialog 1 дек 2010 в 05:29

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

@XaocCPS 1 дек 2010 в 05:31

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

@TheShock 1 дек 2010 в 05:32

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

@aubt 1 дек 2010 в 06:12

pastebin.com/5Qcjr8aR

@TheShock 1 дек 2010 в 06:18

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

@XaocCPS 1 дек 2010 в 06:27

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

@aubt 1 дек 2010 в 06:29

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

@TheShock 1 дек 2010 в 06:31

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

@aubt 1 дек 2010 в 06:34

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

@TheShock 1 дек 2010 в 06:30

body { overflow : hidden; } ?

@XaocCPS 1 дек 2010 в 06:37

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

@TheShock 1 дек 2010 в 06:45

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

@XaocCPS 1 дек 2010 в 06:48

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

@TheShock 1 дек 2010 в 06:59

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

@XaocCPS 1 дек 2010 в 07:02

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

@dohlik 1 дек 2010 в 06:25

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

@ChemAli 1 дек 2010 в 07:51

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

@Yarc 1 дек 2010 в 08:23

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

@chetzof 1 дек 2010 в 09:36

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

@ChemAli 1 дек 2010 в 09:40

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

@ChemAli 1 дек 2010 в 09:41

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

@zvirusz 1 дек 2010 в 09:42

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

@ArtyV 1 дек 2010 в 09:42

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

@dzlk 1 дек 2010 в 10:48

Не то — jsfiddle.net/?

@ChemAli 3 дек 2010 в 09:54

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

@ChemAli 6 дек 2010 в 07:30

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

@ArtyV 1 дек 2010 в 08:03

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

@ArtyV 1 дек 2010 в 08:04

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

@deerua 1 дек 2010 в 08:35

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

@ArtyV 1 дек 2010 в 08:50

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

@XaocCPS 1 дек 2010 в 08:37

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

@ArtyV 1 дек 2010 в 08:48

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

@JustLuckyGuy 1 дек 2010 в 09:07

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

@googlebot 1 дек 2010 в 09:06

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

@turbo_exe 1 дек 2010 в 09:29

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

@ArtyV 1 дек 2010 в 09:30

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

@googlebot 1 дек 2010 в 09:31

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

@BugEater 1 дек 2010 в 10:05

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

@Dmitry_f 2 дек 2010 в 06:22

Костыль

@aubt 1 дек 2010 в 10:43

не слабо.

@aubt 1 дек 2010 в 10:53

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

@nayjest 1 дек 2010 в 11:03

mission impossible

@Chizh 1 дек 2010 в 11:12

Вот :) cssdesk.com/uufxf

@UrbanRider 1 дек 2010 в 12:35

труЪ :)

@avz 1 дек 2010 в 13:03

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

@Inquirer 1 дек 2010 в 13:09

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

@loat 20 дек 2010 в 20:29

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

@ilinsky 1 дек 2010 в 09:13

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

@XaocCPS 1 дек 2010 в 09:17

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

@ilinsky 1 дек 2010 в 09:25

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

@XaocCPS 1 дек 2010 в 09:27

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

@ilinsky 1 дек 2010 в 09:31

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

НЛО прилетело и опубликовало эту надпись здесь

@TheShock 2 дек 2010 в 04:44

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

@TheShock 2 дек 2010 в 04:45

если не css и не html

@CAH4A 1 дек 2010 в 09:24

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

@ArtyV 1 дек 2010 в 09:28

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

@ilinsky 1 дек 2010 в 09:28

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

@ArtyV 1 дек 2010 в 09:29

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

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

@ilinsky 1 дек 2010 в 09:36

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

@ArtyV 1 дек 2010 в 09:42

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

@ilinsky 1 дек 2010 в 09:49

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

@ArtyV 1 дек 2010 в 09:52

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

@ilinsky 1 дек 2010 в 09:54

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

@CAH4A 1 дек 2010 в 10:10

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

@ilinsky 1 дек 2010 в 10:18

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

@piumosso 1 дек 2010 в 09:34

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

@chaliy 1 дек 2010 в 09:35

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

@Lordneo 1 дек 2010 в 10:52

Как раку ногу оторвать…

Зайдите на www.automobiles.lt/ (не переживайте о рекламе, вы там, все равно, ничего не поймете), там слева (в рамке) есть реклама сайта про кино. Каждый раз при смене репертуара, приходится лепить новую картинку, а с приведенной структурой цсс, можно все сделать автоматически.

@TheShock 1 дек 2010 в 12:36

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

@Lordneo 1 дек 2010 в 13:14

Как минимум при том, что сетку рамок, в виде пнг файла, в этом месте использовать можно, но она не гибкаят, так как надо картинки подгонять, плакаты не одинаковые. А в данном случае система цсс, куда более гибкая.

@frobo7 1 дек 2010 в 11:28

@zvirusz 1 дек 2010 в 09:38

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

@ChemAli 1 дек 2010 в 09:43

Фото вперед.

@zvirusz 1 дек 2010 в 10:02

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

@undead_ekb 1 дек 2010 в 12:41

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

@ilinsky 1 дек 2010 в 09:51

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

@ArtyV 1 дек 2010 в 09:52

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

@ilinsky 1 дек 2010 в 09:57

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

@ilinsky 1 дек 2010 в 10:17

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

@zvirusz 1 дек 2010 в 10:23

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

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

@ilinsky 1 дек 2010 в 10:24

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

@FINTER 1 дек 2010 в 10:48

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

@zvirusz 1 дек 2010 в 11:07

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

@dzlk 1 дек 2010 в 11:13

Это из-за line-height

@zvirusz 1 дек 2010 в 16:46

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

@Chizh 1 дек 2010 в 09:44

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

@ilinsky 1 дек 2010 в 10:23

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

@steinebel 1 дек 2010 в 10:29

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

@FINTER 1 дек 2010 в 10:52

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

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

@Chizh 1 дек 2010 в 10:53

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

@FINTER 1 дек 2010 в 11:00

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

@KaLGaN 1 дек 2010 в 10:08

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

@Chizh 1 дек 2010 в 10:46

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

@FINTER 1 дек 2010 в 10:55

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

@Hmelii 1 дек 2010 в 10:59

cssdesk.com/TLRwA

@darkslesh 1 дек 2010 в 11:15

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

@Embedder 1 дек 2010 в 11:25

cssdesk.com/ahjzF

@FINTER 1 дек 2010 в 12:24

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

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