Полное описание
В этой статье я расскажу вам о том, как "собрать" два контейнера в один, точнее, как соединить друг друга вместе. Ниже будет описываться соединение блоков на
стандартном шаблоне #793.
Изображение #1 Итак, заходим в
Панель управления » Управление дизайном » Конструктор шаблонов (http://вашсайт/panel/?a=tmaker), нажимаем на
Каркасы стандартных дизайнов и выбираем наш шаблон #793 (можно и другой).
Нас будет интересовать только следующая область кода:
Между
<!-- <middle> --> и
<!-- </middle> --> находится то, где будут отображаться наши блоки и сам контент нашего сайта: форум, материалы и так далее. А между
<!-- <container> -->
<!-- <block> --> и
<!-- </block> --><!-- </container> --> - содержимое наших блоков. Все блоки будут находится слева, а контент справа.
Приступим. Вот собственно код дизайн блоков, которые находятся слева:
Code
<td id="leftcol">
<!-- <container> -->
<!-- <block> -->
<div class="block">
<div class="blocktitle">
TITLE
</div>
<div class="blockcontent">
<div class="blockcontent_inside">
CONTENT
</div>
</div>
<div class="blockbottom"></div>
</div>
<!-- </block> -->
<!-- </container> -->
</td>
По сути нам нужно продублировать этот код, но это можно сделать короче, добавим после этого сразу только следующее:
Code
<td id="rightcol">
<!-- <container> -->
<!-- </container> -->
</td>
Мы удалили всё, что было внутри
container, т.к. дизайн блоков уже задан в предыдущем дизайне и изменим
leftcol на
rightcol.
Теперь давайте найдем старый код и удалим его:
Code
<td id="rightcol">
<!-- <container> -->
<!-- </container> -->
</td>
На данный момент у нас должно получиться следующим образом:
Code
<!-- <middle> -->
<table border="0" cellspacing="0" cellpadding="0" width="960">
<tr>
<td id="leftcol">
<!-- <container> -->
<!-- <block> -->
<div class="block">
<div class="blocktitle">
TITLE
</div>
<div class="blockcontent">
<div class="blockcontent_inside">
CONTENT
</div>
</div>
<div class="blockbottom"></div>
</div>
<!-- </block> -->
<!-- </container> -->
</td>
<td id="rightcol">
<!-- <container> -->
<!-- </container> -->
</td>
<td id="maincol">
<div id="maincol_inside">
[BODY]
</div>
</td>
</tr>
</table>
<!-- </middle> -->
Теперь нам нужно найти строчку:
Code
<link href="http://s58.ucoz.net/src/css/793.css" rel="stylesheet" type="text/css" />
ВНИМАНИЕ!!! Чтобы совершать данное действие, вы должны быть уверены, что до этого установили данный шаблон (через Общие настройки). Заменим её на:
Code
<link href="/_st/my.css" rel="stylesheet" type="text/css" />
В результате у нас получается так:
От автора: Дело в том, что дизайнов в интернете много, и не всегда проходит такой вариант соединения блоков, поэтому, сначала попробуйте сделать всё это по инструкции, а только потом уже обращайтесь к нам за помощью на форум.