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

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

Вы не вошли.

Объявление

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

#1 2008-03-16 14:53:30

domeno
Гость

Иконки над кнопками меню

Подскажите как можно вставить над каждым пунктом меню свою иконку
Пример: http://smages.com/i/5e/71/5e71b5272e64e … 63146d.gif

Я пробовал в файле \lang\Russian\common.php делать изменения аля:

'Index'        =>    '<img src="../../img/test.gif" width="50" height="50"><br>Главная',

Все получалось как и было задумано

Но если это повторить и для других пунктов:

'Index'        =>    '<img src="../../img/test.gif" width="50" height="50"><br>Главная',
'User list'        =>    '<img src="../../img/test.gif" width="50" height="50"><br>Пользователи',
'Rules'        =>    '<img src="../../img/test.gif" width="50" height="50"><br>Правила',

то менюшка съезжала вниз как ступеньки.

#2 2008-03-16 15:21:19

VoiD
Гость

Re: Иконки над кнопками меню

это вроде бы от того, что пункты меню через <li> делаются

#3 2008-03-16 15:28:42

domeno
Гость

Re: Иконки над кнопками меню

Угу именно от этого. Не могу найти где редактировать это. В каком файле?

Редактировался domeno (2008-03-16 15:37:30)

#4 2008-03-16 16:19:06

Visman
Гость

Re: Иконки над кнопками меню

domeno
Файл functions.php function generate_navlinks()

#5 2008-03-16 17:02:45

domeno
Гость

Re: Иконки над кнопками меню

Visman пишет:

Файл functions.php function generate_navlinks()

Даже убирая тег li ничего у меня не выходит sad

$links[] = '<span id="navindex"><a href="index.php"><img src="../../img/test.gif" width="50" height="50"><br />'.$lang_common['Index'].'</a>';

Пункты меню все ровно сползают вниз.
Это надо наверное еще в какомто файле вносить изменения?

#6 2008-03-16 19:20:48

artoodetoo
Гость

Re: Иконки над кнопками меню

чтобы не сползали надо поработать со стилями.

по-умолчанию все элементы меню (<li> и <a>) имеют стиль DISPLAY: inline, так же как и <span>! то есть они работают просто как строка текста, а не как прямоугольные блоки.
можно заменить стиль отображения <li> или <a> на block и применить FLOAT: left. тогда внутри блока можно будет безболезненно воткнуть перевод строки.

кстати, можно будет вообще оставить generate_navlinks() в покое: для блочного элемента можно указать нужную высоту и сделать картинки как фоновый рисунок, опять же через стили.

экспериментируй!

#7 2008-03-17 09:52:39

domeno
Гость

Re: Иконки над кнопками меню

Спасибо огромное!

Только вот еще один момент
В файле function.php я вставляю картинки для каждого пункта меню аля

$links[] = '<li id="navindex"><a href="index.php"><img src="../../img/test.gif" width="50" height="50"><br>'.$lang_common['Index'].'</a>';

только переменнтая ссылки ЛС видимо указана гдето в другом файле и она одна пока что остается без иконки у меня. Подскажите в каком.

Редактировался domeno (2008-03-17 10:02:08)

#8 2008-03-17 11:44:21

Visman
Гость

Re: Иконки над кнопками меню

domeno пишет:

Подскажите в каком.

functions_navlinks.php в /include/pms

#9 2008-03-17 12:35:57

domeno
Гость

Re: Иконки над кнопками меню

Спасибо.
Появилась проблема в Mozilla Firefox.
Строка не растягивается под новый размер меню и меню выходит за ее рамки.
В IE все в порядке

Редактировался domeno (2008-03-17 12:42:48)

#10 2008-03-17 18:27:56

domeno
Гость

Re: Иконки над кнопками меню

Изменил файл base.css следующим образом:

было

/* 8.1 Horizontal display of online list, main navigation menu and breadcrumbs */

#onlinelist DD, #onlinelist DT, #brdmenu LI, DIV.linkst LI, DIV.linksb LI, DIV.postlinksb LI,
DIV.postfootright LI, UL.bblinks LI {
    DISPLAY: inline;
    HEIGHT: 0
}

стало

/* 8.1 Horizontal display of online list, main navigation menu and breadcrumbs */

#onlinelist DD, #onlinelist DT, #brdmenu LI, DIV.linkst LI, DIV.linksb LI, DIV.postlinksb LI,
DIV.postfootright LI, UL.bblinks LI {
    DISPLAY: block;
    float: left;
    HEIGHT: 100;
}

Результат в браузерах:
Internet Explorer - http://www.imagebar.net/out.php/i18333_11.gif
Mozilla Firefox - http://www.imagebar.net/out.php/i18334_22.gif

#11 2008-03-18 02:11:53

artoodetoo
Гость

Re: Иконки над кнопками меню

эээ, domeno! зачем ты меняешь стиль для кучи разных LI !!! это плохо! сделай отдельное описание только для #brdmenu LI

чтобы тестировать это, сначала сделай реальные картинки, а не "картинка не найдена". я вот не знаю как FF поступает с отсутствующими картинками, это может влиять...
пока картинок нет, твой тест вообще ничего не значит.

#12 2008-03-18 08:26:44

domeno
Гость

Re: Иконки над кнопками меню

Мне всетаки удалось добиться необходимого результата но я не уверен в своей грамотности изспользования css

/* 8.1 Horizontal display of online list, main navigation menu and breadcrumbs */

#onlinelist DD, #onlinelist DT, DIV.linkst LI, DIV.linksb LI, DIV.postlinksb LI,
DIV.postfootright LI, UL.bblinks LI {
    DISPLAY: inline;
    HEIGHT: 0
}

#brdmenu {
    float: left;
    width: 98.8%;
}

#brdmenu LI {
    DISPLAY: block;
    float: left;
    HEIGHT: 100;
    text-align: center;
}

width: 98.8%; - пришлось использовать width потому что иначе блок не растягивался по ширине таблицы и был до половины (очень интересует будет ли соответствовать числовое значение 98.8 так сказать пропорциям других брауезров (в ie и ff все в порядке) )
DISPLAY: block; - это я вообще не понимаю что и для чего потому что если это убрать ничего не меняется

Просьба исправить мои ошибки если таковые имеются

Редактировался domeno (2008-03-18 09:15:59)

#13 2008-03-19 18:21:47

domeno
Гость

Re: Иконки над кнопками меню

Как оказалось на мудрил я - все работает но очень криво.
Помогите люди добрые sad

Подвал доски

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