Информационный блок под меню навигации (проблема)

Доброго времени суток, уважаемые форумчане и представители проекта 2х2!

Начал я ваять информационное окно для своей форумки "по мотивам" вашего гайдика: https://help.forum2x2.ru/t25928-topic

Все там разжовано доходчиво и понятно, за что отдельное спасибо Dana Domirani!

Получилось хорошо, но есть два вопроса, которые пока в голову мне не идут никак:

1) Можно ли сделать еще один блок кнопок, правый (т.е. и слева и справа от фрейма информации должны быть кнопки)?

2) Какой параметр в коде отвечает за расстояние кнопок от основного фрейма (я хочу их почти вплотную посадить)?

3) При старте страницы у меня все пока выглядит вот так (на дизайн не смотрите, он черновой):

Как видите, текст в основном фрейме отражает контент многих кнопок сразу. При нажатии на любую кнопку такой эффект пропадает. Как это исправить?

Вот текущий код кнопок из overall_header:

Код:

<div id="but-menu">
<div id="tb1-button" class="button">Старт</div>
<div id="tb2-button" class="button">Новости</div>
<div id="tb3-button" class="button">Навигация</div>
<div id="tb4-button" class="button">Доска почета</div>
<div id="tb5-button" class="button">Погода</div>
<div id="tb6-button" class="button">Старт</div>
<div id="tb7-button" class="button">Новости</div>
<div id="tb8-button" class="button">Навигация</div>
<div id="tb9-button" class="button">Доска почета</div>
<div id="tb10-button" class="button">Доска почета</div>
<div id="tb11-button" class="button">Погода</div>
<div id="tb12-button" class="button">Старт</div>
<div id="tb13-button" class="button">Новости</div>
<div id="tb14-button" class="button">Навигация</div>
<div id="tb15-button" class="button">Доска почета</div>
</div>

<div id="but-content">
<div id="tb1" class="but">Контент для кнопки Старт</div>
<div id="tb2" class="but">Контент для кнопки Новости</div>
<div id="tb3" class="but">Контент для кнопки Навигация</div>
<div id="tb4" class="but">Контент для кнопки Доска почета</div>
<div id="tb5" class="but">Контент для кнопки Погода</div>
<div id="tb6" class="but">Контент для кнопки Старт</div>
<div id="tb7" class="but">Контент для кнопки Новости</div>
<div id="tb8" class="but">Контент для кнопки Навигация</div>
<div id="tb9" class="but">Контент для кнопки Доска почета</div>
<div id="tb10" class="but">Контент для кнопки Доска почета</div>
<div id="tb11" class="but">Контент для кнопки Старт</div>
<div id="tb12" class="but">Контент для кнопки Новости</div>
<div id="tb13" class="but">Контент для кнопки Навигация</div>
<div id="tb14" class="but">Контент для кнопки Доска почета</div>
<div id="tb15" class="but">Контент для кнопки Доска почета</div>
</div>

</div>

А вот текущий код java скрипта на это дела:

Код:

$(function(){
               $("#tb2-button, #tb3-button, #tb4-button, #tb5-button, #tb6-button, #tb7-button, #tb8-button, #tb9-button, #tb10-button, #tb11-button, #tb12-button, #tb13-button, #tb14-button, #tb15-button").css({
            opacity: 0.9
         });
                  $("#page-but div.button").click(function(){
                              $clicked = $(this);
                                        if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                                    $clicked.animate({
                     opacity: 1,
                  }, 60 );
                  var idToLoad = $clicked.attr("id").split('-');
                  $("#but-content").find("div.but:visible").fadeOut("fast", function(){
                     $(this).parent().find("#"+idToLoad[0]).fadeIn();
                  })
               }
               $clicked.siblings(".button").animate({
                  opacity: 0.9,
               }, 60 );
            });
      });

Заранее благодарен за ответы.

Есть у кого мысли по поводу вышеприведенных вопросов, коллеги?

Первая мысль: смотреть настройки отступов быстрее и удобнее на живом примере. Где искать живой пример?

Балеар пишет:Как видите, текст в основном фрейме отражает контент многих кнопок сразу.

Это симптом отсутствия CSS настроек, необходимых для данного скрипта. По-умолчанию все элементы контента "tb_порядковый_номер" (кроме "tb1") должны быть скрыты.

В CSS скрыть? О_о А какой командой?

Я только начинаю учить такие вещи и не вся терминология мне пока понятна. Можно чуточку по-подробнее? Может с каким то примерчиком в 1 строчку, дабы я понял о чем речь.

Смотрите CSS в туториале. Там есть строка

Код:

/* все скрытые блоки с контентом после первого */

Вам надо продлить список, у Вас же больше вкладок с контентом:

Код:

/* все скрытые блоки с контентом после первого */
#tb2, #tb3, #tb4, #tb5, #tb6, #tb7, #tb8, #tb9, #tb10, #tb11, #tb12, #tb13, #tb14, #tb15 {
display: none;
}

Заработало! Да, проглядел... Спасибо вам огромное!

Господа, не подскажите как добавить еще один блок кнопок справа от фрейма информационного окна (сейчас есть только слева) и какой командой можно эти оба блока кнопок вплотную к экрану прилепить?

Балеар пишет:как добавить еще один блок кнопок справа от фрейма информационного окна

А что за кнопки, уточните? Они тоже должны вкладки открывать или просто вести по разным ссылкам?

Балеар пишет:какой командой можно эти оба блока кнопок вплотную к экрану прилепить

Живой пример меню покажите, пожалуйста.

Вот схематика будущего меню и того, что я хочу с ним сделать:

1) Черным выделен блок кнопок, которые будут выводить данные в информационный фрейм около них. Его надо вплотную к окну придвинуть.
2) Белым обозначено место, где будет другой блок кнопок, которые будут вести на сторонние ресурсы (открывать их в новом окне браузера по щелчку).
Ну и готовый "моноблок" (кнопки + окно) уже отцентрировать потом надо будет, что бы оно локонично смотрелось в фрейме форума и не вылезало за него.

Полистал сайты, кое-как похоже подобное окно вот тут: http://reilana.mybb.ru/
Там нет второго блока кнопок, но суть где то такая будет.

Балеар, я прошу ссылку именно на то меню, которое Вы сейчас собираете.  Вот на этот форум, который у Вас на скрине:


Понимаете, имея доступ к html коду на странице я могу просто открыть инструменты веб-разработчика, ткнуть курсором на меню и в онлайн-режиме посмотреть, у какого элемента надо подправить margin или padding, чтобы они легли вплотную. Это дело двадцати секунд. В противном случае мне надо собирать такое меню на тестовике... а это долго и мне этого делать не хочется.

Конечно, вот ссылка на собираемый мной форум, куда я делаю данное меню: http://smuta.forumgrad.ru/

Так теперь смотрим.

Ширина форума у Вас 1100px.
Ширина всего меню сейчас 1000px. При этом левая часть (с кнопками) шириной 250px (хотя сами кнопки шириной всего 200px), а правая (с контентом) 700px. В сумме 250px и 700px дают 950px, т.е. 50px остаются бесхозными плюс лишнее пространство у кнопок, отсюда и этот гигантский отступ.
Что можно сделать:

1) Сужаем блок с кнопками: ищем в CSS

Код:

#but-menu {
float: left;
width: 250px;
}

и меняем 250px на 150px

Ищем

Код:

#but-menu .button {
cursor: pointer;
width: 200px;
height: 20px;
line-height: 20px;
background: url(http://apocaliptodata.ucoz.ru/SMUTA/INDEX/Infoblock/Infoblock_knopka.png) center repeat;
margin: 0px auto;
font-size: 11px;
font-family: 'Ruslan Display', cursive;
color: #FEFEFE;
text-align: center;
}

и меняем 200px на 150px

Сохраняем.


2) Меняем код меню, добавляем правый блок.

Ищем в коде меню

Код:

<div id="but-content">

и перед ней добавляем строчку - будущую правую панельку

Код:

<div class="pravoe_menu"> тут контент правого меню </div>

Сохраняем.

3) В CSS добавляем настройки для правого меню

Код:

.pravoe_menu {
width: 150px;
float: right;
min-height: 200px;
}

Сохраняем.

Спасибо огромное! Выровнялось + добавил одну кнопку справа. Вот, что получилось:


Верхнюю кромку кнопок и букв немного срезает и слева и справа почему то. При нажатии на левую кнопку она появляется полностью. Пока не понял почему так.

Я правильно понимаю, что приведенный вами код правого блока является просто контейнером и в него надо добавить вид кнопок, сами кнопки и ссылки потом? Просто я попытался сделать нечто подобное на примере левого блока, но пока не выходит (получается непойми что).

Если не сложно, можете напоследок код таких кнопок подсказать, ну и куда там что прописывать, дабы они могли открывать внешние ссылки в новых окнах браузера?   .

Был бы очень и очень благодарен за неоценимую помощ.

Так. А меню у Вас не внутри форума, а между шапкой и телом? Надо перетащить внутрь.

1) В CSS вот отсюда

Код:

#page-but {
width: 1000px;
background: #dee3e7 url(http://illiweb.com/fa/empty.gif) center repeat;
margin: 0 auto;
}

замените строчку

Код:

background: #dee3e7 url(http://illiweb.com/fa/empty.gif) center repeat;

на

Код:

padding: 10px 0 0;

Сохраните.


2) В шаблоне overall_header вырежите код меню

Код:

<div id="page-but"><div id="but-menu"><div id="tb1-button" class="button">Старт</div><div id="tb2-button" class="button" style="opacity: 0.9;">Новости</div><div id="tb3-button" class="button" style="opacity: 0.9;">Навигация</div><div id="tb4-button" class="button" style="opacity: 0.9;">Доска почета</div><div id="tb5-button" class="button" style="opacity: 0.9;">Погода</div><div id="tb6-button" class="button" style="opacity: 0.9;">Сумрак</div></div><div class="pravoe_menu"> <div id="tb7-button" class="button">Сумрак</div></div>                            <div id="but-content"><div id="tb1" class="but">Контент для кнопки Старт</div><div id="tb2" class="but">Контент для кнопки Новости</div><div id="tb3" class="but">Контент для кнопки Навигация</div><div id="tb4" class="but">Контент для кнопки Доска почета</div><div id="tb5" class="but">Контент для кнопки Погода</div><div id="tb6" class="but">Контент для кнопки Сумрак</div></div></div>

и поставьте его ПОСЛЕ строчки

Код:

<div id="page-body">

Сохраните и не забудьте опубликовать.

Балеар пишет:Если не сложно, можете напоследок код таких кнопок подсказать, ну и куда там что прописывать, дабы они могли открывать внешние ссылки в новых окнах браузера?

Код самих ссылок:

Код:

<a href="#" class="button" target="_blank">Сумерки1</a>
<a href="#" class="button" target="_blank">Сумерки2</a>
<a href="#" class="button" target="_blank">Сумерки3</a>

CSS для них

Код:

.pravoe_menu .button {
text-align: center;
display: block;
width: 150px;
height: 20px;
line-height: 20px;
background: url(http://apocaliptodata.ucoz.ru/SMUTA/INDEX/Infoblock/Infoblock_knopka.png) center repeat;
margin: 0px auto;
font-size: 11px;
font-family: 'Ruslan Display', cursive;
color: #fff;
text-decoration: none !important;
}

Спасибо вам огромное! Теперь могу смело заниматься дизайном, ведь всё заработало как часы!

Балеар, пожалуйста. Темку close?

Да. Еще раз огромное вам спасибо! Я доволен как слон! Отличная штука получается!