Две колонки во всю высоту...как?

[DELPHIna]

Принимайте ещё одного новичка в верстке на css....с трудом изучаю после табличной верстки блочную..... многое узнала на вашем сайте.

Вот такой вопрос возник: ну никак не могу найти то, что мне нужно.


Мне нужно самое простое:
шапка
колонка1 колонка2
подвал

подвал уже привязан к низу, шапка кверху,
нужно чтобы 2 колонки были по высоте 100% т.е. занимали всё пространство между шапкой и подвалом.

Я нашла кучу материалов как сделать 2 колонки с различным контентом одинаковыми по высоте.... но все примеры эти....никак не подходят под ***занимали всё пространство между шапкой и подвалом.****

подскажите как же всё таки сделать чтобы и равные колонки были вне зависимости от кол-ва текста в них . по высоте 100%

[garA]

с трудом изучаю после табличной верстки блочную

подвал уже привязан к низу, шапка кверху, нужно чтобы 2 колонки были по высоте 100% т.е. занимали всё пространство между шапкой и подвалом.

вы то начали переходить на "блоки", а ваш дизайнер, похоже- нет

я думаю вам поможет эта ссылка: [Только зарегистрированные пользователи могут видеть ссылки. ]

[DELPHIna]

Спасибо за замечательную ссылку....уж сколько материалов нарыто....а воттакой ссылочки не было...буду читать.


а при чем тут дизайнер???(или я пойму при чем прочитав то, что по ссылочке??)

[Aykroyd]

Вам определенно [Только зарегистрированные пользователи могут видеть ссылки. ]
И вообще весь этот учебник рекомендую...

[Zigzag]

Originally posted by garA@Mar 13 2007, 15:38
вы то начали переходить на "блоки", а ваш дизайнер, похоже- нет

я думаю вам поможет эта ссылка: [Только зарегистрированные пользователи могут видеть ссылки. ]
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

absolyutnaya glupost&#39; privyazyvat&#39; dizain k verstke tablichnoi ili blochnoi! dizain on i est&#39; dizain!

[Aykroyd]

Originally posted by Zigzag@Mar 14 2007, 00:13
absolyutnaya glupost&#39; privyazyvat&#39; dizain k verstke tablichnoi ili blochnoi! dizain on i est&#39; dizain!
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Поддерживаю.

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

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

Семантика, однако. Аминь!

[DELPHIna]

вот читаю Вас и думаю....а ка же это?......есть ли где примеры как порезать дизайн с картинками....и сдлеть верстку не табличной.
Как то сложно от привычки отказаться...мне в табличной верстке всё понятно....принесли дизайн, порезала его в шопе, и давай верстать на табличках и выносить стили в css файл....потом перевожу в шаблоны smarty, где надо js вставляю и настраиваю частичный php код....чтобы программисту передать с примерным содержанием меню там, тестов на странице....

а вот с блочной только только сталкиваться начала.....и никак не перестроиться.... всё равно мыслю как то таблицами

а вообще использовать частично и то и другое можно??? или вообще лучше не смешивать?

[garA]

absolyutnaya glupost&#39; privyazyvat&#39; dizain k verstke tablichnoi ili blochnoi! dizain on i est&#39; dizain!

Поддерживаю

в принципе, я тоже..
я поясню, что имел в виду. Дававйте представим (подчеркиваю, представим):
Подходит дизайнер и говорит:"Нужно, чтобы footer всегда был ПРИБИТ К НИЗУ. А левая и правая колонка должны быть на ВСЮ ВЫСОТУ (даже при отключеннии графики)." Этот дизайнер сам когда верстал таблицами, поэтому для него это првычно.. Я называю такой дизанй табличным.
И те ссылки как раз "помогут" сделать такую верстку..
Честно говоря, я сам не приветсвую те методы.. Но иногда приходиться их использовать..
Если есть другие методы, как реализовать такой дизайн, может поделитесь.. Мне, например, интересно, может я что-то пропустил?

а вообще использовать частично и то и другое можно??? или вообще лучше не смешивать?

Да, в принципе, можно, если вам сложно сразу перейти на "блочную верстку".. Структуру делайте таблицей, а все остальное, как надо..

[Zigzag]

dlya colonok ispol&#39;zuem faux columns, a dizainer idet lesom. kakoi nafig dizain s otklyuchennoi grafikoj?

[garA]

dlya colonok ispol&#39;zuem faux columns. kakoi nafig dizain s otklyuchennoi grafikoj?

а что разве сайт существует только ради дизайна, красоты (это не относиться к промо сайту)? я то думал, что ради контента.. Некоторые люди до сих пор отключают графику (по разным причинам)..

Вы, кажется, советовали мне прочитать книгу Дэна Седерхольма.. Там (или у Джеффри Зельдмана), по-моему, поднимался аналогичный вопрос..

P.S. Хотя сколько людей, столько и мнений..

[lenmikh]

А разве дизайна с отключенной графикой не существует?
Наоборот, нужно дублирование информации как раз на этот случай.

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

[DELPHIna]

Какая интересная полемика о дизайне и контенте

а можно спросить следующее: (я перелопатила кучу инфы уже(каша в голове только)...очень много примеров пересомотрела...нашла и тот пример, что просила...но там везде кучу наворотов, хаков понаписано.... мне бы дляначала проще что нибудь...)
дак вот я тут пыталась сама....без особого подсматривания сделать похожее на то, что мне надо
(прилагаю файл)
у меня вопроса пока два:
- отчего прокрутка вниз .... что вместо height:100% использовать надо...или я не в том месте его использую
- как коричневый блок( правый div) заставить растянуться к низу?


Просто хочется понять саму суть что к чему.... хотя бы на этом примере.


P.S. я тут поселилась наверное надолго....(пока программист просит выучить Div_ную верстку :biggrin2: ), поэтому если сильно мешать буду глупыми вопросами...так и скажите.... А то, что Вы меня направляете к книжкам....дак я их читаю....читаю.... а вопросы всё равно возникают....может с вашими ответами быстрее освоюсь.

[Aykroyd]

Originally posted by DELPHIna@Mar 14 2007, 10:30
вот читаю Вас и думаю....а ка же это?......есть ли где примеры как порезать дизайн с картинками....и сдлеть верстку не табличной.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Я Вам рекомендовал замечательный электронный учебник.
С замечательными примерами.

Originally posted by DELPHIna@Mar 14 2007, 10:30
а вообще использовать частично и то и другое можно??? или вообще лучше не смешивать?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Если смешивать – теряется весь смысл перехода на блоки.

Originally posted by garA@Mar 14 2007, 12:10
Да, в принципе, можно, если вам сложно сразу перейти на "блочную верстку".. Структуру делайте таблицей, а все остальное, как надо..
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Позвольте поинтересоваться, я что Вы подразумеваете под "остальным"?
Что еще кроме структуры представляется блочной моделью? Эх...

Originally posted by lenmikh@Mar 14 2007, 13:38
А разве дизайна с отключенной графикой не существует?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Не существует.

Originally posted by lenmikh@Mar 14 2007, 13:38
Наоборот, нужно дублирование информации как раз на этот случай.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Это не дизайн. Это доступность.

Originally posted by lenmikh@Mar 14 2007, 13:38
нужно предусмотреть текстовый дизайн и цветовой дизайн ячеек
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Слышал про графический дизайн, дизайн интерьера...
Но вот про "текстовый дизайн" слышу впервые...
И ячеек, кстати, в блочной модели не существует...

[DELPHIna]

Aykroyd, спасибо за учебник...очень полезный.....сижу читаю....разбираюсь...

а вопросы всё равно есть....может кто нибудь посмотрит мой примерчик?

[garA]

может я не совсем в тему, но вот неплохая ссылочка: [Только зарегистрированные пользователи могут видеть ссылки. ]

[DELPHIna]

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

[Aykroyd]

Originally posted by DELPHIna@Mar 14 2007, 17:02
мне нужно суть понять....а для этого было бы неплохо получать ответы на вопросы...даже если для кого то они глупые.... просто мне суть понять надо.....
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
В Ваших вопросах совершенно нет ничего глупого.
А подход к решению задачи заслуживает искреннего уважения.

Originally posted by DELPHIna@Mar 14 2007, 16:43
а вопросы всё равно есть....может кто нибудь посмотрит мой примерчик?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Посмотрит, посмотрит...
Сейчас покурит и посмотрит...

[Aykroyd]

Originally posted by DELPHIna@Mar 14 2007, 14:53
- отчего прокрутка вниз .... что вместо height:100% использовать надо...или я не в том месте его использую
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Прокрутка вниз появляется у Вас от того, что Вы для блока main задаете высоту в 100%. Высота в блочной модели рассчитывается от родительского элемента (контейнера).

1. Блок main лежит в блоке body.
2. Блок body имеет высоту в 100%.
3. Блок body лежит в блоке html.
4. Блок html имеет высоту в 100% (самый верхний элемент в иерархии).
5. Высота блока main получается равной одной полной высоте окна браузера.
6. Вверху присутствует в прямом потоке блок header, высотой в 50px.
7. Блок header "толкает" блок main на 50px вниз.
8. 100%+50px – вот это и есть 50-пиксельная прокрутка вниз...

Сложно?
Но никто и не говорил, что будет легко...

Originally posted by DELPHIna@Mar 14 2007, 14:53
- как коричневый блок( правый div) заставить растянуться к низу?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Надо не задавать ему фон, а воспользоваться методом [Только зарегистрированные пользователи могут видеть ссылки. ].
Это подробно обсуждается в учебнике, который я Вам рекомендовал.

А Ваш примерчик должен выглядеть примерно так:

<style type="text/css">
* {margin: 0px; padding: 0px;}
html {height: 100%;}
body {color: #000000; background: url(bg.gif) #DDCCAA repeat-y; min-height: 100%; position: relative;}
* html body {height: 100%;}
#header {background: #DDDDDD; height: 50px;}
#main {width: 100%; padding-bottom: 50px; overflow: hidden;}
#left {width: 200px; float: left;}
#right {margin-left: 200px;}
#footer {background: #FF8080; width: 100%; height: 50px; position: absolute; bottom: 0px;}
* html #footer {bottom: -1px;}
</style>

[DELPHIna]

Aykroyd - спасибо огромнное!!!!!!!!!

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

**Надо не задавать ему фон, а воспользоваться методом Faux Columns.*** я прочитала статью уже много раз....но наравне с нею и статьи о позиционированиии отступах, где как мне показалось похожего эффекта тоже можно добиться...(т.е. две колонки текста...) Вы в примере используете float....а я пробовала без них.... у меня почти получилось
вообщем почти...да не почти вышло .... вторая колонка или не растягивается на 100% по высоте(если текста мало) или растягивается но слишком много....

выходит без float никак не обойтись?


И ещё в Вашем примере...если текста мало(и я раскрасила все блоки) блок right не во всю высоту всё равно вышел....или я чего то не понимаю???

[Aykroyd]

Originally posted by DELPHIna@Mar 15 2007, 11:06
Aykroyd - спасибо огромнное!!!!!!!!!
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Не за что совершенно.

Originally posted by DELPHIna@Mar 15 2007, 11:06
выходит без float никак не обойтись?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
У Сагалаева про это хорошо написано:

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

Originally posted by DELPHIna@Mar 15 2007, 11:06
И ещё в Вашем примере...если текста мало(и я раскрасила все блоки) блок right не во всю высоту всё равно вышел....или я чего то не понимаю???
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Не понимаете Вы пока самого главного (это не страшно, понимание приходит со временем ). Не надо раскрашивать все блоки (в частности – задавать фон колонкам). Ну нет средств в CSS сказать: "высота как вот у того другого элемента". А Faux Columns переводится как "ложные колонки". Фон для них задается, например, фоном элемента body (в данном Вашем случае для левой колонки – размноженное по вертикали фоновое изображение body, а для правой – коричневый фоновый цвет body, который проступает там, где нет фонового изображения). В связи с чем возникает иллюзия, что колонки одинаковой длины.

Я прикрепил в предыдущем посте картинку. Вы ее использовали?