shayd13: Bicycle invention

Bicycle invention
Я, похоже, сочинил споцсоб верстки двухколоночной. Он подозрительно простой, и, наверно, кто-то уже придумал это до меня, но пока не натыкался на что-то такое в инете. Изложу для понту.

Традиционный метод с отрицательными полями вроде как более универсален, но там лишний див используется в правой колонке. Тут попроще.

Вощем, есть див-контейнер, в который положены дивы левой и правой колонки. Идея в том, чтобы сделать контейнеру левую границу, равную ширине левой колонки. Все содержимое отжимается этой границей вправо. Потом левому диву (плавающему, конечно) ставится левое же отрицательное поле - он уезжает на свое законное место. И все. Position: relative нужно для лечения ослиного глюка, из-за которого он левую колонку пихаед под рамку контейнера.

#main {
float: left;
border-left: 200px solid#EFD695;
}

#left {
width: 200px;
float: left;
margin-left: -200px;
position: relative;
}

#right {
А ничо. Хотя для реального использования, конечно, придется что-то напихать.
}

как-то так. Границу я тут рисовать не стал, заморочно в тэги стили забивать. Рабочую фигню можно увидеть там. Работает под ослом и фоксом. Какие-то нюансные глюки в зависимости от контекста могут всплывать, но хз - я разверстал на основе этой сраки целую админку (которую показать не могу, тому що за паролем, естественно, сидит) и вроде как не валится ничо.

upd БЛЯДЬ!!! В превьюхе семагика все было пучком, а в отправленном посте моделько скосоебило. Убрал нахй, оставив только код. Но по сцылке все рабочее.

(Добавить комментарий)

	f355@lj 2007-03-15 15:18 (ссылка)
	ниудобно, что майну нельзя пририсовать бордюр иначе как еще одним дивом а ваще забавно (Ответить) (Ветвь дискуссии)

shayd13@lj
2007-03-15 15:36 (ссылка)

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

Тут есть побочный плюс - не надо использовать графику для имитации цвета
левой колонки. Известный прикол, шо она не дотягивается до низу. А тут
ничо тянуть не надо.

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

(Ответить) (Уровень выше)

	av8612@lj 2007-03-15 16:07 (ссылка)
	Объясни лоху, а зачем нужны дивы, если есть фреймы таблицы? На всякий случай: html я учил толко в школе и там никаких дивов не было, а тем более я все забыл. (Ответить) (Ветвь дискуссии)

shayd13@lj
2007-03-15 16:29 (ссылка)

ais> Объясни лоху, а зачем нужны дивы, если есть таблицы?
ais> На всякий случай: html я учил толко в школе и там никаких
ais> дивов не было, а тем более я все забыл.
Ну-у-у... Я мог бы попесдеть про семантико, но скилл еще не тот, чтоб
понтоваться...

Щщетается, что, мол, таблицы - быстро и ловко, дешево и сердито, а с
дивами надо ебацца и ебацца. Нед. Если есть какое-то количество
отработанных решений (а они по мере опыта появляются) для обобщенных
случаев, то это нихуя не так уж долго. И код красивше, дад. Я эстет,
эхехе! А в школе таблицам учат чтобы избежать нервных срывов у
ученичков, гыгыг... Которые попытаются мучительно приспособить дивы к
чему-нибудь кроссбраузерному. Хотя если с нуля учиться, учитывая сразу
и то и другое, то неплохо получаетсо... Я про холивор дивы vs баблицы
узнал уже через некоторое время после пользования и тем и другим :]

Смотри. Табло - это минимум три парных тэга. table, tr, td. Див - это
один парный тэг. Аваф? Выглядит неубедительно, но это ОДНА таблица с
ОДНОЙ ячейкой. На большой странице это будет пиздец. Причем если потом
в этом надо будет разбираться - БЛЯАААААААА!!! Я вот щас на работе
разгребаю то, что предшественники мои наваляли, там пиздец, камрад! На
четвертой вложенной таблице моск начинает плавиться, потому что
количество откровенно лишних тэгов чудовищно. Нахуя нужны три тэга
там, где достаточно одного?

Кроме того, ячейки в баблице связаны. Т.е. Первая ячейка будет
одинаковой ширины и первой строке, и в пятнадцатой. Как думаешь,
всегда это удобно? Можно, конечно, понапихать туда colspan'ов, но в
них запутаться как нефиг срать...

Еще "кроме того" - с ячейками не прокатывает position: relative.
Частенько важно.

На самом деле дивы ничуть не оппозитны таблицам. Просто у каждого
элемента своя область применения. Верстать дивами откровенно табличную
структуру - тупой фанатизм, но верстать таблицей структуру блочную
(шапка+две-три колонки+футер) структуру - это неизящно. Верстать
таблицами начали от безысходности, тому що другого ничего не было. И
привыкли. И все. И блядь пошло-поехало... Таблица в ячейке таблицы ячейки таблицы
первой ччейки таблицы... ААААААААААААА!!!

(Ответить) (Уровень выше) (Ветвь дискуссии)

	Re: Reply to your comment... av8612@lj 2007-03-15 17:58 (ссылка)
	Спасибо. Очень познавательно, да. Надо бы мне разобраться с дивами. (Ответить) (Уровень выше)