Установка фона для меню в трёхколоночной вёрстке

[Ратмир]

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

Исходник в табличной вёрстке: http://www.ecoby.info/

Страничка в дивной вёрстке (та, которую нужно доработать): http://www.ecoby.info/main.html

P.S. Ещё один вопросик мелкий - не могу почему-то перенести слой с заголовком сайта вниз (чтобы грузился последним), сбивается вся вёрстка, что это может быть?

[3ABAPKA]

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

Edited October 28, 2008 by 3ABAPKA

[Ратмир]

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

Насколько я понимаю, сейчас именно так и сделано:

#leftcolumn{
	background-color: #D5EA76; /* Background color for column */
	float: left; 
	width: 250px; /*Width of left column in pixel*/
	margin-left: -990px; /*Set margin to that of -(MainContainerWidth)*/
	padding-top: 10px;
}

Ограничения по высоте я нигде не ставил вроде, так что фоновый цвет должен покрывать весь контейнер, а он этого не делает Может быть, там что-то с позиционированием надо поправить, в этих "float: left;" и иже с ними?

Насколько я понимаю, контейнер просто не дотягивается дальше, а обрывается на месте последнего пункта меню. Попытка вставить в конец меню переносы строк (<br>) привела к тому, что фон пополз вниз на количество добавленных переносов:

Таким образом вопрос стоит в том, как объяснить контейнерам #leftcolumn и #rightcolumn, что они должны растягиваться от контейнера с заголовком #topsection до контейнера с дном #footer Кто разбирается в CSS, подскажите, как это можно реализовать? Не вставлять же эти br'ки всюду, да и не получится из этого ничего: код-то динамический, новости меняются, их размер разный. Кто посоветует нормальный подход? Можете просто отредактировать код моей страницы и скинуть сюда нужный кусок

Edited October 28, 2008 by Ратмир

[3ABAPKA]

не так у тебя сделано

у тебя салатовый цвет стоит для левой и правой колонки (#leftcolumn и #rightcolumn) которые скорее всего лежат в контейнере #maincontaner, для которого стили в твоем css не прописаны.

Не могу зайти на твой сайт потому что там "нечто" пытается изменить записи в моем реестре для плагинов эксплорера

Закинь сss и html файлы сюда (имею ввиду коды этих файлов)

[Searcher]

Не нужно растягивать сами контейнеры по высоте, достаточно изменить цвет фона родительского контейнера. Измени стиль так:

#contentwrapper{
	background: #D5EA76;
	float: left;
	width: 100%;
}

[rus]

По первому вопросу: нужно задать родителю, то есть body и html высоту 100% и вашим блокам тоже высоту 100%.

По второму не понял...

[3ABAPKA]

Не нужно растягивать сами контейнеры по высоте, достаточно изменить цвет фона родительского контейнера. Измени стиль так:

вот и я о томже

[Ратмир]

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

#maincontainer{
	background: #D5EA76;
	width: 990px; 
	margin: 0 auto; 
}

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

Ещё один вопросик мелкий - не могу почему-то перенести слой с заголовком сайта вниз (чтобы грузился последним), сбивается вся вёрстка, что это может быть?

Вот весь код CSS:

body{
	background: #FFF url(i/sky.gif) top left repeat-x;
	font-family: Verdana, Tahoma, Arial;
	font-size: 10px;	
	margin: 0;
	padding:0;
}

/* INTERACTIVE */

a {
	color: #00763D;
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	color: #F01818;
	text-decoration: none;
}

/* CONTENT */

img { border: 0; }
ul { margin: 0; }
h1 {
	font-size: 15pt;
	color: #00753D;
}
h2 {
	font: bold 130% Arial, sans-serif;
	padding: 0px 0px 0px 0px;
}
h3 {
	font-size: 13pt;
	color: #00753D;
}
h4 {
	font: bold 110% Arial, sans-serif;
	padding: 0px 0px 0px 0px;
}
h5 { font: bold 13pt Arial, sans-serif; }
.textput {
	font-size: 8pt;
	text-align: center;
}
.submenu { padding: 0px 0px 0px 53px; }
.submenu li {
	background: url(i/bgsubmenu.gif) transparent no-repeat 0 0;
	padding-left: 16px;
	list-style-type: none;
}
.sp {
	width: 15px;
	height: 46px;
}
.mi {
	width: 173px;
	height: 46px;
}
.mi_ico {
	width: 62px;
	height: 46px;
}
.mi_ico2 {
	width: 62px;
	height: 46px;
}

b{font-size: 110%;}
em{color: red;}

/* BLOCKs */

#maincontainer{
	background: #D5EA76;
	width: 990px; 
	margin: 0 auto; 
}

#topsection{
	background: #EAEAEA;
	height: 130px; 
}

#contentwrapper{
	float: left;
	width: 100%;
}

#contentcolumn{
	margin: 0 250px 0 250px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
	background-color: #F1FEAF;
	text-align: justify;
}

#contentcolumn div{
	padding: 10px;
}

#leftcolumn{
	float: left;
	width: 250px; /*Width of left column in pixel*/
	margin-left: -990px; /*Set margin to that of -(MainContainerWidth)*/
	background-color: #D5EA76;
	padding-top: 10px;
}

#leftcolumn div{
	padding-top: 10px;
	font-size: 10pt;
	text-align: left;
}

#rightcolumn{
	float: left;
	width: 250px; /*Width of right column*/
	margin-left: -250px; /*Set left margin to -(RightColumnWidth)*/
	background-color: #D5EA76;
	padding-top: 10px;
}

#rightcolumn div {
	padding-top: 10px;
	font-size: 10pt;
	text-align: left;
}

#footer {
	clear: left;
	width: 100%;
}

.innertube{
	margin: 0px;
}

Может быть для этого нужно расставить очерёдность в z-index? (и вообще, имеет ли смысл это делать?)

Edited October 28, 2008 by Ратмир

[3ABAPKA]

Таким образом получилось, что у меня фон под всеми тремя колонками, шапкой и подвалом одинаковый, но потом идёт перекрывание его в нужных местах собственными фонами отдельных контейнеров cool.gif wink.gif

#maincontainer{
	background: #D5EA76;
	width: 990px;
	margin: 0 auto;
}

Вот об этом я с самого начала говорил!

Про загрузку шапки (#topsection)=еще не хватает самого html кода - это для тех кто сможет тебе в этом помочь. Я где-то читал, что невозможно заставить браузер грузить так как хочется, он сам выбирает порядок загрузки. Не знаю на сколько это верно.

Про z-index=на сколько я знаю - z-index не управляем порядком загрузок элементов, а размещает слои относительно друг друга, т.е.

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет атрибут z-index.

дальше можно прочитать здесь Edited October 28, 2008 by 3ABAPKA

[Searcher]

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

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

[Ратмир]

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

На выделенке - может и так, однако мне последнее время десяток человек сказал, что через dial-up читать невозможно, очень долго грузится и т.п. Сейчас страничка целиком весит 176кб, это после того как я немного пошаманил над графическими элементами и "облегчил" страницу на 70-80кб. Однако как я понял, основная проблема не в её весе, а в скорости выполнения скриптов. Получается, что у меня сама страница, все ссылки на ней генерятся через php, причём идёт обработка около 5 (!) отдельных файлов: в одном заголовки, в другом меню, в третем текст страницы, плюс вывод последних новостей и мероприятий, ну и вывод последних сообщений с форума.

Вот я и думаю сейчас, что больше всего тормозов даёт вывод последних сообщений, и нужно вынести его в отдельный слой и запозиционировать его относительно footer'а выше на N-пикселей, а в контенте просто зарание эти N пикселей оставить свободными для дальнейшего перекрывания. Кто подскажет, возможно ли это реализовать и как? Вот текущий код:

<body>
<div id="maincontainer">

<div id="topsection"><a href="http://ecoby.info/"><img src="i/head.jpg" width="990" height="130" border="0" alt="ИАЦ `Звенящие кедры Белой Руси`" title="ИАЦ `Звенящие кедры Белой Руси`"></a>
</div> <!-- topsection-->

<div id="contentwrapper"><div id="contentcolumn">
<div class="innertube"><b>ИАЦ «Звенящие кедры Белой Руси» – это объединение создателей Родовых поместий Беларуси в едином стремлении сделать мир прекраснее.</b><br><br>Здесь вы сможете найти друзей, узнать последние новости, получить информацию о существующих и создающихся в Беларуси поселениях, подключится к общим проектам. Если вы ещё не знаете, что такое Родовое поместье - то <a href="http://ecoby.info/files/articles/idea.html">зайдите сюда!</a><br><br>

<div id="event"><center><b><font size="+1" color="#00753D" face="Arial"><img src="http://www.ecoby.info/i/icons/news.gif" alt="Новость" title="Новость" align="absmiddle"> "Звенящие Кактусы Руси" - давайте посмеёмся над собой! <img src="http://src.ucoz.net/sm/2/smile.gif"></font></b></center><br>"Каждый второй, живущий в той Руси, поэтом был и острословом. И барды были в той Руси, баянами тогда их звали. И получалось так в те времена. Десятилетьями ведут на Руси жреца солдаты пропаганду того, как Богу нужно поклоняться. И где-то местечково их начинают слушать люди и размышлять над сказанным. Баян, увидев это, посмеется и притчу сочинит, споёт. И притча быстро разнесётся по Руси. И следующие лет десять Русь над проповедями от жреца по-доброму смеется. От ярости жрец новые атаки посылает. Но снова притча на Руси родится, и вновь смеется Русь".<br><br><center><a href="index.php?page=news_main&src=main&nid=79">Узнать подробности...</a></center></div>

<center><h3><img src="http://www.ecoby.info/i/icons/news.gif" alt="Новость" title="Новость" align="absmiddle"> "Звенящие Кактусы Руси" - давайте посмеёмся над собой! <img src="http://src.ucoz.net/sm/2/smile.gif"></h3></center><div align="justify">"Каждый второй, живущий в той Руси, поэтом был и острословом. И барды были в той Руси, баянами тогда их звали. И получалось так в те времена. Десятилетьями ведут на Руси жреца солдаты пропаганду того, как Богу нужно поклоняться. И где-то местечково их начинают слушать люди и размышлять над сказанным. Баян, увидев это, посмеется и притчу сочинит, споёт. И притча быстро разнесётся по Руси. И следующие лет десять Русь над проповедями от жреца по-доброму смеется. От ярости жрец новые атаки посылает. Но снова притча на Руси родится, и вновь смеется Русь".</div><br><br><center><a href="index.php?page=news_main&src=main&nid=79">Узнать подробности...</a></center>

<br><center><font size="-2" color="grey">Текстовое содержимое доступно в соответствии с <br><a href="http://www.gnu.org/copyleft/fdl.html">GNU Free Documentation License</a>.</font></center></div></div>
</div> <!-- contentwrapper -->

<div id="leftcolumn">
<div class="innertube"><a href="index.php?page=motion"><img src="i/menu_apple2.gif" class=mi_ico><img src="i/menu2.gif" class=mi alt="Движение"></a><img src="i/spacer.gif" class=sp></div><div><ul class=submenu><li><a href="index.php?page=centr">Наш центр</a></li><li><a href="index.php?page=poselenie">Родовые поселения</a></li><li><a href="index.php?page=clubs">Клубы и объединения</a></li><li><a href="index.php?page=contact">Участники</a></li></ul></div>	<div><a href="index.php?page=measure"><img src="i/menu_apple2.gif" class=mi_ico><img src="i/menu1.gif" class=mi alt="Мероприятия"></a><img src="i/spacer.gif" class=sp></div><div><ul class=submenu><li><a href="index.php?page=meeting">Встречи</a></li><li><a href="index.php?page=section">Кружки</a></li><li><a href="index.php?page=holiday">Праздники</a></li><li><a href="index.php?page=conference">Конференции</a></li></ul></div><div><a href="index.php?page=news_main"><img src="i/menu_apple2.gif" class=mi_ico><img src="i/menu3.gif" class=mi alt="Новости"></a><img src="i/spacer.gif" class=sp></div><div><ul class=submenu><li><a href="index.php?page=by_news">У нас</a></li><li><a href="index.php?page=world_news">В мире</a></li></ul><br></div>
</div> <!-- leftcolumn-->

<div id="rightcolumn">
<div class="innertube"><a href="index.php?page=library"><img src="i/menu_apple2.gif" class=mi_ico><img src="i/menu5.gif" class=mi alt="Библиотека"></a><img src="i/spacer.gif" class=sp></div><div><ul class=submenu><li><a href="index.php?page=storage">Хранилище</a></li><li><a href="index.php?page=articles">Книги, статьи</a></li><li><a href="iindex.php?page=media">Энциклопедия</a></li><li><a href="index.php?page=links">Ссылки</a></li></ul></div><div><a href="index.php?page=jarmarka"><img src="i/menu_apple2.gif" class=mi_ico><img src="i/menu4.gif" class=mi alt="Ярмарка"></a><img src="i/spacer.gif" class=sp></div><div><ul class=submenu><li><a href="index.php?page=bookshop">Наша лавка</a></li><li><a href="index.php?page=gift_nature">Дары природы</a></li><li><a href="index.php?page=industry">Промыслы</a></li><li><a href="index.php?page=busines">Предпринимательство</a></li></ul></div><div><a href="index.php?page=dialog"><img src="i/menu_apple2.gif" class=mi_ico><img src="i/menu6.gif" class=mi alt="Общение"></a><img src="i/spacer.gif" class=sp></div><div><ul class=submenu><li><a href="index.php?page=find_heart">Поиск родных сердец</a></li><li><a href="http://forum.ecoby.info/">Форум </a></li></ul></div>
</div> <!-- rightcolumn-->

<div id="footer">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="990" height="100" align="center"><param name=movie value="i/footer.swf"><param name=menu value=false><param name=quality value=high><param name=bgcolor value=#F1FEAF><embed src="i/footer.swf" menu=false quality=high bgcolor=#F1FEAF width="990" height="100" align="center" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object>
</div> <!-- footer -->

</div> <!-- maincontainer -->
</body>

Вот такие пироги: там отображение последних сообщений идёт в контенте перед словами "Текстовое содержимое доступно в соответствии с". Достаточно ли будет перед "<div id="leftcolumn">" вставить нечто наподобие "<div id="messages">" и задать ему отрицательное выравнивание по верхнему краю на N-пикселей, или это нужно реализовывать как-то иначе? Может, нужно позиционировать его относительно "подвала" ("<div id="footer">")? Можете привести пример или показать на моём коде?

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

Я понимаю, с заголовком в принципе ладно, он весит 46 кило и даже по дайл-апу загрузится максимум за 7 секунд, но вот блок с последними сообщениями форума я бы вынес при возможности. Я думаю первую страничку сделать полустатичной: чтобы заголовок страницы и меню не генерировались каждый раз, а были уже заданы, при том что новости и мероприятия, а также последние сообщения с форума выводились динамически.

[Ратмир]

Ну вот, с выводом последних сообщений форума вроде разобрался:

#forum{
	clear: left;
	width: 490px;
	margin-left: 250px;
	margin-top: -200px; 
	background-color: #F1FEAF;
	text-align: justify;
}

Сам блок запихнул в коде в самый конец, перед "подвалом" ("footer"), задал размеры и отрицательный отступ с верху. Конечно, во время процесса загрузки страницы этот блок висит ниже "подвала", однако когда всё догружается шустро прыгает на своё место, так что вполне приемлемый вариант оказался Одно "но" - в IE он всё равно "узжает" куда-то, и неясно, как его вернуть

Перевёл сейчас весь сайт на <div>, только что не трогал вывод информации в таблицах (долго маяться, да и не на форматирование, не на скорость не влияет), однако вылезло два косяка, с которыми не знаю, что делать

Косяк №1

Если текст контента не большой, то ниже его остаётся белая полоса (пример: http://ecoby.info/index.php?page=storage).

Получается, что блок #contentcolumn_big не доходит по вышине до #leftcolumn. CSS такой:

#maincontainer{
	background: #D5EA76;
	width: 990px; 
	margin: 0 auto; 
} //Основной контейнер для страницы, в качестве фона задан цвет левого меню.

#contentwrapper{
	float: left;
	width: 100%;
} //Насколько я понимаю, некая фигня для вписывания блока с контентом внутрь.

#contentcolumn_big{
	margin-left: 250px; /*Set left margin to LeftColumnWidth*/
	margin-top: -18px; 
	margin-bottom: 0px; 
	padding: 20px;
	background-color: #F1FEAF;
	text-align: justify;
} //Собственно блок контента, который и нужно, чтобы был закрашен цветом #F1FEAF до самого низа блока левого меню. Также он почему-то сместился вниз относительно шапки, так что пришлось тянуть с помощью margin-top: -18px; 

#contentcolumn div{
	padding: 10px;
}

#leftcolumn{
	float: left;
	width: 250px; /*Width of left column in pixel*/
	margin-left: -990px; /*Set margin to that of -(MainContainerWidth)*/
	background-color: #D5EA76;
	padding-top: 10px;
} //Блок левого меню, идёт по очерёдности загрузки за блоком контента

#leftcolumn div{
	padding-top: 10px;
	font-size: 10pt;
	text-align: left;
}

#footer {
	clear: left;
	width: 100%;
}//Попытка сделать внизу страницы полоску, подчёркивающую конец контента и меню

Косяк №2

Когда текст контента слегка не дотягивает до конца левого меню, то нижняя полоска ("footer") смещается вверх, а внизу остаётся пустое место (пример - http://ecoby.info/index.php?page=media).

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

Edited June 27, 2009 by Ратмир