Русское сообщество fluxbb

Быстрый лёгкий надёжный форумный движок

Вы не вошли.

Объявление

Вы можете внести свой вклад в содержание сайта. Жертвователи попадут в почетную группу "Спонсоры". Поддержать сайт.

#1 2010-10-24 09:32:19

artoodetoo
Admin by chance
Зарегистрирован: 2008-09-09
Сообщений: 887
Сайт

Урок CSS №1. Навигационная панель в стиле Twitter

Цель урока показать как настраивать внешний вид форума, используя шаблоны и стили. Для этого сайта я захотел добавить панель сверху, чтобы она была "приклеена" и не скроллировалась вместе со всей страницей. В панели размещу ссылки первой необходимости: лого с ссылкой на корень сайта, быстрый поиск и профиль + выход (регистрация + вход, для неавторизованных).

Рекомендую делать шаг за шагом, а не прыгать сразу в конец. Так в голове отложится больше полезной информации.

Вставляем в шаблон новый элемент

Откройте include/template/main.tpl
Сразу за тегом body вставьте такую строку:

<pun_include "topbar.php">

Движок будет искать модуль topbar.php в папке include/user. Создайте такую папку, если нет и сделайте в ней вот такой файл topbar.php:

<?php

?>
<div id="topbar">
ololo
</div>

Очевидно, что это всего лишь заготовка. Давайте посмотрим как будет выглядеть наша новая главная страница. Здесь и далее я буду считать, что мы работаем со стилем Air.
ss1l.png
Работает.

Фиксируем панель

Отправляемся редактировать файл стилей style/Air.css
В конец файла добавляем текст:

#topbar {
    width: 100%;
    height: 40px;
    background-color: #000;
    color: #fff;
}

Обновляем страницу в браузере. Наша панель стала выглядеть лучше. Но она не приклеена, при прокрутке страницы она уходит. Исправляем:

#topbar {
    position: fixed;
    width: 100%;
    height: 40px;
    background-color: #000;
    color: #fff;
}

* html #topbar {
    position: absolute;
}

Последние строки нужны для IE6. Он не понимает fixed, лекарство такое: надо размещать фиксированный элемент только непосредственно внутри body и объявить позиционирование absolute.
Ок, наша полоска стала фиксированной, можно поиграть с прокруткой и заметить новые проблемы с наложением элементов.

1. На языке верстальщиков наша панель теперь находится "не в общем потоке", поэтому она не вытесняет шапку форума, а лежит в тех же координатах.
2. Элементы с абсолютным позиционированием, как круглые уголки шапки, могут накладываться поверх панели.

Исправление: укажем "высоту" нашего слоя и увеличим верхний отступ для обертки форума. Находим в Air.css секцию "Page layout"  и исправляем padding на величину равную высоте нашей панели:

/* Page Layout
----------------------------------------------------------------*/

.pun {
    padding: 70px 40px 30px;
}

Отправляемся в конец и добавляем для #topbar z-index

#topbar {
    position: fixed;
    z-index: 100;

Пробуем прокрутку, наша панель размещена как надо!
ss2e.png

Позиционируем основные элементы внутри панели

Решаем что должно быть в панели

  • лого со ссылкой на корень сайта

  • строка быстроко поиска

  • (регистрация | вход) либо (профиль | выход)

изменяем topbar.php:

<div id="topbar">
    <div class="inbox">
        <div id="top-left">
            <a href="/" title="Home"><img id="top-logo" src="/img/logo.png" alt="logo" width="158" height="40"/></a>
            <form id="q-search" method="get" action="search.php">
                <input type="hidden" name="action" value="search" />
                <span class="glass"><i></i></span>
                <input type="text" id="keywords" name="keywords" maxlength="100" />
                <input  name="search" src="/img/zoom.png" alt="" title="" type="image" />
            </form>
        </div>
        <div id="top-right">
            <img id="top-logo" src="/img/spacer.png" alt="" width="1" height="40"/>
<?php
    if ($pun_user['is_guest']):
?>
            <a id="navregister" href="register.php"><?php echo $lang_common['Register'] ?></a> &nbsp;|&nbsp;
            <a id="navlogin" href="login.php"><?php echo $lang_common['Login'] ?></a>
<?php
    else:
?>
            <a id="navprofile" href="profile.php?id=<?php echo $pun_user['id'] ?>"><?php echo htmlspecialchars($pun_user['username']) ?></a> &nbsp;|&nbsp;
            <a id="navlogout" href="login.php?action=out&amp;id=<?php echo $pun_user['id'].'&amp;csrf_token='.pun_hash($pun_user['id'].pun_hash(get_remote_address())) ?>"><?php echo $lang_common['Logout'] ?></a></li>
<?php
    endif;
?>
        </div>        
    </div>
</div>

панель разбита на две части: top-left и top-right. Смысл понятен из названия. Всё это окружено оберткой inbox, он нужен чтобы задать левый и правый отступ равные отступам основного тела форума. В зависимости от того авторизовался ли пользователь, в правой половине будет та или иная пара ссылок.

Как всё это вывести красиво. Я воспользуюсь свойством vertical-align: middle, оно применимо для элеентов с типом inline или inline-block. Фактически элементы будут центрироваться по самому высокому элементу в строке. Таким элементом я объявляю картинки.
Вот моя окончательная версия вставки в Air.css

/* Top fixed bar
----------------------------------------------------------------*/

.pun {
    padding: 70px 40px 30px;
}

#topbar {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 40px;
    background-color: #000;
    color: #999;
    font: 81.25%/1.462em Arial, Helvetica, sans-serif;
}

* html #topbar { position: absolute; }

#topbar .inbox {
    position: relative;
    padding: 0 58px;
}

#top-left { float: left; }

#top-right { float: right; }

#topbar a:link, #topbar a:hover, #topbar a:visited {
    color: #bbb;
    font-weight: normal;
    text-decoration: none;
}

#topbar a:hover { color: #fff; }

#topbar .inbox a, #topbar .inbox form, #topbar input {
    display: inline;
    vertical-align: middle;
}

#top-right #navprofile, #top-right #navregister { padding-left: 12px; }
#top-right #navprofile img { border: 1px solid #999; }

#topbar .inbox form {
    background-color: #c0c0c0;
    border: 1px solid black;
    padding: 4px;
}

#topbar .inbox form #keywords {
    border: none;
    background-color: #c0c0c0;
    color: #333;
    width: 150px;
}

#topbar img {
    display: inline-block;
    vertical-align: middle;
    border: 0;
}
Итог

Ну вот, в целом всё. Конечно есть желание добавить всяких плюшек. Для урока достаточно.
ss3k.th.png

Архив с готовыми правками здесь: https://fluxbb.qb7.ru/files/topbar-v1.zip


There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.

Offline

#2 2010-10-24 18:44:01

Visman
Administrator
Из Сибирь
Зарегистрирован: 2009-06-08
Сообщений: 2,236
Сайт

Re: Урок CSS №1. Навигационная панель в стиле Twitter

5ff413d725c8.gif

Offline

#3 2010-10-24 18:53:57

artoodetoo
Admin by chance
Зарегистрирован: 2008-09-09
Сообщений: 887
Сайт

Re: Урок CSS №1. Навигационная панель в стиле Twitter

???
не понял, но думаю тебе надо нажать Ctrl+F5 smile

edited: я вначале не заметил, что в стилях уже есть z-index: 100, исправил свой на z-index: 110 чтобы панель была еще выше.


There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.

Offline

#4 2010-10-24 19:46:13

Freeman
Участник
Из Санкт-Петербург
Зарегистрирован: 2010-07-31
Сообщений: 128
Сайт

Re: Урок CSS №1. Навигационная панель в стиле Twitter

Что-то фигня какая-то. sad Во-первых, чёрная. Во-вторых ненастраиваемая. Украл 40 пикселей вертикального разрешения, которое и так не очень большое. sad

Аналогичная фигня на буржуйских сайтах тоже не нравится. Недавно и в ЖЖ появилась, LJ Times, типа. Слава богу, её можно задвинуть за край, чтобы только корешок выглядывал.

Offline

#5 2010-10-24 20:30:26

artoodetoo
Admin by chance
Зарегистрирован: 2008-09-09
Сообщений: 887
Сайт

Re: Урок CSS №1. Навигационная панель в стиле Twitter

Ты сейчас говоришь не про урок, а про этот сайт. Предлагаю обсудить в отдельной теме.


There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.

Offline

#6 2010-10-29 09:21:33

artoodetoo
Admin by chance
Зарегистрирован: 2008-09-09
Сообщений: 887
Сайт

Re: Урок CSS №1. Навигационная панель в стиле Twitter

Извиняйте братцы, совместимость решения с IE6 я делал только "теоретически". Сейчас добрался до IE6 и увидел багу. Можно стиль модифицировать вот так:

* html #topbar {
  position: absolute; 
  left: 0;
  top:expression(eval(document.documentElement.scrollTop)+'px');
}

Почему-то известный мне хак не сработал. Позже разберусь.

update: Опытным путём выяснил: рецепт "известного мне хака" перестает работать, когда исчезает
.wrapper {height: 100%;}
то есть в нашем случае height: 100% надо добавлять к .pun
Всё, что касается вёрстки под Internet Explorer это не наука, а шаманство. Позже сделаю новую версию примера.


There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.

Offline

#7 2010-12-11 02:28:50

Looler
Участник
Зарегистрирован: 2010-12-08
Сообщений: 5

Re: Урок CSS №1. Навигационная панель в стиле Twitter

Ребят, извиняюсь что поднимаю старую тему, но мне очень интересно куда вносить изменения чтобы изменить главное меню? ну вот например как у Вас в главное меню отделено Профиль и Выход (в правую сторону)
Заранее Спасибо!

Offline

#8 2010-12-11 11:40:45

Visman
Administrator
Из Сибирь
Зарегистрирован: 2009-06-08
Сообщений: 2,236
Сайт

Re: Урок CSS №1. Навигационная панель в стиле Twitter

Looler, главное меню формируется в файле functions.php ф-ей generate_navlinks().
Чтобы кнопки разбивались на части, artoodetoo видать внес в ф-ию изменение, которое их выводит в два блока: <ul class="conl"> - слева страницы и <ul class="conr"> - справа.

Offline

#9 2010-12-11 13:24:12

Looler
Участник
Зарегистрирован: 2010-12-08
Сообщений: 5

Re: Урок CSS №1. Навигационная панель в стиле Twitter

ну да, это я уже видел в коде вашего сайта, просто я никак не пойму куда вписывать в ПХП <ul class="conl">  и  <ul class="conr">   hmm

Offline

#10 2010-12-11 13:43:47

Looler
Участник
Зарегистрирован: 2010-12-08
Сообщений: 5

Re: Урок CSS №1. Навигационная панель в стиле Twitter

Разобрался!!! Спасибо Большое! 

P.S.: Отличный движок форума! Особенно Поражает его скорость работы!
smile  smile  smile

Offline

#11 2011-03-31 02:01:59

artoodetoo
Admin by chance
Зарегистрирован: 2008-09-09
Сообщений: 887
Сайт

Re: Урок CSS №1. Навигационная панель в стиле Twitter

Полезная информация в тему: как с помощью CSS настроить ссылки-якоря чтобы открывались со смещением, например чтобы прикрепленная панель не заслоняла нужный текст.

http://css-tricks.com/hash-tag-links-padding/

http://nicolasgallagher.com/jump-links- … sitioning/


There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.

Offline

Подвал доски

Под управлением FluxBB. Хостинг Hostens