Отдельные блоки справа

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Re: Отдельные блоки справа

CabinetAdmin 03 апр 2014, 18:39 Сообщение

Uzanka » Сегодня, 19:44 писал(а):а сбоку по одной колонке.

В смысле с двух сторон? По типу как в портале из трёх колонок?

Uzanka » Сегодня, 19:44 писал(а):сам форум (узкий в середине), а сбоку по одной колонке. Шапка широкая на весь экран.

Это и сама html структура и стили. В принципе можно обойтись только css стилями.

А вот про ббкод я не понял, вы хотите такую картинку в теме использовать? Или надо как на том сайте?
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Отдельные блоки справа

Uzanka 03 апр 2014, 18:49 Сообщение

CabinetAdmin » 5 минут назад писал(а):По типу как в портале из трёх колонок?

да, по такому типу. Т.е., я так понимаю, что это делается как таблица из трех колонок. По такому же принципу как здесь давался код, но только для колонки справа, а мне нужно будет добавить колонку слева еще. Правильно я понимаю?

CabinetAdmin » 5 минут назад писал(а):А вот про ббкод я не понял, вы хотите такую картинку в теме использовать? Или надо как на том сайте?

Не в теме, а видимо в шаблоне я должна такое вставить. Хотелось бы по типу того, как на том сайте, т.е. на главной странице моего форума и всё. Т.е. я бы хотела сделать такие "стикеры" вместо моих колонок справа. Мои колонки справа выглядят как и весь остальной форум, а хотелось бы оформить их в виде таких вот стикеров. Это возможно? Я не знаю как это правильно сказать что мне нужно. Наверное, это с помощью css стилей рисуется-делается.
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
CabinetAdmin

Re: Отдельные блоки справа

CabinetAdmin 03 апр 2014, 19:34 Сообщение

Uzanka » 10 минут назад писал(а):таблица из трех колонок

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

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

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<!-- [+] left block area -->
<td valign="top" style="width: 250px; padding-right: 6px;">
left block
</td>
<!-- [-] left block area -->
<td style="width:4px;" valign="top"></td>

<!-- [+] center block area -->
<td valign="top">
center block
</td>

<!-- [-] center block area -->
<td style="width:4px;" valign="top"> </td>

<!-- [+] right block area -->
<td valign="top" style="width: 250px; padding-left: 6px;">
right block
</td>
<!-- [-] right block area -->
</tr>
</table>


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

зы. имхо конечно, но использование таблицы в стиле на html5... Как бы ни к месту что ли, лучше всё же с помощью стилей.

А изображение вырезать не большая проблема:
Изображение

Вроде такого:

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

<div class="cont">
Info
</div>


CSS:

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

.cont {
background: url("/image.png");
width: 230px;
height: 161px;
padding: 55px 35px 15px 15px;
margin: 0 auto;
box-sizing: border-box;
overflow: hidden;
text-align: center;
}
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Отдельные блоки справа

Uzanka 03 апр 2014, 19:37 Сообщение

Спасибо огромное! :Yahoo!: я попробую сделать сегодня вечером стикер :D

апдейт: отлично получилось! :Bravo: теперь я хочу ее за пределы форума вынести :D , т.е. форум по центру, а по бокам форума стикеры :)

зы. только стикер короткий.. много не помещается.. но красивый :Rose:
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
Uzanka

Re: Отдельные блоки справа

Uzanka 03 апр 2014, 20:57 Сообщение

Я тут подумала как бы это реализовать.. а если не делать таблицей, т.е. колонки справа и слева. А вернуть форум как был узким, а поверх форума по бокам прикрепляются стикеры (в определенных местах). Такое возможно?
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
CabinetAdmin

Re: Отдельные блоки справа

CabinetAdmin 05 апр 2014, 08:46 Сообщение

Такс...
Чтобы реализовать три колонки, на главной странице форума, нам надо отредактировать шаблон index_body.html. У вас уже есть одна боковая колонка, значит в этом шаблоне должно быть:

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

<div class="left-body">

меняете его на:

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

<div class="center-body">


Далее перед ним добавляете код для левой колонки:

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

<div class="left-body">

<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl>
<dt>Заголовок</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row">
<dl>
<dd>
Информация
</dd>
</dl>
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>

<!-- Плюс дополнительные колонки -->

</div>


В теме стиля находите:

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

.left-body {
width: 80%;
float: left;
}

.right-body {
width: 18%;
padding: 5px;
float: right;
}


и меняете на:

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

.left-body {
width: 20%;
padding: 5px;
float: left;
box-sizing: border-box;
}

.center-body {
width: 60%;
padding: 3px 5px;
float: left;
box-sizing: border-box;
}

.right-body {
width: 20%;
padding: 5px;
float: right;
box-sizing: border-box;
}



По поводу этих стикеров. Есть небольшой нюанс, на небольшом разрешении изображения будут вылезать за края. Можно конечно ограничить минимальную ширину. Делается это так, находите в теме стиля body { и добавляете к нему min-width: 1150px;. Значение можно своё указать.




Второй вариант.
C учётом правок в предыдущем варианте. Весь код правой колонки, начиная с <div class="right-body"> переносите выше, сразу после левой колонки и перед центральной, должно получиться что-то вроде такого:

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

<div class="left-body">
<!-- Здесь код нашей левой колонки -->
</div>

<div class="right-body">
<!-- Здесь код нашей правой колонки -->
</div>

<div class="center-body">
<!-- INCLUDE forumlist_body.html -->
</div>


Далее правки стилей, старый код меняете на:

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

.left-body {
width: 240px;
padding: 5px;
float: left;
}

.center-body {
margin: 0 260px;
padding: 5px;
}

.right-body {
width: 240px;
padding: 5px;
float: right;
}

.section-index div.forabg, span.corners-bottom {
clear: none;
}


Этот вариант хорош тем, что колонки при любом разрешении экрана всегда остаются тех же размеров и, соответственно, изображения стикеров не будут вылезать за края форума.

Uzanka писал(а):Шапка широкая на весь экран.

По поводу шапки на весь экран. Реализовывается это всё с помощью CSS. Если интересно и есть изображение или цвет для шапки, могу рассказать как это реализовать.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Отдельные блоки справа

Uzanka 05 апр 2014, 16:48 Сообщение

CabinetAdmin,
большое спасибо :Rose: я попробую реализовать второй вариант. Хотела еще спросить на счет размеров. Почему во втором варианте даны именно такие размеры? Т.е. в сумме определенное число. А елси экран будет уже этой суммы, то будет прокрутка? или при втором варианте прокрутки никогда быть не может?
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
CabinetAdmin

Re: Отдельные блоки справа

CabinetAdmin 05 апр 2014, 18:26 Сообщение

Uzanka » Сегодня, 19:48 писал(а):именно такие размеры?

Просто так указал, как оптимальное соотношение. Можно конечно колонки сделать уже или шире, за одним надо будет подбирать и отступы у центральной колонки - margin: 0 260px;. А прокрутка у вас появляется раньше, из-за широкого изображения (там где слайдер).

В первом варианте есть вариант перескакивания колонки на следующую строку, плюс так как ширина колонок указана в процентах, они сужаются вместе с размером экрана. Во втором варианте ширина фиксирована, сужается только центральная колонка.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Отдельные блоки справа

Uzanka 07 апр 2014, 14:18 Сообщение

CabinetAdmin,
спасибо за информацию :Rose:

У меня такой вопрос: а можно сделать так, чтобы в центральном блоке находился весь форум целиком? вместе с шапкой..или это невозможно? я пыталась так сделать, но видимо что-то не так, потому что не отрабатывало нормально. Я пыталась добавить блоки сразу после </head> и закрывающийся перед </body>. Но ничего толком не получилось :(

CabinetAdmin » 05 апр 2014, 18:26 писал(а):А прокрутка у вас появляется раньше, из-за широкого изображения (там где слайдер).

А как вы это узнаете? может быть есть какая-то ссылка, чтобы можно было бы посомтреть свой форум на разных разрешениях экранов?
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
CabinetAdmin

Re: Отдельные блоки справа

CabinetAdmin 07 апр 2014, 15:53 Сообщение

Uzanka » 55 минут назад писал(а):или это невозможно?

Ну почему невозможно.. возможно конечно:)
Делается это примерно так, в хедере после <body> ставите:

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

<div class="left-body">
<!-- Здесь код нашей левой колонки -->
</div>

<div class="right-body">
<!-- Здесь код нашей правой колонки -->
</div>

<div class="center-body">


Потом в футере перед </body> ставите </div>. Потом стили, и вроде всё.

Возможны правда проблемы с некоторыми стилями. Например:

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

body > header, #header {

или

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

body > header nav a, body > header nav a:visited, body > header nav span {

или

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

body.rounded > footer {


Стили написанные под ним не будут отрабатываться в вашем случае, потому что между body > header у вас появился <div>. Поэтому все подобные стили придётся переписывать:

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

body header, #header {

т.е. удалять >.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Отдельные блоки справа

Uzanka 07 апр 2014, 16:12 Сообщение

CabinetAdmin » 8 минут назад писал(а):Возможны правда проблемы с некоторыми стилями. Например:

да, теперь понятно. Из-за этого были проблемы. У меня такой стиль :crazy:

CabinetAdmin » 8 минут назад писал(а):т.е. удалять >.

это поможет? и если не трудно, то можно коротко объяснить что означает этот значек между
CabinetAdmin » 8 минут назад писал(а):body > header

Это означет лишь дополнительный <div>? открывающийся? а закрывающийся?
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
CabinetAdmin

Re: Отдельные блоки справа

CabinetAdmin 07 апр 2014, 17:51 Сообщение

Этот значок означает, что блок header вложен в body, без всяких промежуточных блоков. В шаблоне это выглядит примерно так:

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

<body>
<header>
...
</header>


Это обычно делается, чтобы отделить стили, чтобы они не применялись в других местах, а только в конкретном случае.
Например. Имеем два блока:

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

<div class="body">
<p><a href="#">Ссылка</a></p>
</div>

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

<div class="body">
<a href="#">Ссылка</a>
</div>

Css:

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

.body > a {
color: #FFF;
}

В данном случае ссылка будет белого цвета только во втором блоке, если удалить >, то будет в обоих вариантах. Всё потому, что в первом варианте ссылка вложена в тег <p>, а в стилях написано, что ссылка находится сразу в блоке с классом .body.
Чтобы, например, применить только для первого варианта, то нужно дописать тег <p>:

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

.body p a {
color: #FFF;
}


Надеюсь понятно объяснил:)

"Поехать" стиль не должен, так как блоки <header> и <footer> встречаются на странице только один раз, и смысла в таком написании стиля я не вижу.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Отдельные блоки справа

Uzanka 08 апр 2014, 13:16 Сообщение

CabinetAdmin » Вчера, 17:51 писал(а):Это обычно делается, чтобы отделить стили, чтобы они не применялись в других местах, а только в конкретном случае.

Огромное спасибо за объяснение :Rose: :Rose: :Rose: Всё понятно. Попробую сначала изменить стиль. Если всё будет нормально, то попробую блоки справа и слева :)
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
Uzanka

Re: Отдельные блоки справа

Uzanka 10 апр 2014, 13:25 Сообщение

CabinetAdmin,
а можно сделать так, чтобы левая колонка была бы резиновая, а не центральная. Т.е. форум состоит из трех колонок. Центральная (форум) и правая - фиксированной ширины, а левая будет подстраиваться под размер экрана. Как в этом случае нужно изменить кусок стиля, что вы давали выше? (у вас там центральный блок резиновый)

:Rose:
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
CabinetAdmin

Re: Отдельные блоки справа

CabinetAdmin 10 апр 2014, 15:36 Сообщение

Центральная колонка сколько то всё равно сужается, у вас ведь не фиксированный стиль, можно конечно задать точные размеры, либо минимальную ширину. Задаётся это так, для body {:

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

width: 1200px;

фиксированная ширина

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

min-width: 1200px;

минимальная.


Uzanka » Сегодня, 16:25 писал(а):чтобы левая колонка была бы резиновая

С учётом предыдущих правок, перед:

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

<div class="right-body">
<!-- Здесь код нашей правой колонки -->
</div>

ставите:

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

<div class="main-body">


В футере перед:

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

</div> </body>

ставите </div>.

Стили меняете на:

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

.left-body {
width: 20%;
padding: 5px;
float: left;
box-sizing: border-box;
}

.main-body {
float: right;
width: 80%;
}

.center-body {
margin-right: 260px;
padding: 5px;
overflow: hidden;
}

.right-body {
width: 240px;
padding: 5px;
float: right;
}

.section-index div.forabg, span.corners-bottom {
clear: none;
}
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость