Добро пожаловать!

На нашем сайте вы найдете инструкции, которые помогут вам освоить систему uCoz и uWeb. Мы регулярно обновляем ресурс новыми инструкциями и обзорами. Благодаря нам вы поднимете свой начальный уровень знаний html&css, а также самой системы uCoz и uWeb до, как минимум, среднего уровня!

Мы всегда готовы помочь вам, и ответим на любые интересующие вас вопросы. Создайте отдельную тему с вашим вопросом в Вопросах по uCoz и uWeb и мы обязательно ответим на него.

Вёрстка [0]
Настройка дизайна [4]
Мелкие детали функций uCoz
Дизайн #796 | 12 Май 2012 14:56
Дизайн #796 | 12 Май 2012 06:25
Дизайн #796 | 12 Май 2012 05:39
Дизайн #798 | 07 Май 2012 15:40
Дизайн #806 | 07 Май 2012 12:40
Поиск
Наш опрос
Есть ли в инструкциях непонятные для вас слова?
Всего ответов: 177
Статистика
Онлайн всего: 2
Гостей: 2
Пользователей: 0

Нас посетили:
sosok
Соединяем блоки (25 Ноя 2011)
Прочее » Настройка дизайна | Опубликовал Nikita | 2 комментария
В этой статье я расскажу вам о том, как "собрать" два контейнера в один, точнее, как соединить друг друга вместе. Ниже будет описываться соединение блоков на стандартном шаблоне #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" />


В результате у нас получается так:


От автора:
Дело в том, что дизайнов в интернете много, и не всегда проходит такой вариант соединения блоков, поэтому, сначала попробуйте сделать всё это по инструкции, а только потом уже обращайтесь к нам за помощью на форум.
Всего комментариев: 2

0  
#1 TryTooKillme  26 Ноя 2011
У меня не получилось по вашему способу.
Возможно через то что мой дизайн (797) отличается от этого но у меня получилось когда я просто поменял leftcol на rightcol единственное что плохо то между блоками нет промежутка.
Ну с этим думаю я разберусь полазив в CSS если кто-то знает можете подсказать буду очень рад.

0  
#2 Nikita  26 Ноя 2011
Нужно между leftcol и rightcol установить отступ. Нужно к leftcol добавить: margin-right:10px;
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]