Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Поделиться ссылкой

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор Балеар в Пт 5 Сен - 13:55

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

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

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

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

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

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

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

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

Вот текущий код кнопок из 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 );
            });
      });

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

Балеар
 
 

Пол : Мужчина
Сообщения : 65
Возраст : 33
Карма : Без предупреждений
Благодарности : 3
Регистрация : 2012-12-13

http://smuta.forumgrad.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Балеар в Сб 6 Сен - 17:39

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

Балеар
 
 

Пол : Мужчина
Сообщения : 65
Возраст : 33
Карма : Без предупреждений
Благодарности : 3
Регистрация : 2012-12-13

http://smuta.forumgrad.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор IceQueen в Сб 6 Сен - 17:44

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

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



Не забывайте сюда заглядывать!

Pls, не кидайте вопросы "как поставить", "как настроить" мне в ЛС! Я не юзаю личку.
Воспользуйтесь поиском. Откройте свою тему. Это не так страшно, как кажется ;)

IceQueen
Помощник
Помощник

Пол : Женщина
Сообщения : 1110
Возраст : 27
Карма : Без предупреждений
Благодарности : 476
Регистрация : 2009-05-31

http://help.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Балеар в Сб 6 Сен - 18:53

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

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

Балеар
 
 

Пол : Мужчина
Сообщения : 65
Возраст : 33
Карма : Без предупреждений
Благодарности : 3
Регистрация : 2012-12-13

http://smuta.forumgrad.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор IceQueen в Сб 6 Сен - 19:29

Смотрите CSS в туториале. Там есть строка
Код:
/* все скрытые блоки с контентом после первого */



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

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



Не забывайте сюда заглядывать!

Pls, не кидайте вопросы "как поставить", "как настроить" мне в ЛС! Я не юзаю личку.
Воспользуйтесь поиском. Откройте свою тему. Это не так страшно, как кажется ;)

IceQueen
Помощник
Помощник

Пол : Женщина
Сообщения : 1110
Возраст : 27
Карма : Без предупреждений
Благодарности : 476
Регистрация : 2009-05-31

http://help.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Балеар в Сб 6 Сен - 19:54

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

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

Балеар
 
 

Пол : Мужчина
Сообщения : 65
Возраст : 33
Карма : Без предупреждений
Благодарности : 3
Регистрация : 2012-12-13

http://smuta.forumgrad.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор IceQueen в Сб 6 Сен - 20:10

@Балеар пишет:как добавить еще один блок кнопок справа от фрейма информационного окна
А что за кнопки, уточните? Они тоже должны вкладки открывать или просто вести по разным ссылкам?

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



Не забывайте сюда заглядывать!

Pls, не кидайте вопросы "как поставить", "как настроить" мне в ЛС! Я не юзаю личку.
Воспользуйтесь поиском. Откройте свою тему. Это не так страшно, как кажется ;)

IceQueen
Помощник
Помощник

Пол : Женщина
Сообщения : 1110
Возраст : 27
Карма : Без предупреждений
Благодарности : 476
Регистрация : 2009-05-31

http://help.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Балеар в Сб 6 Сен - 20:30

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

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

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

Балеар
 
 

Пол : Мужчина
Сообщения : 65
Возраст : 33
Карма : Без предупреждений
Благодарности : 3
Регистрация : 2012-12-13

http://smuta.forumgrad.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор IceQueen в Вс 7 Сен - 0:08

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


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



Не забывайте сюда заглядывать!

Pls, не кидайте вопросы "как поставить", "как настроить" мне в ЛС! Я не юзаю личку.
Воспользуйтесь поиском. Откройте свою тему. Это не так страшно, как кажется ;)

IceQueen
Помощник
Помощник

Пол : Женщина
Сообщения : 1110
Возраст : 27
Карма : Без предупреждений
Благодарности : 476
Регистрация : 2009-05-31

http://help.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Балеар в Вс 7 Сен - 0:15

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

Балеар
 
 

Пол : Мужчина
Сообщения : 65
Возраст : 33
Карма : Без предупреждений
Благодарности : 3
Регистрация : 2012-12-13

http://smuta.forumgrad.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор IceQueen в Вс 7 Сен - 1:41

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

Ширина форума у Вас 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;
}
Сохраняем.



Не забывайте сюда заглядывать!

Pls, не кидайте вопросы "как поставить", "как настроить" мне в ЛС! Я не юзаю личку.
Воспользуйтесь поиском. Откройте свою тему. Это не так страшно, как кажется ;)

IceQueen
Помощник
Помощник

Пол : Женщина
Сообщения : 1110
Возраст : 27
Карма : Без предупреждений
Благодарности : 476
Регистрация : 2009-05-31

http://help.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Балеар в Вс 7 Сен - 2:10

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


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

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

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

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

Балеар
 
 

Пол : Мужчина
Сообщения : 65
Возраст : 33
Карма : Без предупреждений
Благодарности : 3
Регистрация : 2012-12-13

http://smuta.forumgrad.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор IceQueen в Вс 7 Сен - 11:52

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

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



Не забывайте сюда заглядывать!

Pls, не кидайте вопросы "как поставить", "как настроить" мне в ЛС! Я не юзаю личку.
Воспользуйтесь поиском. Откройте свою тему. Это не так страшно, как кажется ;)

IceQueen
Помощник
Помощник

Пол : Женщина
Сообщения : 1110
Возраст : 27
Карма : Без предупреждений
Благодарности : 476
Регистрация : 2009-05-31

http://help.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Балеар в Вс 7 Сен - 12:28

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

Балеар
 
 

Пол : Мужчина
Сообщения : 65
Возраст : 33
Карма : Без предупреждений
Благодарности : 3
Регистрация : 2012-12-13

http://smuta.forumgrad.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор IceQueen в Вс 7 Сен - 12:49

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



Не забывайте сюда заглядывать!

Pls, не кидайте вопросы "как поставить", "как настроить" мне в ЛС! Я не юзаю личку.
Воспользуйтесь поиском. Откройте свою тему. Это не так страшно, как кажется ;)

IceQueen
Помощник
Помощник

Пол : Женщина
Сообщения : 1110
Возраст : 27
Карма : Без предупреждений
Благодарности : 476
Регистрация : 2009-05-31

http://help.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Балеар в Вс 7 Сен - 13:03

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

Балеар
 
 

Пол : Мужчина
Сообщения : 65
Возраст : 33
Карма : Без предупреждений
Благодарности : 3
Регистрация : 2012-12-13

http://smuta.forumgrad.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения