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

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

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


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

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

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

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

Цитата:

---

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

---

Цитата:

---

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

---

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

я думаю вам поможет эта ссылка: [Only registered and activated users can see links. Click Here To Register...]

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


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

Вам определенно [Only registered and activated users can see links. Click Here To Register...]
И вообще весь этот учебник рекомендую...

Цитата:

---

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

я думаю вам поможет эта ссылка: [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]

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

Цитата:

---

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'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Поддерживаю. [Only registered and activated users can see links. Click Here To Register...]

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

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

Семантика, однако. [Only registered and activated users can see links. Click Here To Register...] Аминь!

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

а вот с блочной только только сталкиваться начала.....и никак не перестроиться.... всё равно мыслю как то таблицами [Only registered and activated users can see links. Click Here To Register...]

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

Цитата:

---

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

---

Цитата:

---

Поддерживаю

---

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

Цитата:

---

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

---

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

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

Цитата:

---

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

---

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

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

P.S. Хотя сколько людей, столько и мнений.. [Only registered and activated users can see links. Click Here To Register...]

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

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

Какая интересная полемика о дизайне и контенте [Only registered and activated users can see links. Click Here To Register...]

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


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


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

Цитата:

---

Originally posted by DELPHIna@Mar 14 2007, 10:30
вот читаю Вас и думаю....а ка же это?......есть ли где примеры как порезать дизайн с картинками....и сдлеть верстку не табличной.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

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

Цитата:

---

Originally posted by DELPHIna@Mar 14 2007, 10:30
а вообще использовать частично и то и другое можно??? или вообще лучше не смешивать?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

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

Цитата:

---

Originally posted by garA@Mar 14 2007, 12:10
Да, в принципе, можно, если вам сложно сразу перейти на "блочную верстку".. Структуру делайте таблицей, а все остальное, как надо..
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Позвольте поинтересоваться, я что Вы подразумеваете под "остальным"? [Only registered and activated users can see links. Click Here To Register...]
Что еще кроме структуры представляется блочной моделью? Эх... [Only registered and activated users can see links. Click Here To Register...]

Цитата:

---

Originally posted by lenmikh@Mar 14 2007, 13:38
А разве дизайна с отключенной графикой не существует?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

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

Цитата:

---

Originally posted by lenmikh@Mar 14 2007, 13:38
Наоборот, нужно дублирование информации как раз на этот случай.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

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

Цитата:

---

Originally posted by lenmikh@Mar 14 2007, 13:38
нужно предусмотреть текстовый дизайн и цветовой дизайн ячеек
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Слышал про графический дизайн, дизайн интерьера...
Но вот про "текстовый дизайн" слышу впервые...
И ячеек, кстати, в блочной модели не существует... [Only registered and activated users can see links. Click Here To Register...]

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

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

может я не совсем в тему, но вот неплохая ссылочка: [Only registered and activated users can see links. Click Here To Register...] [Only registered and activated users can see links. Click Here To Register...]

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

Цитата:

---

Originally posted by DELPHIna@Mar 14 2007, 17:02
мне нужно суть понять....а для этого было бы неплохо получать ответы на вопросы...даже если для кого то они глупые.... просто мне суть понять надо.....
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

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

Цитата:

---

Originally posted by DELPHIna@Mar 14 2007, 16:43
а вопросы всё равно есть....может кто нибудь посмотрит мой примерчик?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Посмотрит, посмотрит...
Сейчас покурит и посмотрит... [Only registered and activated users can see links. Click Here To Register...]

Цитата:

---

Originally posted by DELPHIna@Mar 14 2007, 14:53
- отчего прокрутка вниз .... что вместо height:100% использовать надо...или я не в том месте его использую
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/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-пиксельная прокрутка вниз...

Сложно?
Но никто и не говорил, что будет легко... [Only registered and activated users can see links. Click Here To Register...]

Цитата:

---

Originally posted by DELPHIna@Mar 14 2007, 14:53
- как коричневый блок( правый div) заставить растянуться к низу?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Надо не задавать ему фон, а воспользоваться методом [Only registered and activated users can see links. Click Here To Register...].
Это подробно обсуждается в учебнике, который я Вам рекомендовал.

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

Код:

---

<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>

---

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

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

**Надо не задавать ему фон, а воспользоваться методом Faux Columns.*** я прочитала статью уже много раз....но наравне с нею и статьи о позиционированиии отступах, где как мне показалось похожего эффекта тоже можно добиться...(т.е. две колонки текста...) Вы в примере используете float....а я пробовала без них.... у меня почти получилось [Only registered and activated users can see links. Click Here To Register...]
вообщем почти...да не почти вышло .... вторая колонка или не растягивается на 100% по высоте(если текста мало) или растягивается но слишком много....

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


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

Цитата:

---

Originally posted by DELPHIna@Mar 15 2007, 11:06
Aykroyd - спасибо огромнное!!!!!!!!!
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Не за что совершенно. [Only registered and activated users can see links. Click Here To Register...]

Цитата:

---

Originally posted by DELPHIna@Mar 15 2007, 11:06
выходит без float никак не обойтись?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

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

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

Цитата:

---

Originally posted by DELPHIna@Mar 15 2007, 11:06
И ещё в Вашем примере...если текста мало(и я раскрасила все блоки) блок right не во всю высоту всё равно вышел....или я чего то не понимаю???
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

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

Я прикрепил в предыдущем посте картинку. Вы ее использовали? [Only registered and activated users can see links. Click Here To Register...]

спасибо за разъяснение....очень понятно стало...

Цитата:

---

Originally posted by Aykroyd@Mar 15 2007, 21:07
[b]Я прикрепил в предыдущем посте картинку. Вы ее использовали?* [Only registered and activated users can see links. Click Here To Register...]

---

какую такую картинку? как использовать...??

Цитата:

---

Originally posted by DELPHIna@Mar 16 2007, 11:39
какую такую картинку? как использовать...??
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Обыкновенную. Размером 200х2 px.

Цитата:

---

Originally posted by Aykroyd@Mar 16 2007, 11:06
Обыкновенную. Размером 200х2 px.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
ааааааа....картинку.....встав� �ть слева.....
нет...не скачивала я её....
я просто свой пример переделала...смотря на ваш [Only registered and activated users can see links. Click Here To Register...] и картинку свою вставила....я разобралась как это чудо с псевдоколонками работает...

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

А вот ещё вопросик возник! Как сделать чтобы правая колонка не заезжала с текстом на левую....если окно броузера сужать.... в таблицах то всё просто....поставил распорку и всё...а тут как?

Цитата:

---

Originally posted by DELPHIna@Mar 16 2007, 10:30
[b]А вот ещё вопросик возник! Как сделать чтобы правая колонка не заезжала с текстом на левую....если окно броузера сужать.... в таблицах то всё просто....поставил распорку и всё...а тут как?

---

для нормальных браузеров есть свойство min-width, которое и задает минимальную ширину блока, а для IE используйте экспрешн

Подробнее здесь:

[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]

Цитата:

---

Originally posted by DELPHIna@Mar 16 2007, 12:30
я разобралась как это чудо с псевдоколонками работает...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Аминь! [Only registered and activated users can see links. Click Here To Register...]

Цитата:

---

Originally posted by DELPHIna@Mar 16 2007, 12:30
вот оно как...получается..... читаешь, читаешь.....а доходит толко после ответов на вопросы. Жалко что Вы не рядом, и не учитель мой... ато бы я была прилежной ученицей. Мне интересно изучать всё новое.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Простите за нижележащее отступление (это я в адрес коллеги).

to Zigzag
Павел, смотри что творится-то. [Only registered and activated users can see links. Click Here To Register...]
Девушки блочную модель постигают ускоренными темпами. [Only registered and activated users can see links. Click Here To Register...]
Прогресс на лицо! [Only registered and activated users can see links. Click Here To Register...]

Цитата:

---

Originally posted by DELPHIna@Mar 16 2007, 12:30
А вот ещё вопросик возник! Как сделать чтобы правая колонка не заезжала с текстом на левую....если окно броузера сужать.... в таблицах то всё просто....поставил распорку и всё...а тут как?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Вам дали хорошие ссылки.
Но, честно говоря, мне не совсем понятно почему, собственно говоря, у Вас правая колонка заезжает на левую. Если левая колонка с флоатом, а правая – в прямом потоке, ничего не должно друг на друга заезжать при любом размере окна браузера... По крайней мере, в предложенном мной примере это именно так.

Цитата:

---

Originally posted by Aykroyd@Mar 16 2007, 12:19
[b]to Zigzag
Павел, смотри что творится-то.* [Only registered and activated users can see links. Click Here To Register...]
Девушки блочную модель постигают ускоренными темпами.* [Only registered and activated users can see links. Click Here To Register...]
Прогресс на лицо!* [Only registered and activated users can see links. Click Here To Register...]

---

наше бравое дело в популяризации стандартов живет! :dance:

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

а наезжают колонки ...это не из вашего примера, а из того, что мне выше дали.... Кстати про min-width тоже как то не всё однозначно.....

Цитата:

---

Originally posted by DELPHIna@Mar 19 2007, 11:54
увы и увы...не так быстро бы как хотелось.... вопросов только больше становиться....
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Нормально-нормально... ))
И то, что вопросов больше появляется – это ж хорошо. Так и должно быть на первых порах. ))

Цитата:

---

Originally posted by DELPHIna@Mar 19 2007, 11:54
а наезжают колонки ...это не из вашего примера, а из того, что мне выше дали....
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Я не смотрел, что там выше... Если есть возможность разложить элементы так, чтобы ничего ни на что не наезжало, зачем раскладывать по другому?

Цитата:

---

Originally posted by DELPHIna@Mar 19 2007, 11:54
Кстати про min-width тоже как то не всё однозначно.....
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Свойство min-width – очень полезная и нужная вещь.
Единственный нюанс – его Internet Explorer не понимает. Но и здесь можно решить вопрос при помощи специального скрипта.

Является ли растягивание div с помощью padding-bottom: 10000px; margin-bottom: -10000px; политически корректным? [Only registered and activated users can see links. Click Here To Register...]

[Only registered and activated users can see links. Click Here To Register...].

Прочитал тему, но именно ответа на вопрос для себя не нашел. Там какая-то перепалка просто в теме, а конкретики не увидел [Only registered and activated users can see links. Click Here To Register...]

Цитата:

---

Originally posted by Sergeant@Jan 30 2008, 16:41
а конкретики не увидел
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]

Жаль.

В этой теме нету растягивания по вертикали. Разве что с помошью бекграундовой картинки [Only registered and activated users can see links. Click Here To Register...]
Есть про прилипание футера вниз, но у меня впринципе стандартная ситуация - правая и лева колонка меню, в середине контент. У боковых колонок border=1 но он не опускается вместе с центральным контентом.