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

Ратмир · October 28, 2008

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

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

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

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

3ABAPKA · October 28, 2008

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

Edited October 28, 2008 by 3ABAPKA

Ратмир · October 28, 2008

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

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

#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 · October 28, 2008

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

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

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

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

Searcher · October 28, 2008

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

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

rus · October 28, 2008

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

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

3ABAPKA · October 28, 2008

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

вот и я о томже

Ратмир · October 28, 2008

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

#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 · October 28, 2008

Таким образом получилось, что у меня фон под всеми тремя колонками, шапкой и подвалом одинаковый, но потом идёт перекрывание его в нужных местах собственными фонами отдельных контейнеров 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 · October 28, 2008

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

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

Ратмир · October 29, 2008

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

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

Ратмир · October 30, 2008

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

#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 Ратмир

Sign In

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

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information