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

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

Привет, Гость! Войдите или зарегистрируйтесь.


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


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

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

1

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

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

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

0

2

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

Отредактировано Deff (Вс, 27 Фев 2011 01:19:12)

0

3

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

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

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

0

4

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

<style>
/*#pun-announcement {
display:none;
}
.punbb {
margin:0 26px 0 -26px;
}*/
#tbl-pun-main,#main-center {
width:100%;
padding:0;
border-collapse:collapse;
border:none transparent 0;
}
#main-td-left,#main-td-right {
position:relative;
z-index:100;
margin-top:-10px;
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:10px;
}
#main-td-right{
float:right;
width:110px;
margin-left:10px;
}
#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. -10 -Наезд сайд бара на пользовательское меню(или с плюсом - ниже меню -(* при 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-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>

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


(*Примеры тут >

> Тестируем

Отредактировано Deff (Пт, 11 Мар 2011 09:23:41)

+2

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-wrap;
}

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



2. При Одинарных сайд барах регулируем смещение нижних div, следующих в HTML коде страницы после #pun-main (*регулируем в первой части кода

Пример для левого сайд бара:

#pun-stats,#pun-break3,#pun-crumbs2,#pun-break4,#pun-about,#html-footer,#tieser-b-section{
  width:78%;
  margin-left:200px;
  margin-right:auto;
}

Для правого сайд бара:

#pun-stats,#pun-break3,#pun-crumbs2,#pun-break4,#pun-about,#html-footer,#tieser-b-section{
  width:78%;
  margin-left:auto;
  margin-right:200px;
}

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

Отредактировано Deff (Пн, 28 Фев 2011 10:14:21)

+1

6

Deff
Чуть позже займусь тестированием, извини пока времени мало..

0

7

Deff, поставил, протестировал пока при двух сайдбарах..
1. Съезжают пользовательские ссылки и ссылки главного меню. Это не есть гуд. Если Гостю это не так видно и пользователю тоже, то наличие слова Администрирование просто сдвигает все и ссылки наезжают на элементы оформления шапки.
Может можно как-то сделать, чтоб  это явление не появлялось?
2. Если форум закрыт для просмотра гостями совсем, то все это вместе съезжает влево и теряется заданная ширина. Основное окно с форумами становится еще уже. Что тоже. выглядит не очень.
3. В случае, если длина сайдбаров не залазит на блок статистики внизу и статистика шире основной таблицы  с форумами, то при просмотре самих форумов, если список тем короче, чем длина сайдбаров, то последние прямо садятся на блок нижней рекламы. Чтоб отделить, в стиле в объявлении я добавил дополнительно:

#main-td-left{
float:left;
width:110px;
margin-right:20px;
margin-bottom:20px;
}
#main-td-right{
float:right;
width:110px;
margin-left:20px;
margin-bottom:20px;
}

тогда и на главной странице форума все будет нормально.
Все это тестил на одном форуме, так что, все. как говорится, ИМХО.)))
ЗЫ. Поглядеть все описанное можно тут

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

0

8

Кофеман написал(а):

1. Съезжают пользовательские ссылки и ссылки главного меню. Это не есть гуд. Если Гостю это не

Ну дык дабы не съезжали нужно:

a) или уменьшать размер букв в пользовательских ссылках;
б) или брать достаточно узкий исходный форум и увеличивать ширину #pun перед установкой сайд баров(собственно эт не проблемы сайд бара - а проблемы сужения форума (настраивайте (в стиле или настройках) исходный форум по будущей ширине вместе с сайдбарам), затем увеличиваете ширину #pun до исходной и встраиваете сайдбар;
в) или берите исходный форум и перед установкой и расширяйте #pun на величину ширины сайд баров
г) Или просто убрать из скрипта строки включения этих модулей в сайд-бар таблицу >

divArray = new Array (
   "pun-navlinks",
   "pun-ulinks",

   "pun-announcement",
   "pun-status",
   "pun-break1",
   "pun-crumbs1",
   "pun-break2",
   "#pun-main",

"End"

Отредактировано Deff (Ср, 2 Мар 2011 11:18:03)

0

9

Кофеман написал(а):

3. В случае, если длина сайдбаров не залазит на блок статистики внизу и статистика шире основной таблицы  с форумами, то при просмотре самих форумов, если список тем короче, чем длина сайдбаров, то последние прямо садятся на блок нижней рекламы. Чтоб отделить, в стиле в объявлении я добавил дополнительно:

По тексту,(* хотя ночь - простительно - уменьшайте цифру красным (Вы ж её раздули до 87%;

#pun-stats,#pun-break3,#pun-crumbs2,#pun-break4,#pun-about,#html-footer,#tieser-b-section{
  width:65%;
  margin-left:auto;
  margin-right:auto;
}

Отредактировано Deff (Ср, 2 Мар 2011 11:15:04)

0

10

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

По тексту,(* хотя ночь - простительно - уменьшайте цифру красным (Вы ж её раздули до 87%;

Deff, так потому и раздул, чтоб в принципе нижний блок оставить шириной в #pun.
Мало ли у кого в футере может чат стоять или еще что-то, что при уменьшении потеряет вид.  Просто попробовал  и увидел, что бар прямиком садиться на нижний блок. Добавление нижнего отступа как раз решает вопрос.. Хотя, опять же, все ИМХО.
Остальные ваши советы попробую. Спасибо.

0

11

Кофеман Нижний блок - в стандартном сайд баре занимает такое же пространство, что и остальное блоки выше
Просьба у Автора топика  была избавится от глюков старого сайдбара,  плывущего при разных разрешениях экрана ( Вы тестируя, выставляете новые требования, которых в исходной заявке не было

Отредактировано Deff (Ср, 2 Мар 2011 23:09:44)

0

12

Deff, ну возможно с навигацией я погорячился.)) Если тестировать - так тестировать. Пытаюсь просто предугадать вопросы тех, кто начнет ставить этот сайдбар.. Хотя, возможно и правда нет в этом нужды.

ЗЫ. Сорри за флуд.

0

13

Кофеман написал(а):

Deff, ну возможно с навигацией я погорячился.))

Хм ... с Навигацией то как раз - (см пост 8 пункт г)) - проблем - нет - вынул пару строк из скрипта - и  всё как Вы и хотите
С наездом на футер: - уменьшайте высоту сайд бара или делайте auto- какие проблемы ?

Отредактировано Deff (Чт, 3 Мар 2011 18:05:42)

0

14

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

0

15

Invisible Man Бегунок появляецо если общая ширина форума вместе с сайдбарами больше экрана(кстать ты тести - для тебя 120% это разрешение 1024 (дальше вродь не имеет смысла крутить, для меньших разрешений)- делай форум резиновым и ограничивай максимальную ширину

#pun{width:100%;
max-width:1200px;
}

(#pun это в Первом Окне Стиля
max-width: - подстраивай

"pun-navlinks",
   "pun-ulinks",

Вынь из скрипта

Отредактировано Deff (Пт, 4 Мар 2011 16:23:18)

0

16

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

Вынь из скрипта

Вынул, и вот первые проблемы которые замечены умножение скриптов происходит

0

17

Invisible Man Поставь скрипт в самый низ HTML низ - тож самое ?

0

18

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

Поставь скрипт в самый низ HTML низ - тож самое ?

Яж сделал тебя там админом  :crazy:
Он и так стоит в самом самом низу

0

19

По бару еще.

Бар

background:#808080 url(http://onserial-letay-16.ru/uploads/000 … 24-3-f.png) top center repeat-x;
    border-style:solid;
    border-width:2px;
    }
    #main-td-left{
    float:left;
    width:20%;
    margin-right:20px;
    }
    #main-td-right{
    float:right;
    width:20%;
    margin-left:20px;
    }

Форум

/* A5.1 */
#pun {
  margin: 0 0 0 0;
  width: 80%; /* Ширина форума */
  padding: 0px 0px 0px 5px;
}

Итог 100%

или опять туплю?

0

20

Invisible Man Поменяй скрипт создания таблиц на такой >

Код:
	<!--Дополнительные кнопки в BB-панель-->
<script type="text/javascript">
if ($("#MytableTabl").html()==null){
var name2="'[/add]')\" /></fieldset></td><td style=\"border: 0;\"><fieldset style=\"padding: 3px;\"><legend>Таблица</legend><input type=\"button\" value=\" Таблица \" title=\"Создать скелет таблицы\" name=\"TABLE\" onclick=\"bbcode('[table]','[/table]')\" /><input type=\"button\" value=\" Строка \" name=\"TR\" title=\"Добавить строку в вашу таблицу\"  onclick=\"bbcode('[tr]','[/tr]')\" /><input type=\"button\" value=\"Ячейка\" name=\"TD\" onclick=\"bbcode('[td]','[/td]')\" title=\"Добавит ячейку в строку\"  /></fieldset></td></table></div>"
var arr=document.getElementsByTagName("div")
i=0
str=document.URL
while(arr[i] ){
if(arr[i].className=="fs-box hashelp"){
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div class=\"inform\" id=\"q1Span\" ><table id=\"MytableTabl\" style=\"border: 0;\"><tr><td style=\"border: 0;\"><fieldset style=\"padding: 3px;\"><legend>Текст</legend><input type=\"button\" value=\"Желтый фон\" name=\"H\" title=\"Добавит желтый фон к вашему тексту\" onclick=\"bbcode('[h]','[/h]')\" /><input type=\"button\" value=\" PRE \" name=\"PRE\" title=\"Предварительно отформатированый текст\" onclick=\"bbcode('[pre]','[/pre]')\" /><input type=\"button\" value=\"Линия\" name=\"H\" title=\"Добавит горизонтальную линию к вашему тексту\" onclick=\"bbcode('[hr]',' ')\" /><input type=\"button\" value=\"Добавлено\" name=\"add\" title=\"Если вы хотите добавить комментарий к вашему же сообщению, отредактируйте свое сообщение и внесите свой текст. После этого выделите и нажмите на эту кнопку.\" onclick=\"bbcode('[add]',"+name2+""+name+""
}
i++
}
}
</script>

0


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