Единый форум поддержки

Объявление

Для поиска информации рекомендуем воспользоваться поиском по форуму — это удобно ;)
Не забывайте указывать адрес форума в случае проблемы — иначе мы вам не сможем помочь!

Почему e-mail нужно подтверждать?

Информация о пользователе

Привет, Deff. Ваш последний визит: Сегодня 00:23:52. В фонде форума: 937.13 кредитов. Помочь форуму.


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Новый Вариант сайдбара,встроенного в pun-main


Новый Вариант сайдбара,встроенного в pun-main

Сообщений 1 страница 5 из 5

1

Deff написал(а):

Открывай завтра новую тему - Новый Вариант сайдбара,встроенного в pun-main
(для идентичного отражения:  подстраиваемого под ширину страницы форума и сайдбара при разных разрешениях монитора) Бум тестить новый срипт

Готов приступить к тестированию.
Уже всю голову сломал, то не так то это не то.....

0

2

Invisible Man Ыы Пока ты долго собиралсо, -  http://i039.radikal.ru/0806/ec/a5ffc6d7cfd9.gif мну все идеи подрастерял, - поскольку был занят совсем другим -  завтра подумаю

Отредактировано Deff (Вчера 01:19:12)

0

3

Deff написал(а):

завтра подумаю

Хоккей..подождемс  :yep:

0

4

В Объявление  ставим вот такое

<style>
#tbl-pun-main,#main-center {
padding:0;
border-collapse:collapse;
border:none transparent 0;
}

#main-td-left,#main-td-right {
position:relative;
z-index:100;
margin-top:-50px;
padding:12px;
height:1000px;
background:#ABC9E1 url(http://savepic.net/605682.png) top center repeat-x;
border-style:solid;
border-width:1px;
}
#main-td-left{
float:left;
width:110px;
margin-right:20px;
}
#main-td-right{
float:right;
width:110px;
margin-left:20px;
}
#tbl-pun-main,td#main-center,td#left,td#right {
border:none transparent 0;
}
#pun-stats,#pun-break3,#pun-crumbs2,#pun-break4,#pun-about,#html-footer,#tieser-b-section{
  width:65%;
  margin-left:auto;
  margin-right:auto;
}
</style>
<!-- Сайд-Бар контент --><div id="MySideBarContent" style="display:none;">
<!--  Контент левого Сайдбара -->
<div id="main-td-left">

Контент левого Сайдбара
</div>

<!-- Контент правого Сайдбара -->

<div id="main-td-right">
Контент правого Сайдбара
</div>

<!-- Конец Сайд-Бар контентов --></div>

Пояснения:
Красным Ваши основные регулировки

1. -50 -Наезд сайд бара на шапку(или с плюсом - ниже шапки -(* при 0 его край на верхней границе меню навигации
2. height:1000px; - первоначальная высота сайд бара (можно поставить auto;
3. background:#ABC9E1 url(http://savepic.net/605682.png) top center repeat-x; - цвет и картинка бекграундом
4. width:110px;  ширина левого и правого сайд бара (соответственно
5. width:65%; -Поскольку секции ниже pun-main  не входят в табличку - подгонять ширину под ширину центрального модуля таблицы приходится вручную -в общем случае в процентах(для резиновых по ширине форумов, (при фиксированной ширине форума, можно и в пикселах

В НTML низ -сам скрипт:

Код:
<script type="text/javascript"><!-- Установка Сайд-Бар контентов -->
var str='<table id="tbl-pun-main" cellspacing="0" cellpadding="0"><tbody><tr valign="top"><td id="main-center"></td></tr></tbody></table>';
$("#tieser-bottom").parent(".section").attr("id","tieser-b-section")
$("#pun-main").before(str)
  $("#pun-main").prependTo("#main-center")

divArray = new Array (
   "pun-navlinks",
   "pun-ulinks",
   "pun-announcement",
   "pun-status",
   "pun-break1",
   "pun-crumbs1",
   "pun-break2",
   "#pun-main",

"End"
);
 var N=divArray.length-2;
  for(var i=1; i<=N; i++ ){
  // var j=i; alert((N-i)+">>"+divArray[N-i]);
   $("#"+divArray[N-i]).prependTo("#main-center")
  }
if($("#main-td-left").html()!==null) {
  var str='<td id="td_left"> </td>'
   $("#main-center").before(str)
 $("#main-td-left").prependTo("#td_left")
}
if($("#main-td-right").html()!==null) {
  var str='<td id="td_right"> </td>'
   $("#main-center").after(str)
 $("#main-td-right").prependTo("#td_right")
}
$(document).ready(function() {});
</script>
<!-- 
var str='<td id="td_left"> </td>'
$("#main-center").before(str)
var str='<td id="td_right"> </td>'
$("#main-center").after(str) 
//Конец сайдбаров -->

Если Вы хотите убрать один из сайдбаров, - просто убираем ту или иную запись,  соответствующего модуля (в первой части скрипта в Объявлении)

<!--  Контент левого Сайдбара -->
<div id="main-td-left">[/color]

Контент левого Сайдбара
</div>

Или

<!-- Контент правого Сайдбара -->

<div id="main-td-right">
Контент правого Сайдбара
</div>

- Соответствующий сайдбар(левый или правый) просто не поставицо скриптом



(*Пример тут > http://hostjs-mybb2011.narod.ru/Side-BAR.htm > Тестируем

Отредактировано Deff (Сегодня 00:13:11)

0

5

(*Место для дополнений -исправлений

1.Зы - Замечено, что для корректной работы в топике при любом контенте, необходимо корректировать максимальную ширину(max-width) -->  сode-box, quote-box, img.postimg

В стиль первой части кода, в объявлении,  добавляем такие строки >

#main-center .blockquote,#main-center .code-box, #main-center .quote-box,#main-center img {
max-width:210px!important;
white-space:pre-line;
}

(*-значение красным - регулируем

Отредактировано Deff (Сегодня 06:50:23)

0

RSSAtom

Тему просматривают (Гостей: 0, Пользователей: 1) Deff

Быстрый ответ

Напишите ваше сообщение и нажмите отправить

автор Bloom автор Bloom автор Bloom автор Bloom автор Bloom автор Bloom автор Bloom автор Bloom автор Bloom

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


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Новый Вариант сайдбара,встроенного в pun-main


Используются технологии uCoz