Высота 3х колонок - 100% (проблема)

Chin · October 3, 2008

Грубо говоря надо дивами получить то, что получится такими вот табличками:

<html>
<head>
<style type="text/css">
html,body{
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" height="100%">
  <tr>
	<td height="70" bgcolor="#FFFFCC"> </td>
  </tr>
  <tr>
	<td height="30" bgcolor="#FFFF99"> </td>
  </tr>
  <tr>
	<td valign="top">
	  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
		<tr>
		  <td bgcolor="#FFCCFF"> </td>
		  <td bgcolor="#FF99FF"> </td>
		  <td bgcolor="#FF66FF"> </td>
		</tr>
	  </table>
	</td>
  </tr>
</table>
</body>
</html>

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

т.е. за счет контента в центральном блоке заведомо будут "дырки" в центрах сайдбаров, а сверху и снизу сайдбаров будет контент.

Как это сделать таблицами я знаю с завязанными глазами.

Как в дивах - хоть убей не догоняю

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

Это вообще возможно или как минимум комбинировать дивы с таблицами придется?

Vlad · October 3, 2008

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

Потом у тебя со стилями проблема. Видно, что пользоваться стилями не умеешь, код устаревший.

Макет что ты привел на слоях сверстать легко. Только если не цепляться за табличное представление. Во-первых, колонки не должны быть одной высоты, а должны зависеть от контента. Во-вторых, высота макета не должна занимать 100%, а должна варьироваться, опять же в зависимости от контента. Короче говоря, идеология различается. Если сумеешь выкинуть из головы старые представления, научишься верстать быстро. Нет - будешь подобно Дон Кихоту бороться с ветряными мельницами.

Chin · October 3, 2008

1) Я ничего ничем заменять не хочу, я хочу решить конкретную задачу.

Стили у меня может и устаревшие, но вполне решающие задачу. Вертолет несомненно технологичнее телеги, но иногда для перемещения из пункта А в пункт Б вполне и телега подойдет.

2) Я как раз из макета и исхожу

3) В том то и дело, что я исхожу из контента и макета. В обоих сайдбарах контент должен быть прижат и к верху и к низу, между ним - если высота центрального блока выше - получается пустое место. Если ниже - высота всего макета просто равна сумме высот объектов в сайдбаре (в том в котором выше получается)

4) при всем при этом высота самих блоков именно таки по макету должна визуально быть равной. Т.е. оба сайдбара и центр должны по высоте быть равны высоте максимального из них. Если центрблок 600 пикселей, а сайдбары по 200 - значит они должны тянуться вниз до 600 пикселей. Если центрблок 200 пикселей а сайдбары 600 - центрблок своим фоном должен тянуться до самого низа.

5) Высота макета именно что варьируется, но высота колонок должна быть равна между собой в случае "удлиннения" одной из них.

Решить задачу с неравной высотой колонок я могу, если что. Сэмплов в сети полно.

Так решение рабочее есть или мне пойти почитать Сервантеса де Сааведра?

Victor Ananiev · October 3, 2008

Дон Кихота читаешь?)) если по дело покури мануал по JS

Chin · October 3, 2008

Без JS решить реально? Чисто дивами и цсс?

Victor Ananiev · October 3, 2008

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

Chin · October 3, 2008

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

Ну типа как

1) для ускорения рендеринга и отображения страницы, т.к. таблиц там еще много будет с большими вложенностями

2) контент в коде можно расположить ближе к началу страницы

Так есть решение вообще в природе? Таблицами я сам могу, за 2 минуты, дивами то с цсс это решается? Ну или хотя бы комбинацией дивов+цсс с таблицами

Victor Ananiev · October 3, 2008

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

Chin · October 3, 2008

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

Угу.

Все это может и будет тянуться, это раз.

Колонки разноцветные, это два.

Фон подложить не катит (как мне кажется), т.к. в колонках есть прижатые к верху и к низу объекты, а "дырка" между ними плавает, это три.

Vlad · October 4, 2008

Все решения на дивах отдают извращениями, так что лучше таблицами такую задачу решать. Например, одно из решений предполагает, что слева и справа от блока будет граница толщиной... 300px. Типа это и будет колонка. А текст в эту псевдоколонку добавляется через float.

Chin · October 4, 2008

Чтобы понятнее было - это примерно должно выглядеть вот так

контент - контент - контент

———-- - контент - контент

———-- - контент - ———--

контент - ———-- - ———--

контент - контент - контент

Ну т.е. я правильно понимаю что по нормальному без изврата эту задачу не решить?

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

Vlad · October 5, 2008

Никто тебя здесь переубеждать не будет. Используй таблицы дальше.

Chin · October 5, 2008

Я не прошу меня переубеждать вроде как?

Я описал задачу и спрашиваю можно ли это решить дивами + цсс без таблиц и без JS.

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

И если описаные мной выше причины не сродни бреду. Возможно они абсурдны, дык скажи об этом, я не обижусь.

Я вообще про дивы забуду тогда для данного макета.

Ты же пишешь то

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

то

Никто тебя здесь переубеждать не будет. Используй таблицы дальше.

так чем на твой взгляд мою задачу лучше решать то?

Если ты уверен в том что нельзя мою задачу решить - в чем проблема прямо об этом написать? Напиши - твою задачу решить дивами в данной постановке без JS невозможно. Я успокоюсь и уйду верстать таблицами своего хомяка.

По моему задача достаточно внятно поставлена и подразумевает вполне однозначные ответы без софистики.

Если возможно, но не знаешь как - по моему так сказать тоже не проблема. Я вот пришел и говорю что чего-то не знаю, прошу помочь. Вроде не страшно говорить "я не знаю"

Если знаешь как - может уже просто дашь рецепт или ткнешь носом в пример решения?

Сижу пытаюсь понять - толи я невнятно формулирую вопросы, толи... на этом мысль заканчивается...

rus · October 5, 2008

Я не прошу меня переубеждать вроде как?
Я описал задачу и спрашиваю можно ли это решить дивами + цсс без таблиц и без JS.
Дивами таблицы я заменить хочу только в том случае, если ими можно решить поставленую задачу. Без JS.
И если описаные мной выше причины не сродни бреду. Возможно они абсурдны, дык скажи об этом, я не обижусь.
Я вообще про дивы забуду тогда для данного макета.
Ты же пишешь то
то
так чем на твой взгляд мою задачу лучше решать то?
Если ты уверен в том что нельзя мою задачу решить - в чем проблема прямо об этом написать? Напиши - твою задачу решить дивами в данной постановке без JS невозможно. Я успокоюсь и уйду верстать таблицами своего хомяка.
По моему задача достаточно внятно поставлена и подразумевает вполне однозначные ответы без софистики.
Если возможно, но не знаешь как - по моему так сказать тоже не проблема. Я вот пришел и говорю что чего-то не знаю, прошу помочь. Вроде не страшно говорить "я не знаю"
Если знаешь как - может уже просто дашь рецепт или ткнешь носом в пример решения?
Сижу пытаюсь понять - толи я невнятно формулирую вопросы, толи... на этом мысль заканчивается...

Давненько не видел столь подробного и четкого отпора.

Влад, мне кажется автор в чем-то прав, если есть решения и ты его знаешь - стоит написать об этом?

2 АВТОР:

У вас кстати тоже отличаются примеры, то что вы таблицами привели код я посмотрел и то что вы здесь отобразили:

контент - контент - контент

———-- - контент - контент

———-- - контент - ———--

контент - ———-- - ———--

контент - контент - контент

Chin · October 5, 2008

Давненько не видел столь подробного и четкого отпора.
Влад, мне кажется автор в чем-то прав, если есть решения и ты его знаешь - стоит написать об этом?
2 АВТОР:
У вас кстати тоже отличаются примеры, то что вы таблицами привели код я посмотрел и то что вы здесь отобразили:

Разве отличаются? По моему фигулька с надписью "контент - контент - контент" просто уточняет что как внутри таблиц приведенных может отображаться

Т.е. первая строка - это шапка

вторая - верхнее меню

можно представить вот таким видом напрмер еще

— шапка шапка шапка —

— меню - меню - меню —

меню1 -- контент - новости

———-- - контент - новости

———-- - контент - ———--

спонсир - контент - ———--

контент - контакт - копирйт

принципиально схема верстки таблицами не изменитя, просто в левую и правую колонку докинем еще по таблице

эту раскладку я привел просто чтобы было понятно, что куда и почему может быть прижато.

Vlad · October 5, 2008

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

1. Идеологическая. Задача для дивов сформулирована некорректно. Зачем пытаться заменить одно средство другим, когда они в данном контексте в корне различаются! К счастью, людей, которые слоями хотят заменить буквально любые элементы, включая изображения и таблицы, становится все меньше.

2. Эффективность. Если действительно надо решить в рамках сформулированных условий, то лучше использовать таблицы, это быстрее, компактнее и универсальнее. Применение слоев в данном случае это либо работа на принцип, дескать, по любому хочу такой макет сделать на слоях, либо трата времени.

Резюмирую. Исходя из приведенного макета верстка таблицами оптимальный вариант.

Chin · October 5, 2008

Вот например возьмем дефолтный скин вордпресса.

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

И под всем этим идет футер.

А теперь представим, что нам надо к нижней границе сайдбара прицепить логотип спонсора.

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

При том если контент выше в 5 раз чем содержимое сайдбара - логотип спонсира должен все равно быть в сайдбаре спозиционирован по нижней кромке (аккурат над футером).

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

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

Друзья, может я действительно схожу с ума и нефиг это дивами верстать?

Или может вам готовый табличный макет дать чтобы было понятно что я хочу если я не смог мысль донести?

Если это очень проблематично или вообще невозможно - вы скажите, я вам поверю, тут же спецы сидят

Но дайте плиз тогда четкий однозначный ответ - "низя!". И я для данной задачи про дивы просто забуду.

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

UPD.:

Vlad, спасибо, вопросов по верстке этого макета больше не имею. Пока писал свой пост - появился ваш

Задача снимается, сворганю табличками.

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

Я почему к слоям прицепился - потому что рендеринга и отображения хочется не когда всё загрузится, а уже в процессе

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

Что скажете?

З.Ы. спасибо за сайт, уже несколько лет подсматриваю всякие свойства для css

Edited October 5, 2008 by Chin

Vlad · October 6, 2008

Да в тот-то и дело, что нельзя дать однозначный ответ. Слишком много нюансов накладывается, поэтому надо исходить из конкретного макета. Допустим если взять вышеприведенный и поставленные условия задачи, то да, так и скажу - "низя". А если речь пойдет о скине вордпресса и его модификации, то здесь придется думать, что же лучше применить.

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

Sign In

Высота 3х колонок - 100% (проблема)

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information