Информация

  • FastVps - Хостинг для форума
  • RegPartner - Домены по правильным ценам

"4admins.ru" Рекомендует

Элементы навигации с фиксированным положением.

Графическое оформление, Шаблоны (html), темы (css), логотипы, картинки, смайлики и другое.
  • Автор 
    Сообщение
Аватара пользователя
Сообщения: 702
Зарегистрирован: 24 июн 2010, 13:42
Благодарил (а): 130
Поблагодарили: 316 раз в 213 сообщениях
Город: Москва
Пол: Женский
Адрес форума: http://foxlodge.fatbb.ru
Баллы репутации: 39

Элементы навигации с фиксированным положением.

Сообщение Добавлено: 25 дек 2010, 20:32

Внесу свои пять копеек в рецепты по тюнингу форума.

Слепила сегодня панельку, аналогичную панельке, которая есть в моем форуме на другой хостинг, и которая очень нравится пользователям.
Следующий код, я думаю, подойдет для любых стилей.
Вот это засовывается в шаблон овералл_футер перед закрывающим тегом боди.
Код: Выделить всё
    <!-- IF not S_IS_BOT -->
             <!-- IF S_USER_LOGGED_IN -->
    <div id="bottom_panel"><div id="second_nav">
                  <!-- IF S_DISPLAY_SEARCH and S_USER_LOGGED_IN --><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a>&nbsp;&nbsp;&#8226;&nbsp;&nbsp;<a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>&nbsp;&nbsp;&#8226;&nbsp;&nbsp;<a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a>&nbsp;&nbsp;&#8226;&nbsp;&nbsp;<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>&nbsp;&nbsp;&#8226;&nbsp;&nbsp;<!-- ENDIF -->

             
             <a href="{U_PROFILE}">{L_PROFILE}</a>&nbsp;&nbsp;&#8226;&nbsp;&nbsp;
             <!-- IF S_DISPLAY_PM --><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a><!-- ENDIF -->
             
           
    </div></div>
          <!-- ENDIF -->
    <!-- ENDIF -->


А вот это в сss. Точней, как тут это называется - в тему стиля.

Код: Выделить всё
    /* Нижняя фиксированная панель */
    #bottom_panel{
    position: fixed;
    z-index: 999;
    right: 0;
    bottom: 0;
    width: 100%;
    min-width: 1000px;
    height: 20px;
    margin: 0;
    padding: 0;
    background-color: transparent;
    _display: none; /* Хак для ИЕ-6, зарезать панель насмерть */
    }

    #second_nav {
    background-color:#e6eaf0;
    border-color:#284766 #284766 #284766;
    border-style:solid;
    border-width:1px 1px 0;
    clear:both;
    display:block !important;
    float:none;
    font-family:Arial;
    font-size:12px;
    font-weight:bold;
    height:20px;
    letter-spacing:normal;
    margin:auto;
    min-width:1000px;
    padding:0px 8px 0;
    position:static;
    text-align:center;
    text-transform:none;
    width:100%;
    word-spacing:normal;
    _display: none;
    }



Стиль панельки можно изменить по своему вкусу. Начинку тоже можно поменять на ту, которая больше нравится. Главное тут принцип - в НТМЛ разметке появляется элемент с position: fixed и z-index, превышающем все z-index на странице.
В общем виде НТМЛ код предложенного решения выглядит так:
Код: Выделить всё
    <!-- IF not S_IS_BOT -->
             <!-- IF S_USER_LOGGED_IN -->
    <div id="bottom_panel"><div id="second_nav">
               
содержимое панели
           
    </div></div>
          <!-- ENDIF -->
    <!-- ENDIF -->

Ключевые моменты для сss, которые при редактировании стиля панельки следует оставить:
Код: Выделить всё
    /* Нижняя фиксированная панель */
    #bottom_panel{
    position: fixed;
    z-index: 999;
    right: 0; /* это положение панели относительно правого края */
    bottom: 0; /* это положение панели относительно нижнего края */
    width: 100%; /* это ширина панели, можно сделать уже или шире */
    min-width: 1000px; /* это минимальная ширина элемента, задана, чтобы элементы не съезжали, если пользователь увеличит масштаб страницы, тоже можно менять, но указание желательно оставить */
    height: 20px; /* это высота панели, ее можно менять по своему вкусу, но указание высоты должно быть */

    _display: none; /* Хак для ИЕ-6, зарезать панель насмерть */
    }

    #second_nav {
       
    display:block !important;
    min-width:1000px;
    position:static;

    _display: none;
    }





Чтоб не извращаться сильно с обучением ИЕ-6 понимать позишн фиксед в css для панели добавлен хак, который просто рубит ее показ для ИЕ-6. Можно сделать и покроссбраузерней, чтоб и ИЕ-6 показвал панель корректно, но я смысла особого не вижу для него стараться.

Вот. Что получится в итоге? Маленькая полосочка внизу страницы, в которой для зарегистрированных пользователей будут ссылки на поиск новых сообщений, непрочитанных сообщений, активных тем, собственных сообщений и на личку.
Скрин с моего форума на 4админс: http://s003.обязуюсь больше не использовать этот фото-хостинг :)/i204/1012/57/b6b9f8cb6c87.gif
Полосочка при прокрутке страницы будет все время оставаться на месте.
Таким образом у вас и ваших пользователей появится возможность быстрого перехода без лишних телодвижений к новым сообщениям форума.

За это сообщение пользователя Alice поблагодарили:
Автор, banzaika, GoDFaTHeR, nar200, галлина, SanyaFox, Shans, Street_Racer, vikweb, Жужа

Аватара пользователя
Сообщения: 1567
Зарегистрирован: 14 ноя 2009, 04:00
Откуда: Пойдём покажу...
Благодарил (а): 195
Поблагодарили: 507 раз в 407 сообщениях
Город: Местный
Пол: Мужской
Адрес форума: http://1ua.2ua.in.ua/
Баллы репутации: 61

Re: Элементы навигации с фиксированным положением.

Сообщение Добавлено: 25 дек 2010, 20:46

Пример? Скрин? :unknown
А, ясно, без всяких наворотов, просто полосочка.
Графический контент для вашего форума!
Изображение

Аватара пользователя
Сообщения: 702
Зарегистрирован: 24 июн 2010, 13:42
Благодарил (а): 130
Поблагодарили: 316 раз в 213 сообщениях
Город: Москва
Пол: Женский
Адрес форума: http://foxlodge.fatbb.ru
Баллы репутации: 39

Re: Элементы навигации с фиксированным положением.

Сообщение Добавлено: 25 дек 2010, 20:58

Скрин с моего форума на 4админс: http://s003.обязуюсь больше не использовать этот фото-хостинг :)/i204/1012/57/b6b9f8cb6c87.gif
Живой пример использования элементов с позишн фиксед на одном из форумов другой хостинг: Удалено модератором (ссылки на сторонние ресурсы схожей тематики запрещены)
(кнопки в нижнем правом углу)

За это сообщение пользователя Alice поблагодарили:
Street_Racer

Аватара пользователя
Сообщения: 702
Зарегистрирован: 24 июн 2010, 13:42
Благодарил (а): 130
Поблагодарили: 316 раз в 213 сообщениях
Город: Москва
Пол: Женский
Адрес форума: http://foxlodge.fatbb.ru
Баллы репутации: 39

Re: Элементы навигации с фиксированным положением.

Сообщение Добавлено: 25 дек 2010, 21:02

[quoteem="Shans"]А, ясно, без всяких наворотов, просто полосочка.[/quoteem]
А навороты - это лишнее. :D

За это сообщение пользователя Alice поблагодарили:
anya, banzaika, GoDFaTHeR, Street_Racer

Аватара пользователя
Сообщения: 702
Зарегистрирован: 24 июн 2010, 13:42
Благодарил (а): 130
Поблагодарили: 316 раз в 213 сообщениях
Город: Москва
Пол: Женский
Адрес форума: http://foxlodge.fatbb.ru
Баллы репутации: 39

Re: Элементы навигации с фиксированным положением.

Сообщение Добавлено: 26 дек 2010, 10:35

Че-то я с этой полосочкой вчера недодумала. Сегодня заметила, что полоса без ссылок видна гостям. Некрасиво.
Исправила. Вот так не будет видно:
Код: Выделить всё
<!-- IF not S_IS_BOT -->
         <!-- IF S_USER_LOGGED_IN -->
<div id="bottom_panel"><div id="second_nav">
              <!-- IF S_DISPLAY_SEARCH and S_USER_LOGGED_IN --><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a>&nbsp;&nbsp;&#8226;&nbsp;&nbsp;<a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>&nbsp;&nbsp;&#8226;&nbsp;&nbsp;<a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a>&nbsp;&nbsp;&#8226;&nbsp;&nbsp;<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>&nbsp;&nbsp;&#8226;&nbsp;&nbsp;<!-- ENDIF -->

         
         <a href="{U_PROFILE}">{L_PROFILE}</a>&nbsp;&nbsp;&#8226;&nbsp;&nbsp;
         <!-- IF S_DISPLAY_PM --><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a><!-- ENDIF -->
         
       
</div></div>
      <!-- ENDIF -->
<!-- ENDIF -->

Аватара пользователя
Сообщения: 378
Зарегистрирован: 01 янв 2010, 15:07
Благодарил (а): 210
Поблагодарили: 47 раз в 41 сообщениях
Пол: Мужской
Адрес форума: http://bm082.ru
Баллы репутации: 11

Re: Элементы навигации с фиксированным положением.

Сообщение Добавлено: 26 дек 2010, 15:03

Блин вкусная полоска! :drink:
(если честно долго искал, скрина в 1м посте не хватает + не люблю я радикал...)+

:ihaaaa: испохабил полоску в стиле 610 по аналогии с навиПанелью, ИХМО простая, предложенная лучше, чисто css под себя поправил *pardon*
bm082.4admins.ru

Аватара пользователя
Сообщения: 702
Зарегистрирован: 24 июн 2010, 13:42
Благодарил (а): 130
Поблагодарили: 316 раз в 213 сообщениях
Город: Москва
Пол: Женский
Адрес форума: http://foxlodge.fatbb.ru
Баллы репутации: 39

Re: Элементы навигации с фиксированным положением.

Сообщение Добавлено: 28 дек 2010, 13:34

Прочла сегодня темку: viewtopic.php?f=14&t=1375
Поскольку проблемка возникла в связи с использованием моего кода, обращаю внимание тех, кто установил панель до 26 дек 2010, 10:35.
В код вносились исправления, касающиеся показа панели гостям и ботам. viewtopic.php?p=9181#p9181
Сейчас в первом посте темы присутствует исправленный код. Панель гостям и ботам не показывается.

И еще, если в Вашем стиле панель полностью закрыла какие-то копирайты, и они при прокрутке страницы не видны, исправить это очень просто. Надо перед кодом панели вставить несколько пустых строчек.
Пара-тройка <br />, добавленных перед <!-- IF not S_IS_BOT -->, помогут решить этот вопрос.

За это сообщение пользователя Alice поблагодарили:
GoDFaTHeR, галлина

Аватара пользователя
Сообщения: 729
Зарегистрирован: 08 авг 2011, 15:19
Откуда: Россия, Калмыкия
Благодарил (а): 273
Поблагодарили: 22 раз в 19 сообщениях
Город: г.Элиста
Пол: Женский
Адрес форума: http://собакиэлисты.рф
Баллы репутации: 4

Re: Элементы навигации с фиксированным положением.

Сообщение Добавлено: 28 сен 2011, 20:14

Alice
А для мало просвещённых можете помочь поставить такую полосочку?
Alice писал(а):Вот это засовывается в шаблон овералл_футер перед закрывающим тегом боди.

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

А где этот закрывающий тег? Что нужно найти?

Alice писал(а):А вот это в сss. Точней, как тут это называется - в тему стиля.

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

В тему стилей понятно, а в какое место?

Alice писал(а):Ключевые моменты для сss, которые при редактировании стиля панельки следует оставить:

Не поЙму! Так что-то всё же нужно оставлять????
Изображение

Тот, кто говорит, что счастье не купишь, никогда не покупал щенка (Уилфред Лэмптон)

Сначала бог создал человека, но, заметив его слабость, дал ему собаку ( А. Туссенель)

Аватара пользователя
Сообщения: 702
Зарегистрирован: 24 июн 2010, 13:42
Благодарил (а): 130
Поблагодарили: 316 раз в 213 сообщениях
Город: Москва
Пол: Женский
Адрес форума: http://foxlodge.fatbb.ru
Баллы репутации: 39

Re: Элементы навигации с фиксированным положением.

Сообщение Добавлено: 29 сен 2011, 00:20

галлина писал(а):А где этот закрывающий тег?

Я же писала. В шаблоне овералл_футер. *pardon*
галлина писал(а):Что нужно найти?

</body>
В тему стилей понятно, а в какое место?

Поставьте в конец
Не поЙму! Так что-то всё же нужно оставлять????

То, что в списке. Остальное можете выкинуть, если считаете, что оно Вам не надо.

Аватара пользователя
Сообщения: 729
Зарегистрирован: 08 авг 2011, 15:19
Откуда: Россия, Калмыкия
Благодарил (а): 273
Поблагодарили: 22 раз в 19 сообщениях
Город: г.Элиста
Пол: Женский
Адрес форума: http://собакиэлисты.рф
Баллы репутации: 4

Re: Элементы навигации с фиксированным положением.

Сообщение Добавлено: 29 сен 2011, 00:30

Код: Выделить всё
[quote="Alice"] /* Нижняя фиксированная панель */
    #bottom_panel{
    position: fixed;
    z-index: 999;
    right: 0;
    bottom: 0;
    width: 100%;
    min-width: 1000px;
    height: 20px;
    margin: 0;
    padding: 0;
    background-color: transparent;
    _display: none; /* Хак для ИЕ-6, зарезать панель насмерть */
    }[/quote]

Вносит вместе с этими словами????
Всё внесла, но никакой панель нет... :unknown
Последний раз редактировалось галлина 29 сен 2011, 00:36, всего редактировалось 1 раз.
Изображение

Тот, кто говорит, что счастье не купишь, никогда не покупал щенка (Уилфред Лэмптон)

Сначала бог создал человека, но, заметив его слабость, дал ему собаку ( А. Туссенель)


Вернуться в Оформление Форума

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

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