Колонка с фиксированной шириной в стандартном prosilver

[Shredder]

Стоит задача - добавить колонку слева во всех страницах в обычном prosilver. Делаю следующий код:

Open: styles/prosilver/overall_footer.html

FIND:

Код: Выделить всё

<div id="page-footer">

	<div class="navbar">

ADD BEFORE:

Код: Выделить всё

<!-- START LEFT COLUMN -->
<div class="page-sidebar">
	<div class="forabg">
		<div class="inner"><span class="corners-top"><span></span></span>
			<ul class="topiclist">
				<li class="header">
					<dl class="icon">
						<dt>Reklama</dt>
					</dl>
				</li>
			</ul>
			<div style="padding: 5px 5px 2px 5px; font-size: 1.1em; background-color: #ECF1F3; margin: 0px auto; text-align: center;">
				test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
			</div>
		<span class="corners-bottom"><span></span></span></div>
	</div>
</div>
<style type="text/css">
		#page-body {
		width: 77%;
		float: right;
	}
		.page-sidebar {
		float: left;
		margin-top: 10px;
		width: 22%;
	}
</style>
<!-- ENDING LEFT COLUMN -->

Но эта колонка имеет резиновую ширину, так же как и сам форум. Теперь вопрос: как сделать резиновый форум и фиксированную колонку в пикселах?

Добавлено спустя 1 минуту 31 секунду:
Простая замена процентов в .page-sidebar на пикселы приводит к тому, что всё разлезается.

[ostridm]

Если во всю высоту страницы, то нужно три дива header content footer заключить в один, перед ним поставиьь див display block float left width 240px

Это плохой способ содержимое вставки будет ближе к началу страницы

Добавлено спустя 4 минуты 36 секунд:
Если же колонка нужна в контенте между хедером и футером то дополнителлный див не нужен но вставлять код нужно не в overall footer a в overall header

[evrus01]

Ну вы чего :)

Код: Выделить всё

	<!-- START LEFT COLUMN -->
<div class="page-sidebar">
	<div class="forabg">
		<div class="inner"><span class="corners-top"><span></span></span>
			<ul class="topiclist">
				<li class="header">
					<dl class="icon">
						<dt>Reklama</dt>
					</dl>
				</li>
			</ul>
			<div style="padding: 5px 5px 2px 5px; font-size: 1.1em; background-color: #ECF1F3; margin: 0px auto; text-align: center;">
				test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
			</div>
		<span class="corners-bottom"><span></span></span></div>
	</div>
</div>
<style type="text/css">
		#page-body {
		margin-left: 210px;
	}
		.page-sidebar {
		margin-top: 10px;
		width: 200px;
		position: absolute;
	}
</style>
<!-- ENDING LEFT COLUMN -->

перед <div id="page-body">

[Shredder]

evrus01
Спасибо, всё получилось.

Добавлено спустя 49 минут 58 секунд:
Итак, оба проверенных рабочих варианта с поправкой для корректного отображения page-footer:

Резиновая колонка слева с резиновым стилем:

Открыть styles/prosilver/overall_footer.html

Найти:

Код: Выделить всё

<div id="page-footer">

	<div class="navbar">

Добавить ДО найденного фрагмента:

Код: Выделить всё

<!-- START LEFT COLUMN -->
<div class="page-sidebar">
	<div class="forabg">
		<div class="inner"><span class="corners-top"><span></span></span>
			<ul class="topiclist">
				<li class="header">
					<dl class="icon">
						<dt>Reklama</dt>
					</dl>
				</li>
			</ul>
			<div style="padding: 5px 5px 2px 5px; font-size: 1.1em; background-color: #ECF1F3; margin: 0px auto; text-align: center;">
				test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
			</div>
		<span class="corners-bottom"><span></span></span></div>
	</div>
</div>
<style type="text/css">
		#page-body {
		width: 77%;
		float: right;
	}
		#page-footer {
		width: 77%;
		float: right;
		clear: right;
	}
		.page-sidebar {
		float: left;
		margin-top: 10px;
		width: 22%;
	}
</style>
<!-- ENDING LEFT COLUMN -->

фиксированная колонка слева с резиновым стилем:

Открыть styles/prosilver/overall_header.html

Найти:

Код: Выделить всё

	<div id="page-body">

Добавить ДО найденного фрагмента:

Код: Выделить всё

<!-- START LEFT COLUMN -->
<div class="page-sidebar">
	<div class="forabg">
		<div class="inner"><span class="corners-top"><span></span></span>
			<ul class="topiclist">
				<li class="header">
					<dl class="icon">
						<dt>Reklama</dt>
					</dl>
				</li>
			</ul>
			<div style="padding: 5px 5px 2px 5px; font-size: 1.1em; background-color: #ECF1F3; margin: 0px auto; text-align: center;">
				test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
			</div>
		<span class="corners-bottom"><span></span></span></div>
	</div>
</div>
<style type="text/css">
		#page-body {
		margin-left: 210px;
	}
		#page-footer {
		margin-left: 210px;
	}
		.page-sidebar {
		margin-top: 10px;
		float: left;
		width: 200px;
		position: absolute;
	}
</style>
<!-- ENDING LEFT COLUMN -->

[evrus01]

Shredder, в топку все :)

Делаем так
styles/prosilver/overall_header.html
перед:

Код: Выделить всё

<div id="page-body">

добавляем:

Код: Выделить всё

<table cellpadding="0" cellspacing="0" border="0" width="100%">
	<tr>
		<td valign="top" style="width: 230px; padding:0 10px 10px 0;">
		<br style="clear:both" />
		<!-- START LEFT COLUMN -->
<div class="page-sidebar">
	<div class="forabg">
		<div class="inner"><span class="corners-top"><span></span></span>
			<ul class="topiclist">
				<li class="header">
					<dl class="icon">
						<dt>Reklama</dt>
					</dl>
				</li>
			</ul>
			<div style="padding: 5px 5px 2px 5px; font-size: 1.1em; background-color: #ECF1F3; margin: 0px auto; text-align: center;">
				test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
			</div>
		<span class="corners-bottom"><span></span></span></div>
	</div>
</div>
<!-- ENDING LEFT COLUMN -->
</td>
		<td valign="top">

styles/prosilver/overall_footer.html
Сразу после первого <div>

Код: Выделить всё

		</td>
	</tr>
</table>

[chuj18]

Подскажите, как сделать чтобы подвал был на всю ширину монитора и отстоял от более заполненного блока на 5px?
Как на картинках

или


Заранее благодарен.

[chuj18]

С этим разобрался.
То как написано в предыдущим сообщении как раз так и работает, как я спрашивал. (это просто я не внимательно сделал).
Возник другой вопрос: можно ли сделать так, чтобы левая колонка отображалась только на главной странице?

[evrus01]

Да конечно.

Например, вот так.
Для обоих фрагментов кода надо задать условие:

Код: Выделить всё

<!-- IF SCRIPT_NAME == 'index' -->
код
<!-- ENDIF -->

[chuj18]

Задал это условие только для кода левой колонки. Все получилось на ура!
Спасибо!

[dimavsr]

незнаю в ту ли тему написал

В общем сейчас на форуме есть правая колонка, которая вызывается файлом overall_footer.html:

Код: Выделить всё

<div class="page-sidebar">
    <!-- INCLUDE sidebar.html -->
</div>

в файле common.css:

Код: Выделить всё

.page-sidebar {
float:right;
margin-top:34px;
width:15%;
}

необходимо добавить еще и левую в качестве теста в файле overall_footer.html сразу ниже добавил:

Код: Выделить всё

<div class="page-sidebar1">
    <!-- INCLUDE sidebar.html -->
</div>

в файле common.css добавил:

Код: Выделить всё

.page-sidebar1 {
float:left;
margin-top:34px;
width:15%;
}

В результате левый блок отображается справа ниже уже имеющегося. Почему?

[x00peR]

Чтобы выводилась левая колонка нужно править overall_header
Создать блок справа/слева без портала Prosilver

[dimavsr]

Чтобы выводилась левая колонка нужно править overall_header
Создать блок справа/слева без портала Prosilver

ничего не получается.
правил overall_header, добавил ниже как написано:

Код: Выделить всё

найти <div id="page-body">
После Вставь
<table cellpadding="0" cellspacing="0" border="0" width="100%">
	<tr>
		<td valign="top" style="width: 230px; padding-right:10px;">
		<br style="clear:both" />
                                      Левый блог
		</td>
		<td valign="top">

в итоге основной форум стал посередине, а блок который был справа ушел вниз под основной форум

[x00peR]

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

[dimavsr]

Вставьте полный код из того что я привел и в него вставьте свой блок.

не совсем понял. какой именно Ваш код? поясните, пож-та

[x00peR]

Создать блок справа/слева без портала Prosilver
Сделайте как там написано, а потом уже вставляйте в него свой код.
Либо в header закройте теги и посмотрите что получится:

Код: Выделить всё

найти <div id="page-body">
После Вставь
<table cellpadding="0" cellspacing="0" border="0" width="100%">
	<tr>
		<td valign="top" style="width: 230px; padding-right:10px;">
		<br style="clear:both" />
                                      Левый блог
		</td>
		<td valign="top">
</td>
</tr>
</table>